This is an archive of an inactive wiki and cannot be modified.

Using soft hyphenation to prevent exceeding 120px screen width

This technique gives a possible implementation for the CategoryBpScrollingOneDir using soft hyphenation to prevent exceeding 120 px limit of the DDC.

As with any technique, the aim is to exploit a devices capabilities. If however it is not known what the device can do, one should assume the DDC. The DDC sets a limit of 120 px screen width to prevent horizontal scrolling.

The difficulty lies in the relative nature of formatting used in content, making it impossible to predict when such behavior might occur. Thus a general guideline should be established that allows preventative authoring of text.

Soft hyphenation presents a method to set a marker at which a browser is supposed to break the line and place a visible hyphen, if it is necessary to break the line. If not, nothing will happen. This means if the requesting device can display more, no modification of the text need take place.

From the HTML 4.01 Specification

9.3.3 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.

In HTML, the plain hyphen is represented by the "-" character (- or -). The soft hyphen is represented by the character entity reference ­ (­ or ­)

In general if there is a space between words a browser will wrap text. Therefore the focus must lie on single strings that have the potential of exceeding the 120 pixel limit.

A live check of published content would be the best method, provided a device with no more than 120px screen width is available. Unfortunately part of the problem is also the browser itself where behavior may vary and thus cannot be definitely determined by the average author.

Based on Arial Size 8 no more than 15 characters "M" can be placed into a 120px wide box. While fonts and font sizes will vary, it gives the author an idea beyong which point caution is needed.

With any string of characters equal to or longer than 15 characters soft hyphens should be inserted such that the resulting parts are shorter than 15 characters.

Back to BestPracticesList

CategoryXhtml CategoryBpScrollingOneDir

Contributions to this wiki are governed by the W3C policies for Contribution to W3C' wiki on Mobile Web.