My client has requested to enable auto-hyphenation on this page: http://carlosdinizart.com/biography/ , and I realized I've never actually seen it done on a web-page.
Is it possible to set up auto-hyphenation in an HTML document with just HTML/CSS? If not - what are the options?
On
To deal with one page that has fixed width for text, the practical move would be to add a couple of SOFT HYPHEN characters (U+00AD), using the entity reference ­ if you find it more comfortable than entering the (invisible) character itself. You can rather quickly find out which words need to be hyphenated to produce a good result.
In a more complex case (several pages, flexible width), use a preprocessor, or server-side code, or client-side code that adds soft hyphens. The client-side approach is simplest and can be applied independently of server-side technologies and authoring tools. Beware that automatic hyphenation may go wrong and needs some help: the language(s) of the text need to be indicated in markup (or otherwise, depending on the library used).
At the minimum, you could just put the attributes lang=en class=hyphenate into the <body> tag and the following code in the head part:
<script
src="http://hyphenator.googlecode.com/svn/tags/Version%204.0.0/Hyphenator.js">
</script>
<script>Hyphenator.run();</script>
Demo: http://bytelevelbooks.com/code/javascript/hyphenation.html (flexible-width text, with just maximum width set, so you can test it varying the browser window width).
On
An option is to insert soft hyphens into the text in places where it may be broken. The soft hyphen is represented by the entity ­ in HTML. You may find libraries/tools that can prepare text automatically with ­s in the right places, otherwise you'll have to do it manually.
On
At present my css for <p> is
p {
font-style: normal;
padding: 0;
margin-top: 0;
margin-left: 0px ;
margin-right: .5em ;
margin-bottom: 0;
text-indent: 1em;
text-align: justify;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
-o-hyphens: auto;
word-break:break-word;
hyphens: auto;
}
This doesn't work for Chrome 39 on Mac. Known not to work on Opera. Works for Firefox, iOS Safari.
This is NOT foolproof: Narrow columns (under 6 words) are ugly, but overall it makes the layout look far more like properly set type.
CSS3 provides some support for this. Source: http://drublic.de/blog/css3-auto-hyphenation-for-text-elements/ You can check the w3c documentation here: http://www.w3.org/TR/2011/WD-css3-text-20110901/#hyphenation
CSS3 adds six properties to the list of useful thing. These are:
hyphens.hyphenate-resourceso the browser has a better chance to render your text with the right hyphenation.hyphenate-beforesets a minimum number of characters before the hyphenation.hyphenate-afterdoes the same ashyphenate-beforebut for characters after the hyphenation.hyphenate-linesdefines about how many lines a hyphenated word is written at a maximum. withhyphenate-characteryou can specify which HTML-entity should be used, e.g.\2010.The main property of this stack is
hyphens. It accepts one of three values:none,manualorauto. The default one is manual, where you can set hyphens via­.autoit the better one for continuous text while words get split if possible and available. Andnonedoes not hyphenate at all even if there is a character set for a possible line break in a certain word.Update:
Browser support information here: http://caniuse.com/css-hyphens