This segment of CSS3 will review text decoration including line continuity and underline position. Both of these properties are not fully implemented in user agents or browsers just yet; however, they are both good candidate recommendations of properties which should see some acceptance in the near future. It will be interesting to track them as the specification continues to gain traction especially with emerging mobile technologies and worldwide adoption among developing nations.
Continuing with our review of CSS Text Level 3 specification, we will pick up with the line-continuity property.
This property specifies what parts of the element’s content — mainly any text decoration affecting the element — must be skipped over. It controls all text decoration lines drawn by the element and also any text decoration lines drawn by its ancestors. The property is written in the following syntax:
text-decoration-skip: none | objects | spaces | ink | edges
Values have the following meanings:
- None: Indicates that nothing is skipped; therefore text-decoration is drawn for all text content and for inline replaced elements.
- Objects: Skip this element if it is an atomic inline (such as an image or inline-block). This is the initial value.
- Spaces: Skip white space; this includes regular spaces and tabs, as well as nbsp, ideographic space, all fixed width spaces, and any adjacent letter-spacing or word-spacing.
- Ink: Skip over where glyphs are drawn; interrupt the decoration line to let text show through where the text decoration would otherwise cross over a glyph. The UA may also skip a small distance to either side of the glyph outline.
- Edges: The browser or user agent should place the start and end of the line inwards from the content edge of the decorating element so that, for example, two underlined elements side-by-side do not appear to have a single underline. (This is important in Chinese, where underlining is a form of punctuation.)
One note about this property is that it inherits and that descendant elements can have a different setting. An issue that has not been resolved is the need for a value that doesn’t skip margins and padding. Unfortunately this property is currently not supported by browsers.
This property specifies the position of an underline specified on the same element: it does not affect underlines specified by ancestor elements. The underline position property is written in the syntax:
text-underline-position: auto | alphabetic | below left | below right
With the value meanings:
- Auto: The browser or user agent may use any algorithm to determine the underline’s position; however, in vertical typographic mode, if the language of the element is set to Japanese or Korean the underline must be drawn on the right side of the text as described for ‘below right’.
- Alphabetic: The underline is aligned with the alphabetic baseline. In this case the underline is likely to cross some descenders.
- Below Left: The underline is aligned with the under edge of the element’s content box. In this case the underline usually does not cross the descenders. If the underline affects descendants with a lower content edge, the user agent should shift the underline down further to the lowest underlined content box edge. The user agent may ignore elements with ‘vertical-align’ values given as lengths, percentages, ‘top’, or ‘bottom’ when making this adjustment.
- Below Right – In horizontal typographic mode, this value is equivalent to ‘below left’. In vertical typographic mode, the underline is aligned as for ‘below left’, except it is aligned to the right edge of the text. If this causes the underline to be drawn on the “over” side of the text, then an overline also switches sides and is drawn on the “under” side.
The most likely use for this property would be for languages which do not follow the typical Western flow from left to right, but from top down, or other language flows.
With emerging world markets including developing nations, and according to comScore, considering that 81% of Internet users are outside of the United States, it makes sense for user agents and browsers to take a serious look at text decoration for global acceptance and universal usability.
Future segments on CSS3 will review transitioning and transforming effects including hover, rollover, and other properties, which can be implemented today or in the near future.