Random beginner-question: color only a certain digit within a row

Question

Hi everyone,

with this

var ggg = ""
if enteredDigitsCount == 4:
    ggg = ggg.insert(2, "_")
    text = text.insert(1, ggg)

I can have that _ inserted between the 1st and the 2nd digit when I enter the 4th one in my Label (e. g. 1_234).

Now, as there is a property font_color under Custom Colors in the Label's Inspector, I wonder if I could color a certain digit in a different color than the others when the condition is met. So for example, with entering the fourth digit, I'd like the first one to change color.

Is it possible to somehow "replace" that _ with font_color to achieve this?

Answer 1

You don't have that level of control over individual character properties in a standard Label control. However, you can do that with a RichTextLabel using the appropriate bbcode .

See here for details.

Comments

Hello and thanks Jgodfrey.

I am switching back and forth between Label, RichTextLabel and TextEdit these days, testing them out and almost settled on RichTextLabel earlier, but for the live of mine I just couldn't get the text right-aligned in any other than the Label. (I'm sure there is a good reason for RichTextLabel not directly offering alignment buried somewhere deep inside Godot... ; )

In the end, yes, I believe I need to use the vast possibilities of BBCode and I'm sure there is a way to right-align text with it as well. I just couldn't find anything in that regard yet. Please let me know if you have any hint, I'd very much appreciate!

---

You can certainly right-align text in a RichTextLabel. Just wrap the text with the right tag, like this:

$RichTextLabel.bbcode_enabled = true
$RichTextLabel.bbcode_text = "[right]right aligned text[/right]"

---

But doesn't this only work with known text? How could I tell the RichTextLabel to generally right-align without knowing which or how many numbers the user will enter?

---

It's hard for me to provide much more detail without knowing more about what you're doing exactly. But, since RichTextLabel doesn't allow direct input, you must be gathering input via some other mechanism and then "inserting" that text into the RichTextLabel. So, you can do whatever you want to the text prior to inserting it. That could include wrapping it in right tags if that's what you need...

---

What I'm working on is a number-pad made from buttons (0-9, comma and erase), and each of them adds it's value to the (now RichText)Label like for example button 6:

if event.is_action_released("mousebuttonclick"):
   get_node(the_one_label).text += "6"

I set everything up in a way so a maximum of 4 digits can be entered before and 2 after the comma and it all works well in its rudimentary setup.
However, there are some visual tweaks I'm trying to add in order to improve the appearance of it all, like having the comma blink when the button is clicked again after the comma is already set, or like having the after-comma digits displayed a bit smaller (and higher) than those before the comma. I'm also trying to have the spacing between the 1st and the 2nd digit increase a bit when a 4th number is being entered... things like that.

I guess I reached the point where the desired text is being inserted into the RichTextLabel as I want it to be through my buttons. So now, just as you imply, doing all these things to the text prior to inserting it is what I'm trying to figure out. I started with the extra space emerging between the first to digits and had it working the way as mentioned above, but I'm sure bbcoding is the better way to approach this. Once understanding a "blueprint" of how to to this, I'm sure all these many bbcode-tweaks can be applied equally, but this how is what I'm struggling with.

---

What exactly are you putting in your RichTextLabel? I know you've mentioned some rules about digits before and after a comma, but it's not clear to me what the end-game is.

Before attempting to offer advice, I need a good description of exactly what the end result should be...

---

The outlines are rather simple: there's a one-line textfield the user clicks on so a number-pad pops up. The digits 0 to 9, a comma and erase are available - all their own buttons, so numbers can be entered and corrections can be made. (A cancel and a confirm button are there as well to close the popup - either dismissing or keeping the entered value.)

4 digits before the comma and 2 after are the possible maximum (9999,99) while the minumum is actually an empty field. (This all works. For example, I was able to enable/disable the according buttons accordingly, so if the user enters 4 digits, the number-buttons turn disabled until comma or erase is hit...)

