Using hyphenation and justification on the web

http://www.alistapart.com/articles/the-look-that-says-book/

by duck • 16 years ago

44 31 16 years ago

scott_s5• 16 years ago

This is the sort of thing that belongs in the browser itself, not specified in the HTML for each page. We should be able to write text in HTML as ASCII, and if the HTML says "justify this text," the browser should know the hyphenation points for all of the words. It should be the responsibility of the rendering engine, not the content.

powrtoch• 16 years ago

I don't know if hyphenation should be automatically on just because justify is, but a separate CSS property, or a hyphenate option on the "word-wrap" property, would certainly be a more elegant solution than all of these scripts.

scott_s5• 16 years ago

Justification implies hyphenation elsewhere. Personally, I think justified text is fugly without it.

binomial• 16 years ago

TeX justification really needs to be ported to browsers. Are those hyphenation algorithms really that hard to implement?

fortes3• 16 years ago

No, the challenge here is typically with having a high-quality hyphenation dictionary.

sz• 16 years ago

> TeX really needs to be ported to browsers

FTFY

Seriously though, browsers need better typography in general. http://nitens.org/taraborelli/latex

celoyd• 16 years ago

Are those hyphenation algorithms really that hard to implement?

Yes: see (for example) http://en.wikipedia.org/wiki/Hz-program .

A really good H&J algorithm is doing a significant amount of work. It has to think about things like successive hyphens (which get distracting quickly), rivers (the unpleasant vertical lines of whitespace that appear especially in over-spaced text), and so on. This involves lots of backtracking and image processing, and it fires every time the layout changes. It’s all possible to do in a browser someday, but it’s not trivial.

Semiapies3• 16 years ago

I'm not crazy about hyphenated, justified text in the first place. It may look pretty, but I get briefly jolted out of the flow of the text at every truncated word.

Maybe it's a relic of printing processes that can be left behind.

scott_s5• 16 years ago

I never notice it when reading books. You do?

Semiapies3• 16 years ago

More so in newspapers and magazines than books, but those, too.

nuclear_eclipse• 16 years ago

I'm much more a fan of using justified text with a minimal amount of hyphenation and word-splitting used only for really long words to prevent jarringly large spaces between words. Justification in general looks and reads fantastically well, but I agree that a lot of hyphenation and word-splitting makes it worse in both cases than a ragged right edge.

dkarl• 16 years ago

A good typesetting program like TeX minimizes the occurrence of broken words. The sample page the article linked to (http://readableweb.com/ala/booklook/lanhamvolatilehard.htm) looks pretty awful to me, way too many hyphens. You don't see that many broken words in professionally typeset text.

zzo38• 16 years ago

TeX is a very good typesetting program.

barrkel• 16 years ago

One of the most irritating things about the Kindle, apart from the overpriced books and lack of second-hand sales (which would apply some pricing pressure), is its lack of hyphenation.

The text looks absolutely hideous at large font sizes. I almost think it would be better non-justified.

I don't get jolted out of the flow of text with good hyphenation. It's more distracting to me to see irregular spacing in the line. The extra spaces when the justification is working very hard feels slower-paced, and the dense lines feel higher-paced, giving this weird rhythm, something like: "sooo tthheee mmmaaannn walkedacrossthe roooaaad".

jipumarino• 16 years ago

I seem to remember that justification makes it harder to read much in the way all caps do. Ragged edges supposedly helps you stay in the right line when reading. Does anyone have any info on this?

jerf• 16 years ago

It is a "well-known fact" on the internet, based on my searching, but I couldn't find a definitive source on the matter, even though I'd swear I've seen one. (Perhaps I too am simply remembering the "well-known fact".) I even found several people asking for the definitive source and coming up empty.

The best justification (no pun intended) for using "ragged text" I found was under the heading "Text Alignment" on http://community.infragistics.com/ux/articles/text-treatment... .

It is also my opinion that full justification may make the text block as a whole prettier but makes the text significantly harder to read. However, soft hypens and zero-width spaces still have a role to play on the web even so because justified and ragged-right text both have problems with very, very long words, and on the internet multi-hundred character words actually show up with some frequency, mostly as URLs.

stan_rogers• 16 years ago

I've heard the "line identification hypothesis" mentioned a few times in regards to preferring ragged-right, but I'm pretty sure that's just a guess. It seems readers do find fully-justified text harder to read on the web sometimes, but I'd be willing to bet that it has a lot more to do with column width, leading and word/letter spacing. (Without appropriate hyphenation, word spacing can vary greatly in justified text, especially when lines are short-ish and words are long-ish.) I've found that a good screen-purposed serif typeface set with extra leading (1.2 em seems to be about right) and a line length of 35-40 ems works very well as justified text for "publications". Decent automated hyphenation ought to make things a lot better.

grk• 16 years ago

I think the deal breaker here is that search only works on FF.

ancymon• 16 years ago

There are also opinions that text justifying is a "crime".

Some (http://line25.com/articles/10-usability-crimes-you-really-sh...) say that justified text is hard to read for Dyslexic users.

Others (http://www.v7n.com/forums/web-usability/42975-justify-not-ju...) claim that ragged right side can help "keeping place" in the text. (but why then the books are justified?)

Anyway because of that and because it is troublesome to implement justification correctly I think adding those soft-hyphens isn't worth a trouble.

ugh3• 16 years ago

It’s not so bad if you use hyphenation appropriately. Which, as the submission explains, is sort of doable on the web but has serious downsides.

What you would really want is a fancy justification algorithm like the one InDesign uses (it takes into account not just the current line but the whole paragraph and it avoids, among other things, white rivers in the text) with lots of knobs to turn.

That’s currently just not possible on the web which is why justification is often not such a good idea even if you can find workarounds. But it’s certainly no crime. (All books, newspapers and magazines do it.)

shawndumas• 16 years ago

"TypeSet[1] is an implementation of the Knuth and Plass line breaking algorithm using JavaScript and the HTML5 canvas element. The goal of this implementation is to optimally set justified text in the new HTML5 canvas element, and ultimately provide a library for various line breaking algorithms in JavaScript."

[1] http://www.bramstein.com/projects/typeset/

Using hyphenation and justification on the web

Related Stories