[ Pobierz całość w formacie PDF ]
The more general of the two mechanisms is new in CSS2 and is called
markers. The more limited mechanism involves the list [p. 168] properties of
CSS1. The list properties give authors quick results for many common ordered
and unordered list scenarios. However, markers give authors precise control over
marker content and position. Markers may be used with counters [p. 160] to
163
create new list styles, to number margin notes, and much more.
For instance, the following example illustrates how markers may be used to
add periods after each numbered list item. This HTML program and style sheet:
!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
HTML
HEAD
TITLECreating a list with markers/TITLE
STYLE type="text/css"
LI:before {
display: marker;
content: counter(mycounter, lower-roman) ".";
counter-increment: mycounter;
}
/STYLE
/HEAD
BODY
OL
LI This is the first item.
LI This is the second item.
LI This is the third item.
/OL
/BODY
/HTML
should produce something like this:
i. This is the first item.
ii. This is the second item.
iii. This is the third item.
With descendant selectors [p. 56] and child selectors [p. 57] , it’s possible to
specify different marker types depending on the depth of embedded lists.
12.6.1 Markers: the ’marker-offset’ property
Markers are created by setting the ’display’ property to ’marker’ inside a :before
or :after pseudo-element. While ’block’ and ’inline’ :before and :after content is
part of the principal box [p. 97] generated by the element, ’marker’ content is
formatted in an independent marker box, outside the principal box. Marker boxes
are formatted as a single line (i.e., one line box [p. 105] ), so they are not as flexi-
ble as floats [p. 95] . The marker box is only created if the ’content’ property for
the pseudo-element actually generates content.
Marker boxes have padding and borders, but no margins.
For the :before pseudo-element, the baseline of text in the marker box will be
vertically aligned with the baseline of text in the first line of content in the principal
box. If the principal box contains no text, the top outer edge of the marker box will
be aligned with the top outer edge of the principal box. For the :after
pseudo-element, the baseline of text in the marker box will be vertically aligned
with the baseline of text in the last line of content in the principal box. If the princi-
pal box contains no text, the bottom outer edge of the marker box will be aligned
with the bottom outer edge of the principal box.
The height of a marker box is given by the ’line-height’ property. The :before
(:after) marker box participates in the height calculation of the principal box’s first
(last) line box. Thus, markers are aligned with the first and last line of an
element’s content, even though the marker boxes live in distinct line boxes. If no
164
first or last line box exists in a principal box, the marker box establishes its line
box alone.
The vertical alignment of a marker box within its line box is specified with the
’vertical-align’ property.
If the value of the ’width’ property is ’auto’, the marker box content width [p. 82]
is that of the content, otherwise it is the value of ’width’. For values of ’width’ less
than the content width, the ’overflow’ property specifies overflow behavior.
Marker boxes may overlap principal boxes. For values of ’width’ greater than the
content width, the ’text-align’ property determines the horizontal alignment of the
content in the marker box.
The ’marker-offset’ property specifies the horizontal offset between a marker
box and the associated principal box [p. 97] . The distance is measured between
their nearest border edges [p. 82] . Note. If a marker flows to the right of a float in
a left-to-right formatting context, the principal box will flow down the float’s right
side, but the marker boxes will appear to the left of the float. Since the principal
box left border edge lies to the left of the float (see the description of floats
[p. 108] ), and marker boxes lie outside the border edge of the principal box, the
marker will also lie to the left of the float. Analogous behavior applies for
right-to-left formatting when a marker flows to the left of a float.
When the ’display’ property has the value ’marker’ for content generated by an
element with ’display: list-item’, a marker box generated for ’:before’ replaces the
normal list item marker.
In the following example, the content is centered within a marker box of a fixed
width. This document:
!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
HTML
HEAD
TITLEContent alignment in the marker box/TITLE
STYLE type="text/css"
LI:before {
display: marker;
content: "(" counter(counter) ")";
counter-increment: counter;
width: 6em;
text-align: center;
}
/STYLE
/HEAD
BODY
OL
LI This is the first item.
LI This is the second item.
LI This is the third item.
/OL
/BODY
/HTML
should produce something like this:
(1) This is the
first item.
(2) This is the
second item.
(3) This is the
third item.
165
The next example creates markers before and after list items.
This document:
!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
HTML
HEAD
TITLEMarkers before and after list items/TITLE
STYLE type="text/css"
@media screen, print {
LI:before {
display: marker;
content: url("smiley.gif");
LI:after {
display: marker;
content: url("sad.gif");
}
}
/STYLE
/HEAD
BODY
UL
LIfirst list item comes first
LIsecond list item comes second
/UL
/BODY
/HTML
should produce something like this (ascii art is used instead of smiley gif
images here):
:-) first list item
comes first :-(
:-) second list item
comes second :-(
The next example uses markers to number notes (paragraphs).
The following document:
!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
HTML
HEAD
TITLEMarkers to create numbered notes4/TITLE
STYLE type="text/css"
P { margin-left: 12 em; }
@media screen, print {
P.Note:before
{
display: marker;
content: url("note.gif")
"Note " counter(note-counter) ":";
counter-increment: note-counter;
text-align: left;
width: 10em;
}
}
/STYLE
/HEAD
BODY
PThis is the first paragraph in this document./P
166
P CLASS="Note"This is a very short document./P
PThis is the end./P
/BODY
/HTML
should produce something like:
This is the first paragraph
in this document.
Note 1: This is a very short
document.
This is the end.
’marker-offset’
Value:
length | auto | inherit
Initial:
auto
Applies to:
elements with ’display: marker’
Inherited:
no
Percentages: N/A
Media:
visual
This property specifies the distance between the nearest border edges [p. 82]
of a marker box and its associated principal box [p. 97] . The offset may either be
[ Pobierz całość w formacie PDF ]