Limited text width and automatic hyphenation in online documentation

If there are too many characters in a line, a long text can be hard to read. It is then difficult for the human eye to reliably find the beginning of the correct next line.

To prevent the line length from reaching staggering values on wide modern screens, it makes sense to limit the maximum width of the content area of an online documentation. Two small HTML snippets in the page template are all that you need to accomplish this.

Modern browsers even support automatic hyphenation at the line ends. The narrower the text is, the more useful is this function. Especially on mobile devices and in narrow table columns, automatic hyphenation can significantly improve the look and the readability.

Example

In the following paragraphs, the width has been limited to 500 pixels and the browser's automatic hyphenation enabled. Try making the browser window even smaller and watch the dynamically changing hyphenation!

The following sample paragraphs are what ChatGPT says on why automatic hyphenation can improve readability:

“Automatic hyphenation is a feature available in many word processing software programs that can greatly improve the readability of a document. By automatically inserting hyphens in appropriate places, the software can help to break up long words, create smoother reading experiences, and enhance overall clarity.

One of the most significant benefits of automatic hyphenation is that it can help to reduce the amount of white space on a page. When words are hyphenated, they can fit more easily into a line of text, allowing the page to look more organized and less cluttered. This can make the text easier to read and more visually appealing to the reader.

Another advantage of automatic hyphenation is that it can help to eliminate inconsistencies in hyphenation. When a document is written by multiple authors, or when different sections are written at different times, it can be challenging to maintain consistent hyphenation throughout the text. Automatic hyphenation eliminates this problem by ensuring that all words are hyphenated in the same way throughout the document.

Automatic hyphenation can also be particularly helpful in documents that have a narrow or specific format. For example, academic papers may have strict guidelines for margins, spacing, and font size. In these cases, automatic hyphenation can help to ensure that the text fits within the required format while maintaining readability.”

Well, let's leave it at that... It's good enough for demo purposes.

Implementation

Step 1: Place the following code snippet at the beginning of the area to be limited in its width. Within this snippet, adjust the width and language as needed.


<div style="max-width: 500px; hyphens: auto;" lang="en">

It is important to specify the correct language so that hyphenation is done correctly. Not all languages work in all browsers yet. The browser used by the user decides at which places which words are hyphenated. If needed, you can only include conditional hyphenation marks in the text (Unicode U+00AD or HTML code  or mnemonics ).

Step 2: Place the following code snippet at the end of the width-limited area as a closing:


</div>

Automatic hyphenation only in tables

If there is a table in an area marked as described above, the hyphenation also applies to the content in this table. In this scenario, you do not need to do anything else.

In case you don't want hyphenation at all in normal body text, but exclusively in tables, omit the hyphens and lang statements in the code used for limiting the width. It then looks like this:


<div style="max-width: 500px;">

However, to enable hyphenation in tables (and only there), add the following specification specifically for tables in the CSS file used or in the head section of the topic:


 table {
  hyphens: auto; 
  lang="en"; 
 }

This activates automatic hyphenation globally for all tables – in the example for the language English.