Yoknapatawpha Crossing

Hyphenation and justification on the web

with one comment

There were a couple of recent (reckoned in academic time) articles on best practices for web typography which seem, to me, to miss an important point. And so here we are, as I fulfill the ancient role of Offended Nerd responding to Someone Who Is Wrong on the Internet.

This article deals specifically with two questions regarding hyphenation and justification on the web:

  1. Can you?
  2. Should you?

The Web Typography Gurus have answers to these questions: Yes! and, Of course! But these reflect a simplistic and biased view of the situation. The answers should be: Only with serious tradeoffs, and, Maybe.

Background

Here is the part where I try to provide a common ground for discussion. If you already know anything about typography, you should skip to the next section. The only points I make here that I haven’t seen emphasized elsewhere are

  1. The decision to justify text is purely aesthetic and does not confer material benefit to the reader, and
  2. Justification and hyphenation are separate processes which relate and feed back to each other when used together, but are not irretrievably intertwined.

If you look at whatever book you have nearest to hand, it will probably have justified text. That is, if you look at one whole page at a time, without reading the words on the page, you will see that the text fills a rectangle. The left edges of every line are flush, and the right edges of every line are flush. This effect is produced by adjusting the spacing between words in a line, and sometimes even between the individual letters. When a line has lots of characters, the typesetter squashes the spaces a bit, and when there are fewer characters they stretch the spaces out. This squash-and-stretch process is known as justification; text presented in this way is justified. No matter what.

Text does not have to be justified. You have probably been abused by Word at some point in your life, and so you know that there are also buttons for left-align (where everything lines up on the left of the page, but the right edge of the text is ragged), right-align (the opposite), and center. If you were writing in another language, you might top-align, staircase-align, or something else equally un-American and subversive. In Western writing, justification is an extremely common and traditional way to present text. Gutenberg justified his Bible, although the practice of justification predates him (as you may verify for yourself by finding pictures of basically any illuminated manuscript from before Gutenberg’s time).

The decision to justify text is entirely aesthetic and subjective (more below). I imagine many, or even most, book designers choose to justify text based largely on tradition. Even in the absence of tradition, a designer might choose to justify text in a book for very many good aesthetic reasons, one of which is that it introduces some tension into a page of text. Forcing text to fill out a regular large-scale frame creates a nice image on the page, and also necessitates the adjustment of spacing within each line, breaking up what might otherwise be a monotonous repetition of precisely the same spacing word after word.

Justification can lead to absurd adjustments of inter-word spacing, to the extent that the text becomes more difficult to read (and this is an objective and quantifiable effect; again more below). To combat this, typographers also use hyphenation, the practice of breaking one word across two lines. When hyphenation and justification are used together, there is a virtuous feedback between the two things. But it is very important to remember that they are two distinct processes. You can justify without hyphens, and you can hyphenate without justification, and you can use them both at the same time but not together if you want to make something that really looks bad. The best typesetting systems (which includes talented and experienced people as well as certain computer programs) allow these two processes to feed back to each other, so that you may hyphenate a word to achieve better line spacing five lines later, or move a word up on line to avoid a hyphen three lines previously. Donald Knuth, the designer of a typesetting system known as TeX, has written extensively and entertainingly about these issues.

As with justification, the use of a hyphen-like character to fill space did not originate with Gutenberg. Hyphens, fleurons, extended letters, and other decorative devices that helped fill out space were in widespread use by scribes for many years prior to Gutenberg.

The interesting bit

Others suggest that justification is the best, the most professional, or the most readable/legible way to present text. This is not true.

To see that hyphenated-and-justified text is not necessarily “the best,” you only have to ask the person peddling this proposition what being the best means. Then you will hear that being the best means that it’s the best-looking, the most professional, or the most legible way to present text. As for being the best-looking, this may be true in the judgement of some. But this is transparently a subjective claim, and reasonable people have great differences of opinion. Leading us to the next point.

