0

my question is very different from this question: Font scaling based on width of container In fact this question and answers does not mention the ch unit.

I have a flexible width column. I want the text inside the column to change size depending on the width of the column. I was hoping that font-size: 75ch would size the text so that there is a maximum of 75 characters per line, whatever the width of the column. CSS Tricks shows an example of using the ch unit to size text, https://css-tricks.com/almanac/properties/f/font-size/. But the font size is massive, only two or three characters per line.

width: 75ch works (the width of the column is as wide as 75 0 characters. But using the ch unit on font-size doesn't work as I hoped.

<div class="text-content">
    <p>Nus moluptatur? Quid eum in nosandit, ut voluptae num dit faccumquis qui vollab inctaquam, undis antis et voluptae. Itatenditem qui tem nonecus repedi doluptae pre explautessum is dolupta doluptatum que perunt lant rero te dolestium fugitat emporeiur, ipit est od minim dolesti asitati onsedisci dit magnatecatur se nimini repe est voluptat. Alitatur seruptat. Dercipis nonsequ iandae venim erum que rerionectas ad quate aut undi dis es alit adis dia dio te miligen tinvelis nustis mi, ut militatur atiosam, etur aut eum ut ad qui nonet fugiam facculpa pro molenis et, consenim volorer ercienis endaniste est ut exeria dis voluptam si dolorat. Tationsed maximpellant maximod eiunt undisque imustruntus mintio blant lamet ea volupta tiores ducita qui dolut aut ex ex enitas soluptur? Ebit eium et et exeruntur? At autatisquas siti cone cuptaspedit lamusae sequidi coreperion ea illaut liquaec tusamus, aborepra qui to ellabore vellace atemporemqui ulparchilia nis sit utet is abo. Sa susdaerumquo voluptatibus corro que et laboribus repudipid es is vid maio. Ut doluptate conseniet que volumquia quam excerib erspernamet dolorio. Itaturehenti sum, estiur sinusciliquo bla es enimus autate ex entotas consendio. Ut lit optatibustes vit ute que mo milliciati re, odi dolum re velesto rercitae re elenis exerit omniate et, cuptibusdae quamus.</p>
</div>

.text-content {
    max-width: 700px;
}

p {
font-size: 75ch;
}

See JS Fiddle https://jsfiddle.net/n98oq5Lc/

user2991837
  • 626
  • 1
  • 8
  • 17
  • 1
    I think you want the `vw` format. – 001 Aug 09 '21 at 14:18
  • Yes, `1ch` is the width of the `0` character, which is independent of the width of the element. – Mr Lister Aug 09 '21 at 14:34
  • @ Mr Lister Yes, 1ch is the width of the 0 character. Therefore font-size: 75ch should set the font-size to be whatever is needed for 75 0's to fit on a line? But it doesn't work. width 75ch works, but not font-size – user2991837 Aug 09 '21 at 15:10
  • No, I don't know where you got that idea. If you want the font size to be dynamic, use a bit of JavaScript to calculate what the font size should be, based on the current width of the text and the width of the element. – Mr Lister Aug 11 '21 at 17:29
  • 1ch is the width of the 0 character. Therefore it could be assumed that font-size: 75ch would set the font size so that 75 characters (or 0 characters to be precise) would fit within the width of the element/container. And if the width changes the font height would also change to keep 75 characters on a line. Unfortunately it doesn't work like this, but for better typography on the web, it would be great if it did. – user2991837 Aug 12 '21 at 08:13
  • It's like you didn't read the link you cited https://css-tricks.com/almanac/properties/f/font-size/#the-ch-unit – HackSlash Aug 12 '21 at 16:21
  • The link didn't make a lot of sense to me. I'm not sure why someone would choose to base the font-size (height) on the width of the 0 character. I was hoping this was a mistake! – user2991837 Aug 13 '21 at 09:04

0 Answers0