Skip to content

ATTENTION TWEETERS: Before clicking the tweet button, please ensure the proper URL is displayed in your location bar. How? Click the post title, or permalink. (Otherwise, your tweet will point to the site, only, making it difficult for your readers to find.)
-- Thank you!
the Author

CSS: White-Space & Content

See also:

According to the World Wide Web Consortium‘s CSS 2.0 Specification, section 16.6 Whitespace, it is possible to create line breaks through the use of CSS Generated Content: 1

Additional line breaks may be created by occurrences of “\A” in generated content (e.g., for the BR element in HTML).

In other words, if the situation requires it, create a new line in your document by applying the following property declaration to the CSS Selector content : "airplanes and trains \A newline below airplanes" or, simply content : " \A " if needed.

More information about how to use the


escape sequence in CSS can be found under Section 12, where there are extensive details about Generated content, automatic numbering, and lists

Managing White-space and Line Breaks

Lesser-known, Significant CSS Declaration Properties

the CSS Properties content and white-space are quite significant, powerful properties which have the potential to enhance CSS creativity. The truly crafty can come up with some really nice effects using the :before and :after pseudo-elements in conjuction with generated content, and perhaps even throwing in some white-space for the adventurous!

the CSS Pseudo-elements, :before and :after, conveniently built-in to CSS, offer quite amazing capabilities when their use is approached with creative skill.

These Pseudo-elements allow for the placement of Generated Content, as the name suggests, either before or after that HTML element which is indicated in the Stylesheet to receive the pseudo-element tagged or prepended relationship. For example, if the author wants every <h1> element to have the text HEADING-1 prepended to it, he would place the following into the stylesheet:

h1:before {content: “HEADING-1 “;}

which would result in that which is placed inside of the quotation marks, the string which is the value of the content property in the declaration of the :before Pseudo-element, in this case, HEADING-1 would be seen “before” every h1 element which is being styled by that stylesheet. (:after appends the string to the end of the element receiving the Pseduo-element declaration)

NOTE: Good ol’ Internet Explorer, of course, does NOT support the pseudo-element property– at all, period.

the Line Feed Control Character

Controlling line breaks in HTML:
an excerpt from the W3C HTML 4.01 Specification

A line break is defined to be a carriage return &#x000D;, a line feed &#x000A;, or a carriage return / line feed pair (often seen in text editor preferences, indicated as CR/LF). All line breaks constitute some amount of white space.

For more information about SGML’s specification of line breaks, please consult the notes on line breaks in the appendix.

The specific use that I found for :before in this particular circumstance, which is why i got excited about the discovery, is the ability to prepend the word “Citation” before every <cite> element, as shown in the code below, and as can be seen in use in many entries in this Blog in which i’ve used the <cite> element.

Note the use of the Line FeedControl Character” within the content string of the :before Pseudo-element. The Line Feed character (Unicode “Character Encoded” format shown above) was essential to achieving the intended effect of the CSS used below for the :before Pseudo-element

cite {
cite:before {
content: “Citation: \a”;
white-space: pre;

1Section 16.6: Whitespace; Cascading Style Sheets, level 2: CSS2 Specification. the World Wide Web Consortium (aka. W3C). Rev. May 12, 1998. Available at: http://www.w3.org/TR/REC-CSS2/text.html#propdef-white-space . Accessed April-08, 2007

2Paragraphs, Lines, and Phrases: HTML 4.0 Recommendation. the World Wide Web Consortium. (Rev. Dec-24 1999). Available at: http://www.w3.org/TR/html4/struct/text.html#h-9.3.2 . (Accessed [for adding citation] Mar-24, 2007)

Inconsistencies with \A in HTML Markup

NOTE: Considering the newline escape sequence can be expressed in HTML markup (as it is here, in this sentence), so the reader might see it in the text as \A, without it functioning to create a new line or inserting a line-feed control character, one might question its apparent failure to perform as a control character in this instance. However, if it is written as such inside of the HTML <pre> tag, it will function as intended, not unlike several spaces are also recognized, and printed on-screen when wrapped by the HTML <pre> tag (a tag abbreviation for PRE-formatted text). The reason for the inconsistency goes beyond the scope of this article, but the existence of it should offer some insight for readers who have yet to venture into the vast depths of Unicode, Control-Characters, and the many different ways in which text can both be expressed as a part of human language, and how it is used in computer languages to serve special functions, as different programming languages, editors, and compilers have evolved, are used in practice, and continue to evolve.

Specific to this example, in HTML markup, the backslash, or reverse solidus character does not suffice to create a control character when combined with the “A” [ Unicode code-point \u005c , or HTML Hexadecimal NCR &#x005C; ]. We might consider this a special allowance for printed text, or the use of human language characters in a human-language text, where HTML recognizes that the reverse-solidus [ \ ] is in fact a control character (e.g. in many [or most] computer programming contexts, the reverse-solidus serves as a meta-character, or control character, to escape forthcoming text; to denote special functions (such as the line-feed when it is coupled with an “A”, or to indicate a horizontal tabulation when coupled with a “T”)– any number of combinations of plain text led by the reverse-solidus escape sequence– to denote a single control-character from the group of standard keyboard characters, keyed just as any other letter of the surrounding human text (such as the “A”, when coupled with the escape meta-character [i.e. the backslash; reverse-sol

idus] in this instance denotes a line-feed). So, we might say that HTML is a unique context, as the reverse-solidus is not interpreted as usual, as an escape-character, when placed by itself but– instead– must be itself escaped in order to effectively create the necessary escape sequence to denote a new-line control character (i.e. if keyed into the markup as \\A, the escape-sequence, and therefore the control-character, is finally recognized).

Recommended Study

Is this unusual interpretation of the escape-sequence unique only to WordPress, or HTML in general? In other words, regarding my claim about the [ \A ] escape sequence / control character as being ignored in the markup here: is it necessary to double escape; to escape the escape-character itself (e.g. is it necessary to type \\A ) to render the control character in any and all HTML, or only when using the WordPress content management system?
What have you learned from this article? If you find the topic interesting, be sure to follow the See-Also links near the top of this article, and any other links here in NoviceNotes™ related to Unicode, control-characters, and software designed especially for handling tasks specific to these topics.

0 Responses

Stay in touch with the conversation, subscribe to the RSS feed for comments on this post.

You must be logged in to post a comment.