ansaurus

Question

Is it possible to indent wrapped lines within code blocks via CSS?

Answer 1

A:

I'm not sure if this works in <pre>, but it looks promising.

http://www.ehow.com/how_2382848_hanging-indent-css.html

DLH 2010-08-13 14:22:09

This approach would work if each line of code were in its own element. Some JavaScript syntax highlighters replace code blocks with ordered lists, allowing CSS to control the indentation of wrapped lines. I'm seeking a CSS-only solution, however.

davidchambers 2010-09-14 04:33:33

Answer 2

+1 A:

text-indent: -2em;
padding-left: 2em;

William 2010-08-13 14:23:32

This doesn't respect line breaks within the code block, unfortunately.

davidchambers 2010-08-14 07:48:51

I think you meant it doesn't behave as you wanted it :-) If you want a new line "unindented", you should make it a paragraph, i.e. <p>, and style it appropriately.

William 2010-08-14 11:02:03

Answer 3

+4 A:

It is kind of possible... I'm not using using the <pre> and <code> tags and I'm not sure how important these tags are to you... but I've been able to get the style you're looking for and mimick the formatting as best as I could. Check it out.

http://jsfiddle.net/PVZW5/7/

CSS

div {
    margin-left:24px;
    width:400px;
}

p {
    font-family: "Courier New", Courier, monospace;
    font-weight: normal;
    font-style: normal;
    font-size: 13px;
    margin:0 28px;
    text-indent: -28px;
}

HTML

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

Take a look at this SO question and some solutions that have come from it. It is relevant to your question. It might be worth your time to take a look :)

I hope this helps!

Hristo 2010-08-13 14:36:05

This doesn't respect line breaks within the code block, unfortunately. The start of _every_ line should be flush left, not just the first line within the code block. I appreciate the jsfiddle link, though.

davidchambers 2010-08-14 07:43:49

@davidchambers... I didn't realize that you had new lines in your code. I'll go back and see if I can do it.

Hristo 2010-08-14 12:25:33

@davidchambers... please take a look at my post. I updated the link with the new solution as well as the CSS and HTML. I hope this helps you. If this isn't what you're looking for... then I don't think you can do what you using only CSS. You might have to resort to JavaScript (I recommend jQuery).

Hristo 2010-08-15 18:01:01

While I appreciate the links, defiling code snippets with paragraph tags (or tags of any nature) is not an option I'm willing to consider. Now that I'm fairly sure that I haven't overlooked an obvious solution I plan to raise this issue on the www-style mailing list.

davidchambers 2010-08-16 04:53:37

@davidchambers "Defiling" code snippets? Not an option you're willing to consider? This isn't going to ruin the code somehow; people use markup in their code all the time, if they want to to group it together into logical pieces which may be styled (see, for instance, the syntax highlighting of code snippets here on StackOverflow). I don't think you're going to get much traction on www-style suggesting something that can simply be solved by marking up your paragraphs instead of relying on white-space for your paragraph boundaries.

Brian Campbell 2010-09-21 00:35:57

I guess you could do this with some JavaScript (or jQuery), but as far as a PURE CSS solution, I don't think one exists as far as I know. Please let me know if the "www-style" mailing list people get back to you.

Hristo 2010-09-21 02:01:11

Brian, please note that the "lorem ipsum" in this perfunctory example is representative of programming code (a Python snippet, perhaps) rather than prose. While I completely agree that marking up prose using paragraph tags and the like is the correct approach, appropriate semantics do not exist for marking up code. This is nice, in a way, since the only markup that one need apply to a code snippet is `<pre><code>` ... `</code></pre>`. The downside, though, is a lack of styling hooks; a suitable pseudo-element would solve this problem.

davidchambers 2010-09-21 04:17:05

Hristo: Will do! (I've been waiting to see whether someone would provide a CSS-only solution in this thread. I've now accepted that currently such a solution almost certainly does not exist, so I'll raise the issue on the mailing list and report back.)

davidchambers 2010-09-21 04:21:19

@Brian... sounds good. Looking forward to hearing what the CSS people have to say

Hristo 2010-09-21 04:52:42

@davidchambers Yes, I realize that it's a stand-in for code. My point was that it won't break anything to use a tag like `<p>` for formatting your code, especially for a case like this, in which you want to treat each line as a separately indented paragraph. And you will need to add more tags to your code if you want to do anything like syntax-highlighting.

Brian Campbell 2010-09-21 05:23:02

The www-style thread is at http://old.nabble.com/%22Line%22-pseudo-element-required-to-control-indentation-of--pre-formatted-text--td29768752.html. fantasai's comments are promising, particularly that which suggests extending the `text-indent` property to allow `text-indent: 2em hanging each-line`.

davidchambers 2010-09-28 01:56:36

Answer 4

A:

Unfortunately after much searching I've come to believe that this is currently impossible using CSS alone. What's required is a pseudo-element for each "line" (text matching /^.*$/m), which would enable the indentation of lines beyond the first to be controlled via CSS.

I raised this issue on the www-style mailing list. fantasai's responses are promising, particularly the suggestion that the text-indent property could be extended to allow text-indent: 2em hanging each-line.

davidchambers 2010-09-20 10:26:05

I believe XHTML 2.0 wanted to introduce `<l>line</l>` as a replacement for `<br />` but it fizzled out for want of an upgrade path.

ssokolow 2010-09-20 10:30:10

ansaurus

tags:

views:

answers:

Is it possible to indent wrapped lines within code blocks via CSS?

CSS

HTML

related questions