Re: [css-text] Characters per line

On Apr 21, 2014, at 12:50 AM, mus@designtoday.co.uk wrote:
> Hello everyone
>
> I was wondering if their was anything in the CSS spec for dealing with
> Characters Per Line. Currently I've made a couple of prototypes using
> JavaScript but this can be a huge performance hit on pages with large
> amounts of text. As CPL is a huge part of read-ability for text and the
> fact we live in a responsive web world maintaining a legible character
> line is almost impossible.
>
> The general rule in typography is the CPL should be between 55-75
> depending on the typeface family and its subsequent fonts. As each font
> has a different character width this can make a huge difference. So the
> idea would be something along the lines like
>
> P {
> cpl: 75;
> }
>
> The effect would be that the paragraph of text would never go beyond this
> amount, dropping to a newline, thus maintaining readability. I thought
> about perhaps a max-cpl or min-cpl but wanted to fire you guys an email
> first to get a feel if this is something that would be reasonable.

I don't think this is quite the mechanism you want for this sort of
thing.  Linebreaks happening in the middle of an element would be
pretty unattractive.  As well, a strict character-based limit doesn't
do the right thing - the idea of the 55-75 character line limit is to
give you an approximate length; a line composed of 75 "i" characters
and one composed of 75 "W" characters are very different, and neither
really match the *intended* length (roughly the width of 75 "a"
characters).

If you want to enforce your line lengths properly, one decent way
would be to declare you container width in 'ch' units.  "p {
max-width: 75ch; }" will do what you need, without the unpredictable
and ugly effects.

~TJ

Received on Monday, 21 April 2014 17:31:38 UTC