- From: David Chambers <david.chambers.05@gmail.com>
- Date: Wed, 22 Sep 2010 00:16:12 +1200
- To: www-style@w3.org
- Message-ID: <AANLkTikoSeQFy=u1cPBTq+9R--q++AM9YpjzL7OdfEU7@mail.gmail.com>
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 UTC