Practical solutions to hyphenate text on web pages

In this post I want to suggest you three simple and useful ways to hyphenate text on your web pages using JavaScript or PHP. If you take a look at W3.org documentation you can find this explanation about hyphenation:

"In HTML, there are two types of hyphens: the plain hyphen and the soft hyphen. The plain hyphen should be interpreted by a user agent as just another character. The soft hyphen tells the user agent where a line break can occur. Those browsers that interpret soft hyphens must observe the following semantics: If a line is broken at a soft hyphen, a hyphen character must be displayed at the end of the first line. If a line is not broken at a soft hyphen, the user agent must not display a hyphen character. For operations such as searching and sorting, the soft hyphen should always be ignored."

To hyphenate text I found the following practical solutions:

Hyphenator.js
This script automatically hyphenates texts on websites and runs on any modern browser that supports JavaScript and the soft hyphen (­). It runs on the client in order that the HTML source of the website may be served clean and svelte and that it can respond to text resizings by the user. The result is really great:



The usage of this script is really simple. You have to include the script into your pages in the <head> tag:

<script src="hyphenator.js" type="text/javascript"></script>

...then you have to invoke the script adding this code after the previous code:

<script type="text/javascript">
Hyphenator.run();
</script>

...and use this HTML code to active hyphenation:

<p class="hyphenate text" lang="en">
Your text here...
</p>

Take a look at this example for a live preview.

You can also choose the language changing the property "lang" (actually the script support 16 languages, for the full list take a look here).


phpHyphenator
The phpHyphenator is a PHP port of the JavaScript hyphenator.js by Mathias Nater for automatic hyphenation in web pages using soft hyphens. The hyphenation algorithm needs large pattern files for doing the hyphenation and and using JavaScript can slow down page loading. PHP instead is doing hyphenation directly on the server wihtout sending the pattern files to the client.


Online Soft Hyphenation Generator
You can also try this interesting on-line HTML Soft Hyphenation Generator a configurable automatic hyphenation (soft or hard) generator for HTML text based on phpHypenator.




Any suggestion about this topic? Please leave a comment, thanks!
Tags: , ,

About author

Information Technology Blog provides you with information and links to computer tips, tricks, solutions, computer components, smartphone, tablet, news and relevant information to IT related topics.

0 comments

Leave a Reply