To see that H-and-J is not necessarily the most professional, you only have to look at how professionals choose to present their work. Off the top of my head, I don’t know of any examples of mass-market paperbacks that have been presented using anything other than H-and-J. But I can come up with many examples of books produced by discerning professionals who deeply value the way their words are presented to the world that eschew H-and-J, namely: The Visual Display of Quantitative Information, Graphic Design Referenced, Designing with type. In addition, Grid Systems uses ragged-right for marginal notes; indeed Knuth discusses at some length the futility of trying to set justified text in a narrow block. And, because I know you’ve been waiting for me to bring down the hammer, Robert Bringhurst’s The Elements of Typographic Style (p 27-28) recommends ragged right when using sans-serif or monospaced fonts, or just whenever the situation demands it.

Boom! We are done. There is no retaliation in the face of Bringhurst.

The point is that although you may hear that hyphenated-and-justified text is what the professionals always use, the claim is belied by what you see when you watch the professionals at work.

As for the third claim, that H-and-J makes for the most readable or legible text by some sort of empirical measure, this is also not necessarily true, and to see this you only have to acquaint yourself with some facts. Specifically, Zachrisson finds no appreciable difference in the reading speed or comprehension of subjects when given ragged-right (evenly-spaced) versus hyphenated-and-justified text. In fact, their experiments showed that the least-proficient readers had an easier time with ragged-right text, and he refers to a master’s thesis by S.P. Powers which found that subjects read ragged-right text faster that H-and-J text. Granted, I am quoting results here from just one book; although I had trouble tracking down other sources of specific information on web, I imagine that a lot more research has been done in this field, that the questions involved are very complicated, etc. But the fact remains: a blanket statement like “hyphenated-and-justified text is more legible” is unconvincing without strong empirical evidence.

So what’s the answer to the aesthetic question, “Should I hyphenate and justify text?” The web typography gurus I’ve been reading want you to believe the answer is “Yes, always yes,” and I’ve endeavored to convince you otherwise, that the answer is “Maybe. Different situations demand different solutions.” The facts of the matter indicate that this decision is purely subjective, that neither style of typesetting is better or worse than the other in any sort of measurable way. And that’s the end of the important part of this article.

Specific comments

But I’m still talking! Subservient to the aesthetic question comes the technical question, “Is it possible for me to hyphenate and justify text in the medium I’m using?” And, in this magical future, if you are publishing on the web the answer is now yes. But the solutions aren’t (yet) worth the price you pay.

Specifically, you can tell a web browser to justify just by flipping a CSS switch, and Fink points out the Hyphenator.js library as a solution for getting good hyphenation. “Good” apparently means “hyphenation the same way that TeX does it,” and that is an unfortunately misleading way of framing the whole issue, because, as I pointed out at the beginning, hyphenation and justification are two different things, and Hyphenator.js tackles only one side of the equation. Giving a web browser five hundred million additional potential line breaks does no good if the browser doesn’t use the options it had in the first place intelligently, and that is where the problem lies. Web browsers today generally do not have good justification algorithms; at the time of this writing it was very easy to see this by going to the Hyphenator.js example page and just checking it out for yourself in Firefox, Safari, Chrome, etc. They all did sort of funny things with the word spacings; some browsers didn’t even space words evenly across the line. Without a good justification engine, it doesn’t matter how many potential line breaks you provide to a web browser; it will still produce unappealing text.

The way to address this issue is not with better hyphenation libraries; it’s with better justification algorithms. And in fact, there is already an implementation of the TeX line-breaking algorithm in JavaScript, and an example of this algorithm used in combination with Hyphenator.js. It’s clear immediately that this produces very nice results, but this program works by using the HTML5 canvas element to precisely position and draw each word, which means that copy/paste from any page rendered with Typeset is broken, and that more generally this approach Breaks the Web. The fact that Hyphenator.js and Typeset exist is great, and they’re certainly important steps in bringing better justified text to the web. But using them involves serious tradeoffs: copy/paste, text search, and a meaningful DOM are, you know, sort of important.

Eventually these issues will pass. One day web browsers will provide industry-leading H-and-J algorithms, high-quality mathematical typesetting, and ponies. But it hasn’t happened yet, and you should not make your users suffer now in anticipation of the future.

Finally, let me close by saying that referencing Wikipedia as a primary source will only lead to embarrassment.

References

Postscript

This whole topic is … ramified. Although I’ve tried to give a balanced argument based on the facts as I understand them, I’ve also turned up a whole lot of other material that I haven’t even had time to go through yet. In case you’re interested, here’s the list so far:

