Jump to content

Setting Label Cursor

Recommended Posts

I wanted a simple hyperlink. So I used a TW3Label, gave it caption, set the underline, gave it an OnClick event, etc.

First, I discovered that setting the label's Font.Style to [fsUnderline] didn't work. Instead, I had to dig in the forums and learn to use TextNode.style. What's the point of the Font.Style property if it's not going to set the font style?

Second: How do I set the mouse cursor? The "Cursor" property doesn't seem to be doing it.

This is what I have:

  FForgotPassword := TW3Label.Create(Self);
  FForgotPassword.AutoSize := True;
  FForgotPassword.AlignText := taCenter;
  FForgotPassword.Transparent := False;
  FForgotPassword.Font.Color := clRed;
  FForgotPassword.Caption := 'Forgot Password?';
  FForgotPassword.OnClick := ForgotPasswordClicked;
  FForgotPassword.TextNode.style.setProperty('text-decoration', 'underline');
  FForgotPassword.Cursor := crPointer;

On a whim, I just added this:

  FForgotPassword.TextNode.style.setProperty('cursor', 'pointer');

And that solves my problem.

But now I want to know: Is there a reason those other properties exist? Is this a bug? Or am I missing something?



Link to post
Share on other sites
  • 2 weeks later...

Ah yes this is a classic one.

When we made the label control the whole font thing came up and bit us in the bottom. Because Delphi fonts and HTML fonts are very different.
You have the "normal" font stuff, but you also have something called CSS fonts, which a lot of people uses.
So to avoid killing the option for smart users using css-fonts (and glyphs) in their labels, I isolated the underline/bold etc as a function you call with the caption.

If you look in the font class, all the way back to TW3CustomFont (unit System.Fonts), you find this function:


function StyleText(const Text: string): string; virtual;

What you do is the following:

  • Set the font styles you need
  • Assign the caption via the function above, like this:
Label.Caption := StyleText("This is styled text");

I think its time we get rid of this and instead go for "normal" delphi styling. It will require a bit more scaffolding for CSS glyphs and fonts, but at least people can set styles as they are used to.

As for the cursor, this is a bug. The label contains sub-constructs that somehow "hide" the underlying element where the cursor is set.
So we just need to tell these constructs to inherit whatever cursor the parent has, and it will be gone.

So Ill try to get this done in our next update

Link to post
Share on other sites
  • 1 month later...
  • Administrators
On 9/18/2018 at 5:41 PM, DavidRM said:

Second: How do I set the mouse cursor? The "Cursor" property doesn't seem to be doing it.

Yeah, I had a look and the cursors are not done in a sensible way in the RTL at the moment.

Background: TW3Label consists of the control itself (let's call it background) and an inner div, which contains the text itself. This is to be able to align the text horizontally and vertically.

Currently the style sheet sets the cursor value as "default" for every div. So, when the background cursor is changed, the inner div in the label still has it's cursor as default, which is the arrow. It's not only here, but basically with any component that has inner sub controls etc.

IMHO we need to remove the default cursor value from the style sheet or set it as "inherit". At that point the inner div gets the same cursor as it's parent.

But this also involves going through all the other styles and making sure that they have sensible cursor values in the style sheet. Some styles need to have "default" and some "inherit" and maybe some "auto". And after that we need to make sure that more complex controls actually set the cursor of their sub controls properly.

So it will take some work, but I'm going to experiment and find the solution what works best.

Edit: Cursor issues are now fixed and will be in the next update.

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...