W3C home > Mailing lists > Public > www-style@w3.org > September 2010

"Line" pseudo-element required to control indentation of pre-formatted text?

From: David Chambers <david.chambers.05@gmail.com>
Date: Wed, 22 Sep 2010 00:16:12 +1200
Message-ID: <AANLkTikoSeQFy=u1cPBTq+9R--q++AM9YpjzL7OdfEU7@mail.gmail.com>
To: www-style@w3.org
I recently wondered whether it's possible to style a block of text *contained
within a single element* such that wrapped lines are indented. This is
particularly useful when dealing with code snippets, which are typically
inserted between `<pre><code>` and `</code></pre>`. For example…


<pre><code>Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Sed sit amet diam sit amet sem accumsan faucibus ac in arcu.

Quisque varius, erat vel euismod ornare, libero orci laoreet velit, at
lobortis sem nisl et eros.</code></pre>


… would perhaps be rendered as…


Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Sed sit amet diam sit amet sem accumsan faucibus ac in arcu.

Quisque varius, erat vel euismod ornare, libero orci laoreet velit,

        at lobortis sem nisl et eros.


Here, the last line of "code" has been wrapped due to its length; this is
made apparent to the reader via indentation.


I posed this question on Stack
Overflow<http://stackoverflow.com/questions/3477625/is-it-possible-to-indent-wrapped-lines-within-code-blocks-via-css/3477877#3477877>
and
among the responses were suggestions to A, use JavaScript or B, wrap each
line of code in `p` tags!


While it is of course possible to replace each `pre` with another element
(perhaps an `ol`) via JavaScript (which would allow the indentation of
wrapped lines to be controlled via CSS), this is rather convoluted for
something purely layout-related.


The problem is that `text-indent` cannot be applied to each line of text
within an element. If "Lorem … elit.", "Sed … arcu.", and "Quisque … eros."
could be treated as pseudo-elements, the task of applying the desired
indentation would be trivial:


pre>code::line {

    padding-left: 2em;

    text-indent: -2em;

}


David



p.s. It's completely possible that I've overlooked a solution that exists
today. I'll be extremely happy if someone replies saying "actually,
*this*will do the trick".
Received on Tuesday, 21 September 2010 12:16:44 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:20:31 GMT