Last updated on September 23, 2017
The basic algorithm for rendering text is simple: put as much text as will fit on each line, with the remainder on the last line. This results in the fewest possible lines of text being used, but when the text spans more than 1 line, the result can sometimes be visually undesirable.
When rendering text that spans multiple lines, this feature provides the option to automatically balance text across the necessary number of lines.
The intended usage for balance text is for short text elements such as headings, blockquotes, labels, and captions. When balance text is applied to large paragraphs of text, the effort increases and the benefit diminishes, so there probably should be a way to specify a maximum length of text.
A new value of
balance is proposed for the CSS4 Text module
text-wrap property. For example:
text-alignment value can be used with balanced text.
Note that once implemented in browsers, any
text-alignment can be used with
direction value can be used with balanced text.
Balance text does not affect the width of the containing element. The resulting text will always wrap to same number of lines as original text. There may be cases where height changes.
One exception to this may be shrink-to-fit containers.
Balance text is limited to a single block-level element. It does not balance across multiple paragraphs.
Float intrusions seems like a solvable case, but the point where there is enough text to wrap around something approaches the point where balance text loses effectiveness, so this may not be a beneficial enough case to implement.
How text that contains <br> tag needs to be defined.
As the length of text increases, the effort increases and the benefit decreases, so it may be desirable to limit length of text to a configurable value, and balance text does nothing if that threshold has been surpassed.
The following proposed algorithm provides a good balance of text in 2 rendering passes.
First, determine the minimum number of lines required for the text using the basic text rendering algorithm. The text rendering algorithm is necessary because, due to the actual order and length of elements in the text, the number of lines may be more than by simply dividing the total text width by the container width.
If there's only 1 line of text, then it is rendered on a single line, and the algorithm is done.
Also, need to determine total width of text (i.e. length of text rendered on 1 infinitely long line). This is determined by a keeping cumulative length as text is rendered.
Layout text in final pass:
|Date||Name||Description of Change|
|Mar. 16, 2011||Randy Edmunds||First draft.|
|Aug. 13, 2012||Randy Edmunds||Implement feedback from Alan Stearns.|
|Sep. 2, 2012||Randy Edmunds||Feedback from Divya Manian, Alan Stearns.|
|Feb. 1, 2013||Randy Edmunds||Made updates based on feedback from www-style list (L. David Baron, Peter Moulder).|
|Sep. 23, 2017||Randy Edmunds||Change 'balanced' to 'balance'.|