Written by Daniel Grady

March 27, 2011 at 16:32

Posted in Uncategorized

Chicago Does Not Understand Technology

leave a comment »

Or maybe I don’t. Either way, there are many things that happen in Chicago that are cool, like the outdoor film festival and Summer Dance. The city has lots of information about these things on various webpages, but there doesn’t seem to be any way to subscribe to these events so that they show up automatically on my calendar. Since I only do things if my calendar tells me too, this makes it difficult to enjoy these events. So I made public calendars for both of these things. They are here:

Chicago Outdoor Film Festival 2009

Summer Dance 2009

Thanks be to Google for providing free technology.

Written by Daniel Grady

July 26, 2009 at 12:09

Posted in Activism

Age

leave a comment »

Before there were interstates, Kingston Pike was not a heavily trafficked road. Nonetheless, it is a well-known fact that the pike was a favorite choice of bootleggers running moonshine through Tennessee, so clearly, the road has always gone from here to there, even though the route, once upon a time, wasn’t anywhere in particular. Nowadays, Kingston Pike is one of the major roads through Knoxville, TN, because once interstates were invented, Knoxville was made a crossroads: history imploded, traffic exploded, and stores chased cars.

When I was growing up, there was frequently a need for driving through Knoxville on Kingston Pike, because all the stores were in Knoxville. Driving through the outskirts of west Knoxville would invariably prompt my dad to tell us about how he could remember, a passing twenty years ago, how everything we were looking at had been undeveloped farmland, and how unbelievable all this new development was. It was like a mantra, and eventually we all learned to grin good-naturedly. We know, Dad. Things change.

I was home for Christmas, and one night (not Christmas Eve) I was driving over to Knoxville (because in addition to the stores, it also has all the bars). Generally, my approach was to get off Pellissippi Parkway at Hardin Valley, which is the super-secret back way into west Knoxville, not so much as a shortcut, but as an excuse to get off the well-travelled roads and drive through some undeveloped farmland.

Since time immemorial, there had been a lonely gas station at the Hardin Valley exit, but as I exited that evening I saw something that (now, in retrospect, after being foreshadowed) shouldn’t have been surprising at all. A grid work of pressed steel was rising from the hillside, a metallic outline, waiting to be hung with drop-tile, insulation, wires, glass, and concrete. It was nearly finished then, and even at a Tennessean construction pace it’s probably almost finished now.

When I was in middle school, I had a crush on a girl. Of course she was beautiful, but she was also spunky, and now, now myopically molding my middle-school morals, I can easily claim that it was the spunk, not the beauty, that I wanted. Last year at a party I saw her, face covered in a plastic mask of rouge and eyeliner, wearing a blouse with a slash from neck to navel, an almost-skirt, and a Solo cup of Natty Light. Later in the night she was vomiting spunk in the bathroom with the door open.

Several years ago, I read a set of fantastic novels. They were imaginative, entertaining, epic, and perfectly constructed. In the author’s later work I found much to enjoy, but nothing to compare to his first effort. I’ve been afraid to read them again, fearful that I would find fault. Instead, they live on in my memory, immutable, the best scenes echoing, sparking endlessly between my synapses, colors and words perfectly reconstructing in loops.

All my life, creepingly, ducking my consciousness, things have been changing, and like someone living in a strobe-lit world light occasionally impinges upon my eyes. I see, and am surprised.

What I want, the way the world should absolutely work, is for everything to be the way I remember it, and eventually young people will laugh at me good-naturedly for feeling this way, while my memory grows more perfect and brilliant.

Written by Daniel Grady

February 14, 2008 at 23:39

Posted in Rants, True Stories

I am Pissed Off

leave a comment »

for two reasons.

One

I’ve heard tell that the Government is going to send me a check for $600, an economic incentive. That sounded awesome, but then I realized that everyone else is getting the same deal, so it was just sort of ho-hum. Then I realized that everyone else is getting the same deal, and I thought about it for a second.

