How to vary font size based on device sizes and resolution?

[shas...@urbandrive.in]

Hi Folks,

Here is my requirement:

I need to display a verbose text inside a list element on the main page of my app for which I am using a TextArea. Now my list is rendered using a renderer defined in the GUI and Text Area is part of the renderer. The font size of this text displayed inside the text area has to vary based on the device size so that on larger devices the font is large and on smaller devices it is small.

For example I want 

small font size for device height < 500

medium font size for device height > 500 & height < 2000

large font size for device height > 2000

Things that I tried to accomplish this

1. Have a hard coded renderer which defines the font size programmatically. This soln works but gets complicated as my main list size increases and also there is complex code to be executed on clicking the list item.

2. Stick to the GUI based renderer and try to access the TextArea inside the code and dynamically change its font size.  This soln didnt work for me because  I wasn't able to access 

the TextArea defined in the GUI renderer inside my code. I tried to access the same inside the beforeShow, onCreate functions of the renderer but it is always null. 

3. Set the font size for the "ContentPane" UUID at the global level so that any component that used the "ContentPane" UUID will have its font size set dynamically.  Not sure how this can be done. 

Please  guide me on how to proceed here. Also,  it might be a dumb question, but I am not sure what is the relationship between say font size for a particular theme and the device size and resolution. How does one reconcile the two to have a consistent viewing experience across devices.

Thanks,

Shashank

[Chen Fishbein]

Hi,

In your theme you can set the Font for each style id, define your own uuid "MyText" and edit the font.

You can use system fonts which has 3 generic sizes small, normal and large, it will automatically scales the size according to the device DPI.

You can also use TTF and define the size with millimeters, which will keep the size proportional according to the device DPI.

[fleet....@gmail.com]

TTF drop down is empty , how to choose TTF . need to change font size even after setting to system font large it is still small. pls advise thanks.

[Shai Almog]

Place the ttf in the src directory. Make sure its named .ttf lower case.
Use millimeter sizing

[Benjamin Tumwesigye]

How about me who uses CSS, Is it possible to achieve it.

Please I would like to get help about it

[Shai Almog]

Search for the word TTF here: https://www.codenameone.com/manual/css.html

[Dave Dyer]

A few other words - devices tend to lie about their specs, and even if the specs are accurate, there's

no real standardization for what font sizes are appropriate for a given resolution, and users of

a particular age.  So be prepared to adapt.  I finally added a "font size" option to my apps,

so users can change to what they like.  

Given that fonts have to be scaled, the user interface has to all be scaled around the fonts.

Don't be like windows and change the font size without changing the user interface to

fit them!  (Did you ever try setting a windows machine to EXTRA LARGE fonts, then use it

that way?)