Can I use CSS to justify text with hyphenating words at the end of a line?

Asked 1/3, 2012 at 5:20 Answered 1/3, 2012 at 6:57

Solved css justify hyphenation text-align

I have a div that is too narrow to text-align:justify (gaps too wide), but yet looks un-uniform when right- or left-justified, because then there is a large gap at the end of lines. Left-justified looks best, but could I use hyphenation, like in books? Using CSS?

Dodder answered 1/3, 2012 at 5:20 Comment(0)

You can use hyphens: auto provided that you have declared the content language in HTML, e.g. using <html lang=en-US>.

Browser support is still limited but getting better, see http://caniuse.com/css-hyphens

For good quality, you may need to manually control hyphenation e.g. by using soft hyphens () in words that might otherwise be hyphenated wrong.

Legislator answered 1/3, 2012 at 6:57 Comment(0)

Hyphenation is language-dependent; you can't just put overflowing characters on the next line and get the same effect that you do in books. Hyphenation rules are actually pretty complicated (see http://dictionary2.classic.reference.com/writing/styleguide/division.html), and the only way that you can do it properly (like in books) is either manually or via a client-side or server-side script; I'm pretty sure it can't be done using only css.

You might want to use something like http://code.google.com/p/hyphenator/

Bellboy answered 1/3, 2012 at 5:59 Comment(2)

No, I know about hyphenation rule. The "books" I am referring to are the ones whose text is justified and they simply break off words and hyphenate it and stick it on the next line, not following the rules of hyphenation. I learned the rules of hyphenation in middle-school. – Dodder 1/3, 2012 at 6:19

hyphenator works! if it supports your language. But if you have 3 or 4 languages the script file will weight about 200kb. There is also phpPyphenator, it will hyphenate your text on server. Much better than javascript file. Though it doesn't support some languages – Poinciana 8/8, 2014 at 9:7

For hyphenation in html, there are javascript programs to add what's needed to the text. such as http://code.google.com/p/hyphenator/

Support for brower buildin hyphenation is unreliable and improvement in its support is doubtful.

Briefless answered 1/3, 2012 at 6:3 Comment(0)

Recommended topics

Hot tags