
Balancing text for better readability - dave1010uk
http://blogs.adobe.com/webplatform/2013/01/30/balancing-text-for-better-readability/
======
mcargian
I think it's odd that a post about readability has grey text (#686868) on a
white background. Next to the black screen grabs the text is very light.

~~~
FooBarWidget
Which device are you using and with what light settings? I've received one
report from a user saying that the text on my site is "unreadable" due to the
contrast but nobody inside my organization can see what the problem is, so I'm
interested in how other people are experiencing such problems.

~~~
3pt14159
Ubuntu Chrome & Firefox On MacbookAir screen: horrible on dell side monitor:
amazing.

~~~
edanm
I'm on a MacbookAir(OSX) running Chrome, looks fine to me.

~~~
cowsaysoink
That's because you have OSX font rendering, here is what it looks like on
ubuntu: <http://i.imgur.com/YysUNuX.png>

I'd hate to see what it looks like on windows (especially chrome which makes
fonts even thinner).

~~~
joshuacc
Chrome on Win 7: <http://screencast.com/t/S6OTjtWpKI>

------
dpcx
Why not just use the Knuth-Plass algorithm as implemented in
<http://www.bramstein.com/projects/typeset/>?

~~~
slurgfest
None of Knuth's extensive work on typography seems to be well respected among
designers (I'd love to be proven wrong about that).

~~~
taeric
Not respected, or not known?

Edit: I'm seriously asking here, if anyone knows.

~~~
bramstein
As mentioned above, Knuth's algorithms are implemented in many professional
typesetting and layout applications. I think the people implementing those
applications have great respect for Knuth (and Plass.)

My impression is that the users of those programs are unfamiliar with the
algorithms used, so I think it is the latter.

~~~
taeric
Awesome, thanks! I foolishly forgot to see if there were siblings to my post.
(I try and keep a handle on discussions I'm in with the "threads" link.) So,
yeah, apologies for missing those posts.

------
pjungwir
For subtitles and ledes, or really anything larger than the main body text, I
actually prefer the <br/> solution. It's important not only to break in a
pleasing shape, but also to break at grammatically-sensible points. So it's
better to say:

    
    
        Take the blue car
        to the shop
    

vs

    
    
        Take the blue
        car to the shop
    

or

    
    
        Take the blue car to
        the shop

~~~
pjungwir
These latter two examples are worse because the first splits up the subject
and the latter splits up the prepositional phrase.

~~~
dfc
That was his/her point.

~~~
Skoofoo
Both comments were written by the same person.

------
psadri
This is a very legitimate addition to CSS. I bet we will see it in a future
release. It makes a lot of sense for headings. I hope it will not get abused
for other text blocks (but I am sure it will).

------
wnoise
For plain text, see "par", a much nicer version of "fmt".

<http://www.nicemice.net/par/>

------
fudged71
Chrome still doesn't support CSS3 hyphenation. I wish they would, because it
has a huge impact in web typography. <http://caniuse.com/css-hyphens>

~~~
bramstein
I agree, hyphenation is crucial to proper line breaking. If you don't mind a
JavaScript solution you can have a look at:

* <http://code.google.com/p/hyphenator/> * <https://github.com/bramstein/hypher/>

~~~
fudged71
Yeah, I've looked into this in the past. In fact, it was exactly a year ago
that I tweeted that Chrome doesn't support hyphenation. Had to double check
today to see if it were still true.

In fact, it seems even more important now that they have Chrome on tablets and
phones (this was announced one year ago as well, incidentally).

------
decklin
I long for something that would just wrap all big paragaphs of text at 70-ish
characters without hacking at element widths (I've tried user stylesheets,
scripts... nothing satisfactory). If this were implemented, I imagine it would
be easier to do that.

(For example, the first line of the first paragraph of the post renders as 134
characters on my screen. Maybe I am just old, but I find this hard to read.)

~~~
bjxrn
What was wrong with setting a max-width to (for instance) 70ex for p elements?

------
fernly
The Knuth optimal balancing algorithm is implemented in C in the Gnu Core
Utilities program "fmt" -- see <http://www.gnu.org/software/coreutils/> \--
and is plenty fast enough for a browser to render text.

------
dylangs1030
Yes, the website is ironically displaying text in an inconvenient way for a
bunch of users.

But as for the content itself: why not just use left align justify? I
understand that justify _asymmetrically_ inserts spacing to apply a balanced
center throughout, but is this _really_ an issue? In what context are users so
hypersensitive to readability issues that they need the justify spacing to not
only balance the entire text but evenly balance each space within the text in
reference to one another?

Pardon me for not finding this significant. I just think it's a bit anal when
we have a solution already.

~~~
thristian
The linked article isn't about balancing individual word spaces within
justified text, it's about re-wrapping the lines so that the last line isn't
markedly shorter than the others, even in the face of changing viewport and
font sizes.

~~~
dylangs1030
Okay. Thanks for clarifying!

------
lnanek2
Ugh, I really hate newspapers and the like that stretch out words and letters
randomly just to have it make a perfect block. Random spacing to meet your
criteria of prettiness does not improve readability. This person centers too
much is his problem, I think. Just left align, read down the page with every
line starting in the same spot, stop when done. Yay. Most web readers don't
even read every word anyway, they skim, and you are producing something anti-
skimmable by not keeping a nice solid left line where all the text starts
wherever possible.

~~~
arrrg
Holy ignorance about layout.

Balancing headlines and the like is complete standard everywhere. Abusing
letter spacing has nothing whatsoever to do with it and is generally frowned
upon. If you see that someone made a mistake.

You are clueless.

------
sc0rb
Wow. Grey text on a white background. This is really annoying to read on a
matte screen.

A little ironic given the subject matter?

------
milliams
The simplest solution to a similar problem (a single hanging word in a
headline) that I've seen is to replace the 'space' between the last two works
with an &nbsp; This forces the last two words to stay together as a unit. It
can be automated with a simple piece of ECMAScript.

~~~
ygra
It's not the single word alone in a line. It's a final line that significantly
shorter than all the others. You want to strive for text that's mostly
██-shaped, not ▐▀-shaped. Replacing the last space by a non-breaking one just
shifts the problem around a bit (and you still have occurrences like “I am” at
the end of a sentence – it's not like the final word is always something nice
and long like “sightseeing”).

------
antirez
Any list of quality web typography resources accessible for programmers?
Thanks

~~~
bramstein
My colleague Tim Brown maintains a website containing links to all sorts of
web typography resources: <http://nicewebtype.com/>

~~~
antirez
Thanks!

------
spennino
Wouldn't it be easier and give you more editing control to just put text in a
<pre> element? Seems like it would be hard to algorithmically determine what
will visually look good

~~~
arrrg
InDesign already does this (as does quite a number of other software) and it
works remarkably well. There is rarely a situation in which manual adjustment
improves the typesetting and the automatic solution i definitely always good
enough.

A manual solution is possible but not very practical, as was also mentioned in
the article. Especially when the web design is responsive, such manual
adjustments are problematic. But HTML is (luckily) also very flexible and
neither font size nor the font are guaranteed to be constant, making a manual
solution break horribly in e worst case.

CSS desperately needs feature parity with something like InDesign when it
comes to typesetting. Adding stuff like this is obvious, something those
working with layout programs had at their disposal for a long time.

~~~
maerek
I do agree that typesetting in CSS is a bit lacking. We haven't really had any
significant changes in this area since CSS 1.0 came out (with word-spacing and
text-spacing). @font-face is great, but it's more about specifying the font to
use instead of specifying the type layout.

It's also nice to see some constructive issues already being raised on the
project. Whether or not the current implementation is perfect, it'd be really
neat to have this _type_ of functionality implemented in a CSS spec.

------
muglug
Lovely idea. One might also consider the special case of two centered lines,
where many have an aesthetic desire for the first to be longer than the
second.

------
sses
It's a good idea, but it needs to be fleshed out more for
internationalization. Even for the given case, English, what exactly
constitutes a word?

~~~
ytpete
Doesn't that already have to be determined by the browser anyway, for normal
word wrapping?

