W3C home > Mailing lists > Public > www-style@w3.org > April 2014

Re: [css-text] Characters per line

From: Tab Atkins Jr. <jackalmage@gmail.com>
Date: Mon, 21 Apr 2014 10:30:52 -0700
Message-ID: <CAAWBYDBXOaM0pU8M_8vX8Ef_kH_fbab_h8=amFYef-=2RL2tkA@mail.gmail.com>
To: Koji Ishii <kojiishi@gluesoft.co.jp>
Cc: "mus@designtoday.co.uk" <mus@designtoday.co.uk>, "CSS WWW Style (www-style@w3.org)" <www-style@w3.org>
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"

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.

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

This archive was generated by hypermail 2.4.0 : Monday, 23 January 2023 02:14:39 UTC