Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is this formula for approximating the character count per line in a div correct?

Tags:

css

typography

I came across some website that says

In the preceding example, column 1 has a fixed width: it has been set to 400 px wide. With text rendering at 12 px this would result in a measure of approximately 66 characters per line. If your reader increases the text size to 16 px then the measure reduces to 50 characters per line.

The CSS for its column 1 is DIV#col1 { width:400px }

At the moment, I'm not so concerned with some case scenario where the reader increases the text size.

I don't understand where he gets his ratios from, but this formula seems to account for both ratios he gives:

approximate charcount per line = [2 * (div width)] / (font size)

The units in the formula are pixels...

Further down he gives two more examples, and the formula still seems to hold...

Is this formula correct? Why is he giving those ratios?

I would think that someone asked this before, but maybe I have the wrong search terms :)

like image 910
gitparade Avatar asked Jul 13 '12 19:07

gitparade


People also ask

How do I limit the number of characters in a line in HTML?

Limit characters at <input type=”text”>. With the single-line input field, which is represented in HTML by <input type=”text”>, the character limit can be inserted in the same way via the maxlength attribute as with the multiline text field.

How do I limit characters in a line in CSS?

To ensure line lengths don't exceed 80 characters, the CSS max-width property can be set using font-relative lengths of around 70ch or 34em (note that this value will need to be adjusted slightly up or down depending on the font used).

How is character per inch calculated?

4. Calculate the characters per inch of the font size by dividing it into 120. For example, if you selected 11 as the font size, divide 120 by 11 for a result of 10.91 characters per inch.


1 Answers

The examples and the formula and the notes on the cited page all sum up to the simple idea that the width of a character is one half of the font size.

That’s simply a coarse rule of thumb and not very accurate even as an average. The width depends on the font and on the character. The “average width of characters” is a very vague concept. In typography, e.g. in “The Elements of Typographic Style” by Robert Bringhurst, the length of the English lowercase alphabet (a to z) is used as a measure, but it effectively means calculating the average over those letters, as if texts consisted of them only and with each character equally frequent.

In reality, the average width of characters in English prose seems to be closer to 0.4 of the font size rather than 0.5 of it.

In conclusion, if you wish to set the column width to, say, 50 characters, then the following is a reasonable attempt:

width: 20em;
width: 50ch;

Old browsers that do not support the CSS3 unit ch will then use 20em, which corresponds to the 0.4 estimate. You might use a somewhat larger ratio, or considerably larger, if you have checked (measured) that your primary font suggestions refer to fonts where characters are relatively wide. But it’s not exact science. Even the use of the ch unit isn’t exact science, since it simply denotes the width of the digit zero (0), though this could be treated as a reasonable approximation of “average character width”.

like image 191
Jukka K. Korpela Avatar answered Jan 03 '23 06:01

Jukka K. Korpela