CSS allows us to set font sizes using 1 value. If I scale an element with text in it the text will stretch vertically and/or horizontally to match the new scale. I can scale an element vertically (el.style.scale = '1 2') and the font will stretch vertically so the text is very tall. How can I make CSS cause the font to do that without scaling the element? How can I convert scaled fonts to CSS font size properties?
To make the font-stretch vertically without scaling the element itself, you can use the `font-stretch` property in CSS. You can set the value to `ultra-expanded` or a specific percentage value to stretch the font vertically. Here is an example: .element { font-stretch: ultra-expanded; } Code (CSS): To convert scaled fonts to CSS font-size properties, you can calculate the percentage increase or decrease in the font size and use that value to set the `font-size` property in CSS. For example, if you have scaled the font vertically by a factor of 2, you can set the `font-size` property to be twice the original font size. Here is an example: .element { font-size: 2em; /* Set the font size to be 2 times the original font size */ } Code (CSS):
GreenHost: thanks for your response. I was multiplying by scale as you suggested. It didn't work. It turned out that the reason was my html was wrong. It wasn't resizing the children correctly so, it really did work if I'd just get the HTML correct. I never heard of font-stretch. Thanks. It's even quite browser compatible. I'll give that a try.