This is really the best the government can do with our money? Give it away? They can’t think of any other damn thing to invest that money in? The best they’ve got is to tax us, then realize they taxed us too much, then throw fistfuls of our money indiscriminately into the country? Maybe they should take that money and hire me to tell them how to spend their money, because without even goddamn trying, I can think of no less than five things it would be better invested in, all of which involve giving Americans better educations. Of course, by instead investing the economic incentive money in public schools, they would have undone the keystone on which this whole plan rests, to whit: the assumption that most people will blow their wad. They are banking (ha! Double ha!) on the fact that the aggregate American is an idiot who will piss away their money in an instant instead of paying off their debt. They’re probably right, but it’s still pretty insulting, isn’t it? AAARRRRGGGHHH!!!!

Two

An email showed up in my inbox yesterday from Gene R. Nichol, who is the President of the College of William & Mary, the oldest chartered university in the nation and my alma mater. The email said, basically, that he had been fired by the Board of Visitors, and the implication was that this was for ideological reasons. Two hours later, here’s an email from the Board of Visitors that says, “That’s not true, we’re firing him, but not for those reasons, no no no.”

What are the reasons?

“Not the ones he claims.”

I don’t know the details, maybe they’re firing Nichol for legitimate reasons, I haven’t been back to Virginia in almost two years. Here’s what I know: William & Mary needs more money, like all colleges, but unlike all colleges, in fact unlike most colleges of its character, it is a public university, which means that the Virginia state government ultimately has the final say in most things William & Mary. The Board of Visitors is a state-appointed group of administrators who run the college. Gene Nichol gets hired, makes strong pushes to diversify the student body and provide more financial support to students in need, and now he’s fired. When the Board of Visitors made that decision, they were sitting in their meeting room, which is furnished with a U-shaped, 20-foot, marble-topped table and about 30 deep, cushy leather chairs. The chairs alone cost $6000 apiece, which means that when the BoV decided to can Nichol for whatever reason, their asses were comfortably resting in chairs that could have put fifteen Virginia students through four years at W&M.

The BoV can make all the claims they want about supporting Nichol’s ideals and programs, but they’re still sitting in leather chairs, writing on a marble-topped table, and paying techs like me minimum wage to sit in their meetings and open PowerPoint files for them.

To the Board of Visitors: screw you, and get your act together.

[UPDATE 2-14-08] Taylor Reveley sweeps in! Like your best friend who’s always had his eye on your girl, the runner-up to Nichol in the W&M presidential race of 2005 is there to let W&M cry on his shoulder, and then take her home and bang her.

Why am I so disgusted by these events? Am I getting old?

Written by Daniel Grady

February 14, 2008 at 15:41

Posted in Rants

A Change of Scenery

leave a comment »

A little while ago, I drove home to spend a few days with my family. I had wanted to read Edward Tufte’s books on graphic design, and since my dad conveniently owned the first three he loaned them to me. I’ve since finished moving into a new apartment, and finished those books.

The Visual Display of Quantitative Information is, despite the title, absolutely delightful. Every aspect of the production of the book was carefully undertaken, and the result is a volume that is physically beautiful. More important, though, is that it is written with clarity, economy, and wit. Tufte advances an idea. He presents evidence. The reader is convinced. The structure of the book is transparent, leaving the reader with a clear idea of exactly what is discussed, and how it fits into the larger argument. The language is crisp and engaging, and when he presents examples of bad graphic design, Tufte scolds without being strident. The tone of the book is entirely Horatian.

Tufte’s subsequent two books are exercises in repetition. The third book, written over a decade after Visual Display, offers in the introduction an explanation of the function of the three books in relation to one another. The ill-fit argument is that the first book is about pictures of numbers, the second book about pictures of nouns, and the third book about pictures of verbs. This is rather surprising; to take one example the chart on page 42 of the first book directly prefigures much of the third book. In fact it is very difficult to discover anything substantive in the second or third books that was not initially discussed, with greater clarity and brevity, in the first book. Tufte does continue to present beautiful examples of graphic design, and these examples continue to be printed in beautifully crafted books. Unfortunately, as the weight of the paper increases, he uses more and more words to say less. The second and third books become rambling and unfocused; bad examples are caustically attacked; no clear and coherent argument emerges. The reader is left wondering what the purpose of books two and three really is, as they seem little more than example books, albeit very beautiful ones.

