Steve Salter

A recent post to the Flare user’s forum raised the issue of paragraph content added automatically.

 The original post was asking about the content selector and if it was possible to use it to add text to the beginning of a paragraph. In this case the paragrah should start with “Note: “.

CSS 2 does allow you to do this. You need to use the :before (and maybe :after) pseudo elements:

p.note:before {
content: "Note: ";
}

p.note:after {
content: " [end note];
}

CSS will let you number the notes as well.

You can use an explicit counter, in this case called note:

p.note:before{
content: "Note " counter(note) " : ";
}

You have to set the increment property for the counter, else it will show the same value every time:

p.note{
counter-increment: note;
}

And, if you want to reset the counter every chapter (and you use H1 for your chapter headings):

H1{
counter-rest: note;
}

This approach is technically correct and has the benefit of being a stylesheet solution – you could change “Note: ” to “notes: ” in your stylesheet to have all occurences changed. Unfortunately the content and counter properties aren’t supported by Internet Explorer (at least IE up to version 7).

Flare allows you to create paragraphs with preinserted text and numbers. And, it works when displayed in IE. Flare adds the text and the number as formatted text during the build, rather than relying on the browser to do it at viewing.

This stylesheet setting in Flare creates a comment – dark green text on a light green background, surrounded by a dashed red border:

What about the stylesheet? This is what Flare adds:

p.comment
{
 font-weight: bold;
 color: #008000;
 border: dashed 2px;
 border-color: #ff0000;
 background-color: #90ee90;
 mc-auto-number-format: ‘R:COMMENT {Gn+}: ‘;
 mc-language: none;
}

The smoke and mirrors come from the property mc-auto-number-format. R:COMMENT {Gn+}:

The R is the series (or specific counter). I could have used something else, but in this case R for remark (the original text added to the paragraph).

Comment is the text added to the paragraph. As I said, originally I added Rem x:, but decided Comment x: read better.

Lastly we have a global counter increment command {Gn+}. If I wanted a chapter based counter, I could have used {n+}. The plus sign means the counter is incremented, to display the value without incrementing use {n}.

If I used a chapter based numbering system I’d want something like R:COMMENT {chapnum}.{n+}: . That would give me COMMENT X.Y: , where X is the chapter number and Y the comment number, resetting with each chapter.

You could use a numbered list as well, but if you want to add some default text and if the elements aren’t close in the topic, you might find it harder than getting your head around auto numbering.

This entry was posted on Wednesday, April 2nd, 2008 at 12:48 pm and is filed under Content, Flare. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.