Forum How do I...?

Multiple lines in @bottom-left selector

JohnClarke
I haven't been able to have more than one line in a @bottom-left selector (or similar). Is this possible? This is what I've tried:

@bottom-right { content: string(pdf_copyright) " <br/> Document generated: " string(pdf_date);}

or simply including the <br/> in the content of one of the strings.

-John

John Clarke
Cornerstone Systems Northwest Inc.

mikeday
CSS text strings cannot contain markup. They can however include newline characters, which may be added using the \A character escape; for example "Hello\A world!".
JohnClarke
Hi Michael,
This looks promising. Where do you put the \A, exactly? I've tried to put it in the markup, and in the CSS inside quotations without any success.

@top-right {content: string(header_2) "\A Should be on second line" string(header_1) " | " string(pdf_copyright);}


<div id="pdf_copyright">All material © Copyright 2003, 2004, 2005, 2006\A Should be on second line.</div>
#pdf_copyright{
string-set: pdf_copyright content();
}


Any advice?

John Clarke
Cornerstone Systems Northwest Inc.

mikeday
Sorry, I forgot to mention that you also need to use the white-space property to prevent newline characters from being collapsed into space characters:
@page {
    @top-right {
        content: "Hello\A world!";
        white-space: pre-line
    }
}

A white-space value of "pre" or "pre-line" will preserve newlines in the output. The difference is that pre will also preserve sequences of multiple spaces instead of collapsing them into one space, which is handy for reproducing source code and other text where spaces are used for alignment, but is probably not what you want in this instance.
JohnClarke
Hi Michael,
Yes, this did the trick.
-John

John Clarke
Cornerstone Systems Northwest Inc.