Reply To: Request: CSS extensions to insert line breaks

[Derek Read]

I'm not sure I understand exactly, but perhaps what you are looking for is already possible.

The basic trick here is that you can pass any character into “content” inside the quoted string bits of the pseudo elements (generated content) :before and :after in CSS by 'escaping' the character using a backslash followed by the 4 digit Unicode code point value in hex notation.

Normally this is not necessary as you can simply save your CSS file with Unicode encoding (UTF-8 or UTF-16) and insert any Unicode character, but as carriage returns are treated as regular spaces in CSS files you can't simply insert a carriage return to break lines in the “content”, so in this case it becomes useful.

Everything I've written above sounds confusing to me (though I think it is technically correct) so examples are best…

The escaped notation for a carriage return would be “00a”, so something like the following may be what you need:
elemName:before {
  content: "Important Attrs: " attr(i1) "|" attr(i2) "00a Less Important Attrs:" attr(a3) "|" attr(a4);
}

So, given a PCDATA element TEXT that CSS should produce this in Tags On view:
Important Attrs: 1 | 2
Less Important Attrs: 3 | 4
TEXT

…and in Normal view you'd see this:
Important attrs: 1 | 2
Less Important attrs: 3 | 4

Reply