How to Control the Line Break in the HTML code Sensibly


The line breaks for flowing texts on the homepage depend on the browser and the selected window size and font size. Occasionally, minus signs or value units get deleted or long terms get separated incorrectly. Here’s a way to ensure that the text remains orthographically correct and legible in all cases.

Since each unique user has different settings for screen resolution, window size and font size; the line breaks in the browser are dynamic. Instead of a fixed allocation, you want to make sure that related items such as values and units of measurement are not separated. Hence, you should insert ‘Pre-determined breaks’ for the browser. Since browsers do not always adhere to the HTML standards, and use the line break in various ways, it is you who must decide whether an HTML that adheres to rules or a representation which is correct in most situations is more important or not.

An unwanted line break can be avoided with the ‘ ’ code for a protected empty space. This works well in all browsers except Internet Explorer. It encounters problems that cannot be solved with this trick alone. Except after the hyphen (minus sign), Internet Explorer inserts breaks even after percent and degree signs and brackets and inverted commas. Even the ‘ ’ code does no help here.

Use the special tag ‘<nobr>’ so that the browser does not separate the temperature value such as ‘-5 °C’ after the minus or the degree sign. Then, simply type the temperature value as <nobr> -5 °C </nobr>-

It is even more difficult to allow the desired line break at the right place. As per the HTML standard, a browser should treat the hyphen as normal sign and not separate it. A flexible separator ‘&shy’ is provided for the identification of a possible separation. However, in reality, Internet Explorer does not separate after a normal hyphen, whereas Mozilla Firefox adheres to the standard. On the other hand, the Opensource browser simply ignores ‘&shy’.

A frequently used solution is to insert another empty space after the hyphen to enable the separation in all browsers. In a running text however when there is no separation this is incorrect from the orthographic point of view. A tag not included in the HTML standard ‘<wbr/>’ helps even in this case. The best place to insert it is after the hyphen. Even this tag is accepted and converted by all browsers as a separating option.

Filed under: Coding and Design
Tags: , , , , , , , , ,
March 12, 2009 by: Prasanth Chandra

Leave a Reply