This is probably a problem with me more than with Tufte. Phillip Pullman wrote a trilogy of fantasy novels, His Dark Materials (now being turned in to a movie trilogy), which I had a similar experience with. The first book was wildly creative, original, and entertaining, and I eagerly dove in to the remaining two only to see the story quickly degrade into a saccharine morality tale. But that tale was undoubtedly present from the very beginning, if I had just read a little more carefully. The issue was probably that I had a different idea of the story than the author, and wasn’t willing to go along with anything else. So it probably went with Tufte. The first book was so impressive and gave me such a clear personal idea of what the follow-ups should be that I couldn’t (and can’t) judge them with an objective eye.

Anyhow. It still pisses me off.

So my new apartment is awesome. You should come party.

Written by Daniel Grady

September 10, 2007 at 02:42

Posted in Books, Rants

Elevators

with 2 comments

When an elevator is not in use, it returns to a default floor and waits to be called. That makes sense. However, it waits with its doors closed. That doesn’t make sense. If an elevator is already waiting on the first floor, why should I have to push a button to make it open its doors? Waiting with open doors would help circulate the air, it would be more convenient to people who approach the elevator on the default floor, and it would negligibly affect the time it takes the elevator to respond to calls from other floors.

The argument could be made that elevators sitting with open doors would negatively affect the aesthetics of a lobby. The counter is that architects should view this as an opportunity to improve the interior design of elevators.

Written by Daniel Grady

July 15, 2007 at 19:02

Posted in Rants

Things I Thought I Knew (But Actually Didn’t)

with 2 comments

The Morning News is a very good online magazine type thing that I sometimes read, and one of their contributing writers is named Andrew Womack. He has written several lists of Top Ten Albums, and since I am trying very hard to avoid working on an end-of-the-quarter project, several hours of my day were wasted going through his lists and “obtaining” a good chunk of the albums he likes.

Are the quotes necessary there? Do you know what I mean? I didn’t do anything illegal, because that would be illegal. I just obtained the albums.

One of the albums he likes is Steve Reich’s “Music for 18 Musicians,” which is one of the albums I obtained. (You like how I linked to Amazon, so you too can obtain the album? Legally. Just trying to keep you honest.)

Now, I hadn’t particularly been looking for any Steve Reich. I knew who he was. He was a minimalist. We had learned about them in that history of music class I took back in the day. The teacher was like, “John Cage, man, he came out and just sat down at the piano, and he didn’t play a goddamn thing! For, like, two minutes!

I thought, “I could have done that.” Another guy in the class said “I could have done that” out loud, so he got credit for the joke.

We listened to some Ligeti, which I thought was very pretty, and we listened to Varèse’s Poème électronique, which I thought was not pretty at all, and we listened to George Crumb’s Black Angels, which I thought was awesome, and we listened to Steve Reich’s Tehillim, which I thought was… flat. We did all this in one class, so none of us thought too hard about it.

So that quarter of a class was what I knew about minimalism for a long time. Then, I saw The Exorcist, and my opinion of minimalism did not improve.

Looking through Womack’s lists of post-punk prog-rock bands I had never heard of, Steve Reich was a name I at least recognized. But I knew I didn’t like him, so I was thinking I would skip over that one, even though he was pretty high on the list.

Then I thought, you know, I kind of like that album that Eno and David Byrne did, and I really like Eno’s “Another Green World,” and people call that ambient, which is kind of like minimalism, and if I don’t track down a copy of this album I have to go back to making notes about theta rhythms in the hippocampus, and I don’t know what either of those things are, so I better track this album down.

It was a short time later that I discovered that I don’t know a damn thing. About theta rhythms or about music. “Music for 18 Musicians” surrounds you.

Moral:

Procrastinate.

And now that I’ve written about this subject as though I were informed, I am going to go read the Wikipedia article about it.

[UPDATE] Dude, we totally listened to Come Out by Reich in that class I took too. That was some crazy shit. We also listened to that piece where two pianists play the same repeated phrase very slightly out of phase, so over the course of 10 or 20 minutes they make a complete cycle. Math dork heaven.

Written by Daniel Grady

March 4, 2007 at 04:00

Posted in Music

Follow

Get every new post delivered to your Inbox.