What I'm trying to add now is cosmetic features to support readability, usability (and plain style), mainly:
- A little distance to appear between the 1st and the 2nd digit in case the maximimum of four is entered, so 9 999 instead of 9999.
- The digits after the comma should appear a bit smaller (33%) and vertically aligned a bit higher. (I'm sorry I fail to be able to upload an example picture in here!)
- To indicate that the comma is already inserted, it should "error-blink" for a moment when the (at that point disabled) comma is cklicked again anyway.

(And just for completion of my ideas for that entry-field: if the user only inserts one number and then clicks confirm, a ",00" will be inserted automatically (auto-completion as well at entering "x," or "x,0") but although it's all connected I think I'll deal with this at a later point...).

I hope this description is helpful! I realise these things are overly ambitious for a beginner, but I can't help but aiming for such visual features.
By the way, I'm really very glad I'm offered so much help on this fine forum : )

---

Yeah, that description is quite helpful. I'm curious, you say that you disable the number buttons after 4 digits are entered (since you want a comma next). Why would you not just disable the comma button once it's entered also, rather than leaving the button available and flashing the existing comma to indicate the input error? It's likely simpler to do and would be a more cohesive design in that buttons that shouldn't be used based on context are all disabled dynamically.

---

Hmmm.. I just realized your original question was asking about changing the color of a single digit, but your latest description doesn't mention the color change at all. Having a complete description of the intended results is important when designing a software solution. That way, everything can be accounted for in the initial design, rather than tacking things on later that don't necessarily fit the design pattern.

Certainly that doesn't imply that you won't miss some things in the initial design, or that you won't have new requirements in the future that will alter the design, but defining everything you know about and expect from a solution prior to writing code is a good practice that'll save you some time in the long run...

Generally speaking, I'd guess you'll want to maintain the raw user-entered string at all times. And, rather than trying incrementally modify the bbcode string based on user-input, you'll want to process the entire raw string each time, inserting all the necessary bbcode elements in it and then putting that in the RichTextLabel. Then, when the user modifies their string, you'd just reprocess the new raw string and insert it directly in the RichTextLabel. That seems easier to me than trying to incrementally keep a constructed bbcode string in-sync with the user-modified string at all times.

---

The comma button is indeed disabled (and darkened) after clicked once, the comma then should blink if clicked again to indicate "hey, there's already a comma!" (often it's the cursor blinking in such cases, but I thought it would be cool (and explicit) to have the comma blinking instead).
In fact, the erase button and the 0 are also darkened/disabled at popup (nothing to erase yet and a 0 doesn't make sense as a first entry. (This applies to an empty field, of course. I did not build the case of an already filled RichTextLabel yet, but the erase button should then be available from the start...)
Disabling the buttons always makes them darkened as well so in these cases the user easily understands there's no need to click a number at the moment anyway. All this, I think, supports intuitive usability and how the whole thing feels.

All your thoughts are, as usual, spot on. I mentioned a color-change in the beginning because I thought it was a rather common thing to start with, which I later, after understanding how it works, can change to basically anything bbcode is offering. But yes, that gap between those digits is the real goal! (And now I'm sorry for that detour...)

It's incredible how many details want to be considered when setting up the concept of such a seemingly little thing like a number-entry-field. I want to believe that I have quite everything covered in the back of my head (and on paper at that) but I'm sure (and sorry) I'm missing things in my descriptions here and there.

I couldn't explain it that way, but (I'm pratically certain that) your latest paragraph nails it as well. Having all the bbcode-"templates" set up in the RichTextLabel-script and then have them refreshed with any buttons-click. (...right?)

---

For the comma button, if it's disabled after a comma is entered, you won't be able to press it again to trigger the mentioned blinking effect...

And, yeah, you understood properly. Each time the user updates the raw string, you'll want to fully process it to include all necessary bbcode and then update the RichTextLabel with that new code...

---

I can print and trigger an animation when clicking the disabled button. I thought it registers input by default even if not reacting?
In my szenario the RichTextLabel sends a signal to my comma-button when a comma is written, setting it disabled = true. In this case then if event.is_action_pressed("mousebuttonclick"): returns before button-release, but the Button does register the click.