0

I know how to change font size using CSS, and I know how to scale text inside a canvas, but is it possible to scale text outside of a canvas using CSS/JS?

My problem right now is that I want dynamic objects on a page to resize along with the page, but when there is text on those objects, it fails to resize correctly, since fonts only have sizes in full pixel amounts and not fractions I get "jitter" or "jumps" while the user is resizing. Using percent amounts on the fonts doesn't change the fact that there's no such thing as a "16.5" size font, a 30 character text will jump by at least 30 pixels per increment.

This also causes an issue with word wrapping giving inconsistent results between resizes, one word per line might decide to jump randomly to the next line or not based on the size:font relation and this snowballs for the entire paragraph.

Basically I want to get the same visual effect on every x,y window size without having to store all texts as images, and without creating a canvas for every single text that I use which sounds kind of ridiculous. Is this possible?

Aqo
  • 343
  • 4
  • 16
  • You could try sizing using EMs. I do know some browsers allow sub-pixel sizing using EMs. – evolutionxbox Jun 06 '16 at 08:16
  • I need this to work on all browsers (except for old IE versions...), including mobile versions. – Aqo Jun 06 '16 at 08:40
  • Do you need to worry about these "jumps" when the user resizes? What kind of user resizes a window when browsing a site (except QA testers)? – evolutionxbox Jun 06 '16 at 09:52
  • I'm more worried about word wrap issues across different resolutions, things like titles that are supposed to be 2 lines suddenly becoming 3 lines on smaller resolutions and covering a paragraph below – Aqo Jun 06 '16 at 10:01
  • Honestly, I think you're trying to have granular control over something which cannot be controlled to such a degree, especially across all browsers. Check out [this related question](http://stackoverflow.com/questions/5655697/web-kit-and-sub-pixel-values-workaround). – evolutionxbox Jun 06 '16 at 10:06
  • guess the answer to my question is 'no' then. Thanks for the link. – Aqo Jun 06 '16 at 10:17
  • I'm sorry. I think it might be. Please do post an answer to this question if you find anything else. – evolutionxbox Jun 06 '16 at 10:19

1 Answers1

0

I believe your best bet for controlling typography to this degree is going to be with the vh, vw, and vmin & vmax CSS properties: These allow you to scale text based on the viewport height, width, and the smaller & larger of the two, respectively.

I personally find these work well at medium-to-larger size resolutions, but begin to breakdown at narrower viewport sizes, where it may be wiser to forgo this level of control. See Viewport Sized Typography on CSS-Tricks for usage and more information.

ian m
  • 504
  • 3
  • 7