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

On Sep 21, 2010, at 5:16 AM, David Chambers wrote:

> 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 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".

If it was palatable to wrap each line in separate code tags, then the following would work:

<style>
pre { 
white-space: pre-wrap; 
margin-left:5em;
text-indent:-3em;
}

code { display:block; }
</style>

<pre><code>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</code>
<code>Sed sit amet diam sit amet sem accumsan faucibus ac in arcu.</code>
<code>Quisque varius, erat vel euismod ornare, libero orci laoreet velit, at lobortis sem nisl et eros.</code></pre>

Given the number of problems and issues that the ::first-line pseudo-element creates, I think you'd have a hard time generating much enthusiasm in the WG for a ::line pseudo-element in the near future. Since the usefulness seems to be pretty much limited to code wrapping, maybe it would be more appropriate to have a new value for 'white-space', in which hard breaks create new blocks (upon which 'text-indent' can work individually), and long lines can wrap naturally (as with 'white-space:pre-wrap').