How to handle Font Scaling

[shukerullah]

Its not issue I am just asking for advice!

I have attached the screenshot, where you can see I have achieved responsive design, thank you. But problem that I am facing is with Text/Font. How you handle font scaling?

[idibidiart]

I can add a TextColumn component that you can put text directly into and style as you would the built-in Text component except that it will take props for fontSize, like: smFontSize={12}, mdFontSize={14}, lgFontSize={16} and xlFontSize={18} that correspond to different screen sizes. I'm not sure that's a really well thought out idea but let's think about it...

What do you think? @shukerullah

[shukerullah]

I want my view (Images, Texts, ...) to look the same on different (Android & iOS) screen sizes. With help of scaling utils, I am scaling fonts to achieve same look on different screens.

As far as TextColumn component is concerned. I think thats good idea to have different font sizes
but lets wait for someone else views on this issue.

[idibidiart]

I see problems with the advice given on S.O.

" use verticalScale on stuff like containers heights." <-- the right way per CSS is to use paddingTop/Bottom as percentage which becomes a percentage of the width. This way the height remains proportional to the width.

As for font, I have a problem with font size being too small on smaller sized devices (not legible) and then growing in size with larger device sizes. Font should simply be legible on all sizes, not unnecessarily bigger or smaller than the comfortable, legible size. But for stylistic purpose, I realize we sometimes need the font to grow and shrink, and the best way may be to auto-detect that child is Text or TextInput and if that's the case then apply one of: smFontSize={n}, mdFontSize={n}, lgFontSize={n} and xlFontSize={n}, where n is the font size value...

Keeping it open as you suggested.

[idibidiart]

Still thinking about this...

[idibidiart]

Will close this as I actually have no answer and no one else seems to have any interest. When I do, I will announce it, and add to Readme.

[borgand]

To add my two cents, considering the component size is stepped by breakpoints, not continuous, there should not be a need for font size to be continuous. What I mean is that when going from landscape to portrait the component width shrinks from 100 to 80, there is no need for intermediate font sizes, just two - one for larger and one for smaller component.

So the smFontSize etc should work well enough.

Only remark - I would not like to set them always on all of my text components. I'd like some way to inherit them and perhaps even make them % as in CSS - way up in the layout tree, I'd set base font size and perhaps lgFontSize="120%" etc. And when I want some specific text to look smaller/bigger, I could override that, but not every text component.