Auto-generated Text - HTML

CSS has a few mechanisms for autogenerating text. Although this doesn’t fit in well with the presentation-only function of CSS, it can be useful to have some constructs to automatically generate text for your documents.

Specifying quotation marks
You can use the autogeneration features of CSS to define and display quotation marks. First, you need to define the quotes, and then you can add them to elements. The quotes property takes a list of arguments in string format to use for the open and close quotes at multiple levels. This property has the following form:

quotes: <open_first_level> <close_first_level>

<open_second_level> <close_second_level> ... ;
The standard definition for most English uses is as follows:

quotes: ‘“’ ‘”’ “‘” “’”;

This specifies a double-quote for the first level (open and closing) and a single-quote for the second level (open and closing). Note the use of the opposite quote type (single enclosing double and vice versa).

Note:Many browsers do not support autogenerated content.

Once you define the quotes, you can use them along with the :before and :after pseudo-elements, as in the following example:

blockquote:before { content: open-quote; } blockquote:after { content: close-quote; }

The open-quote and close-quote words are shortcuts for the values stored in the quotes property. Technically, you can place just about anything in the content property because it also accepts string values. The next section shows you how you can use the content property to create automatic counters.

Note:When using string values with the content property, be sure to enclose the string in quotes. If you need to include newlines, use the A placeholder.

Numbering elements automatically
One of the nicest features of using the content property with counters is the ability to automatically number elements. The advantage of using counters over standard lists is that counters are more flexible, enabling you to start at an arbitrary number, combine numbers (for example,) and so on.

The counter object
A special object can be used to track a value and can be incremented and reset by other style operations. The counter object has this form when used with the content property, as in the following:

content: counter(counter_name);

This has the effect of placing the current value of the counter in the content object. For example, the following style definition will display “Chapter” and the current value of the “chapter” counter at the beginning of each <h1> element:

h1:before { content: “Chapter ” counter(chapter) “ ”; }

Of course, it’s of no use to always assign the same number to the :before pseudo-element. That’s where the counter-increment and counter-reset objects come in.

Changing the counter value
The counter-increment property takes a counter as an argument and increments its value by one. You can also increment the counter by other values by specifying the value to add to the counter after the counter name. For example, to increment the chapter counter by 2, you would use this definition:

counter-increment: chapter;

Tip: You can increment several counters with the same property statement by specifying the additional counters after the first, separated by spaces. For example, the following definition will increment the chapter and section counters each by 2:

counter-increment: chapter section;

You can also specify negative numbers to decrement the counter(s). For example, to decrement the chapter counter by 1, you could use the following:

counter-increment: chapter -1;

The other method for changing a counter’s value is by using the counter-reset property. This property resets the counter to zero or, optionally, an arbitrary number specified with the property. The counter-reset property has the following format:

counter-reset: counter_name [value];

For example, to reset the chapter counter to 1, you could use this definition: counter-reset: chapter ;

Tip:You can reset multiple counters with the same property by specifying all the counters on the same line, separated by spaces.

Note that if a counter is used and incremented or reset in the same context (in the same definition), the counter is first incremented or reset before being assigned to a property or otherwise used.

Chapter and section numbers
Using counters, you can easily implement an auto-numbering scheme for chapters and sections. To implement this auto-numbering, use <h1> elements for chapter titles and <h2> elements for sections. We will use two counters, chapter and section, respectively.

First, you need to set up your chapter heading definition, as follows:

h1:before {content: “Chapter ” counter(chapter) “: ”; counter-increment: chapter; counter-reset: section; }

This definition will display “Chapter chapter num:” before the text in each <h1> element. The chapter counter is incremented and the section counter is reset—both of these actions take place prior to the counter and text being assigned to the content property. So, the following text would then result in the output shown:

<h1>First Chapter</h1><h1>Second Chapter</h1><h1>Third Chapter</h1>

Auto-numbering <h1> elements.

Auto-numbering <h1> elements

The next step is to set up the section numbering, which is similar to the chapter numbering:

h2:before {content: “Section ” counter(chapter) “.” counter(section) “: ”; counter-increment: section;

Now the styles are complete. The final following code results in the display:

The completed auto-numbering system does both chapters and sections.

The completed auto-numbering system does both chapters and sections.

Tip:The counters should automatically start with a value of 0. In this example, that is ideal. However, if you need to start the counters at another value, you can attach resets to a higher tag (such as <body>), as in the following example:

body:before {counter-reset: chapter section;}

Custom list numbers
You can use a similar construct for custom list numbering. For example, consider the following code, which starts numbering the list at 20:

Note that the <ol> tag resets the counter to 19 due to the way the counterincrement works (it causes the counter to increment before it is used). So you must set the counter one lower than the first occurrence.

Tip: You can have multiple instances of the same counter in your documents, and they can all operate independently. The key is to limit each counter’s scope: A counter’s effective scope is within the element that initialized the counter with the first reset. In the example of lists, it is the <ol> tag. If you nested another <ol> tag within the first, it could have its own instance of the list counter, and they could operate independently of each other.

All rights reserved © 2020 Wisdom IT Services India Pvt. Ltd Protection Status

HTML Topics