Why is my font size limit 7?

Dashboard
1

Goodday,

I have a small display so I want to blow the text up.
However, it seems that < font size=7> {{msg.payload}} is the max?

I'm using a pi zero w with a 800x640 display and node red V1.2.6

[{"id":"e0718196.8a6b","type":"ui_text","z":"96135b2b.aa4598","group":"800524ec.9ddd98","order":1,"width":"20","height":"6","name":"Klok","label":"","format":"<font size={{msg.font}}>{{msg.klok}}","layout":"row-center","x":610,"y":440,"wires":[]},{"id":"800524ec.9ddd98","type":"ui_group","name":"Klok Digitaal","tab":"f5d1aa9c.a4fc68","order":1,"disp":false,"width":"20","collapse":false},{"id":"f5d1aa9c.a4fc68","type":"ui_tab","name":"Scherm1","icon":"Wekker","disabled":false,"hidden":true}]
2

Hi @Nice_to_have

Few things...

  1. Users cannot import your code as you have not wrapped it with backticks
    ```
    code should be wrapped like this to maintain readability and importability
    ```
  2. You have entered image.
    When <font size={{msg.font}}>{{msg.klok}} is sent values will end up like this <font size=7>hello << that is an incomplete HTML TAG and the size must be surrounded with quotes. Have a look at the example here
  3. font is depreciated - you would be better off using a span tag with style set (e.g. "font-size:7px") See examples
3

Hi @Steve-Mcl,

Thanks for your reply, I will try your suggestion of span.

But I am trying to figure out why I can't go bigger then 7.
I first tried it by setting the value my self, like image
And I can manually change it from 5 to 6 to 7 and that works, but from 8 and up it doesn't increase in size.
7 seems to be the maximum size limit.

4

Re-read my reply.

  • Font is deprecated
  • You didn't close the tag
  • You didn't surround the size value with quotes.

What was unclear about that?

Try the span, if it doesn't work, use browser Dev tools to inspect the item. You may need an !important specifier added to the font-size attribute.

5

Besides from being deprecated, the font tag only supports size values from 1 to 7. See here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/font

I'd go with Steve's solution using the style attribute, that's far more flexible.

1 Like
6

You both forget that angular strips off the style attribute of elements and the font tag is quick and easy way to workaround that.

7

Forgot? I didn't know haha. What's the better solution then Nick - CSS class?

8

Yes, forgot. Here's where I last told you about it: Simple show awesome icon on screen - #5 by knolleary

:wink:

9

Ah that's not fair, over 1 year ago and never I've used it :innocent:. I'm going with never knew it :wink:

10

"Ignorantia juris non excusat" :wink:

2 Likes
11

paenitet, ego non intellego?

12

It is probably simpler to just use a ui_template - then you would have more control of the internal parts - eg set a ui_template to

<font style="font-size:{{msg.font}}em">{{msg.payload}}</font>

13

This is an easy solution, thank you

14

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.