CSS: The Definitive Guide, 3rd Edition (57 page)

There is one other thing you can do to influence the
appearance of list items under CSS2.1: decide whether the marker appears outside or
inside the content of the list item. This is accomplished with
list-style-position
.

If a marker's position is set to
outside
(the
default), it will appear the way list items always have on the Web. Should you desire
a slightly different appearance, though, you can pull the marker in toward the
content by setting the value to
inside
. This
causes the marker to be placed "inside" the list item's content. The exact way this
happens is undefined, but
Figure 12-5
shows one possibility:

li.first {list-style-position: inside;}
li.second {list-style-position: outside;}

Figure 12-5. Placing the markers inside and outside list items

For brevity's sake, you can combine the three list-style properties into a
convenient single property:
list-style
.

For example:

li {list-style: url(ohio.gif) square inside;}

As you can see in
Figure 12-6
, all
three values are applied to the list items.

Figure 12-6. Bringing it all together

The values for
list-style
can be listed in any
order, and any of them can be omitted. As long as one is present, the rest will fill
in their default values. For instance, the following two rules will have the same
visual effect:

li.norm {list-style: url(img42.gif);}
li.odd {list-style: url(img42.gif) disc outside;} /* the same thing */

They will also override any previous rules in the same way. For example:

li {list-style-type: square;}
li.norm {list-style: url(img42.gif);}
li.odd {list-style: url(img42.gif) disc outside;} /* the same thing */

The result will be the same as that in
Figure
12-6
because the implied
list-style-type
value of
disc
for the rule
li.norm
will override the previous declared value of
square
, just as the explicit value of
disc
overrides it in rule
li.odd
.

Now that we've
looked at the basics of styling list markers, let's consider how lists are laid out
in various browsers. We'll start with a set of three list items devoid of any markers
and not yet placed within a list, as shown in
Figure 12-7
.

Figure 12-7. Three list items

The border around the list items shows them to be, essentially, like a block-level
element. Indeed, the value
list-item
is defined to
generate a block box. Now let's add markers, as illustrated in
Figure 12-8
.

Figure 12-8. Markers are added

The distance between the marker and the list item's content is not defined by CSS,
and CSS2.1 does not provide a way to affect that distance. Interestingly, CSS2 does,
which is a subject briefly covered in the sidebar "
List-Marker Positioning
."

With the markers outside the list items' content, they don't affect the layout of
other elements, nor do they really even affect the layout of the list items
themselves. They just hang a certain distance from the edge of the content, and
wherever the content edge goes, the marker will follow. The behavior of the marker
works much as though the marker were absolutely positioned in relation to the
list-item content, something like
position
:
absolute; left
:
-1.5em;
. When the marker is inside, it acts like an inline element at
the beginning of the content.

So far, you have yet to add an actual list container; in other words, there is
neither a
ul
nor an
ol
element represented in the figures. You can add one to the mix, as
shown in
Figure 12-9
(it's represented by
a dashed border).

Figure 12-9. Adding a list element

Like the list items, the list element is a block box, one that encompasses its
descendant elements. As you can see, however, the markers are not only placed outside
the list item contents, but also outside the content area of the list element. The
usual "indentation" you expect from lists has not yet been specified.

Most browsers, as of this writing, indent list items by setting either padding or
margins for the containing list element. For example, the user agent might apply a
rule such as:

ul, ol {margin-left: 40px;}

This is the rule employed by Internet Explorer and Opera (see
Figure 12-9
). Most Gecko-based browsers, on
the other hand, use a rule like this:

ul, ol {padding-left: 40px;}

Neither is incorrect, but the discrepancy can lead to problems if you want to
eliminate the indentation of the list items.
Figure 12-10
shows the difference between the two approaches.

Figure 12-10. Margins and padding as indentation devices

For authors who want to change the indentation distance of lists, I strongly
recommend that you specify both padding and margins to ensure cross-browser
compatibility. For example, if you want to use padding to indent a list, use this
rule:

ul {margin-left: 0; padding-left: 1em;}

If you prefer margins, write something like this instead:

ul {margin-left: 1em; padding-left: 0;}

In either case, remember that the markers will be placed relative to the contents
of the list items, and may therefore "hang" outside the main text of a document, or
even beyond the edge of the browser window.

Figure 12-11. Generating text content

Figure 12-12. Generating icons

• If the subject of a
  :before
or
  :after
selector is a block-level element, then the
  property
  display
can accept only the values
  none
,
  inline
,
  block
, and
  marker
. Any other value is treated as
  block
.
  

• If the subject of a
  :before
or
  :after
selector is an inline-level element, then
  the property
  display
can accept only the
  values
  none
and
  inline
. Any other value is treated as
  inline
.
  

Figure 12-13. Generating block-level content

Figure 12-14. Taking placement into account

Figure 12-15. Changing the generated content to be inline

content

Figure 12-16. Strings are displayed verbatim

Figure 12-17. Inserting and suppressing newlines

As of this writing, support for inserting escaped content
such as
\A
and
\00AB
is not very widespread, even among
those browsers that support some generated content.

There
are situations where you might want to take the value of an element's attribute
and make it a part of the document display. To pick a simple example, you can
place the value of every link's
href
attribute
immediately after the links, like
this:

a[href] {content: attr(href);}

Again,
this leads to the problem of the generated content running smack into the actual
content. To solve this, add some string values to the declaration, with the result
shown in
Figure
12-18
:

a[href] {content: " [" attr(href) "]";}

Figure 12-18. Inserting URLs

This can be useful for print style sheets, as an example. Any
attribute value can be inserted as generated content:
alt
text,
class
or
id
values—anything. An author might choose to make
the citation information explicit for a block quote, like
this:

blockquote:after {content: "(" attr(cite) ")"; display: block;
text-align: right; font-style: italic;}

For
that matter, a more complicated rule might reveal the text- and link-color values
for a legacy
document:

body:before {content: "Text: " attr(text) " | Link: " attr(link)
" | Visited: " attr(vlink) " | Active: " attr(alink);
display: block; padding: 0.33em;
border: 1px solid black; text-align: center;}

Note
that if an attribute doesn't exist, an empty string is put in its place. This is
what happens in
Figure 12-19
, in
which the previous example is applied to a document whose
body
element has no
alink
attribute.

Figure 12-19. Missing attributes are skipped

The text "Active: " (including the trailing space) is inserted into
the document, as you can see, but there is nothing following it. This is
convenient in situations where you want to insert the value of an attribute only
when it exists.

A specialized form of generated content is the
quotation mark, and CSS2.x provides a powerful way to manage both quotes and their
nesting behavior. This is possible due to the pairing of content values like
open-quote
and the property
quotes
.

Upon studying the value syntax, we find that other than the keywords
none
and
inherit
, the only valid value is one or more
pairs
of strings. The first string of the pair defines the open-quote symbol, and the
second defines the close-quote symbol. Therefore, of the following two
declarations, only the first is
valid:

quotes: '"' "'";  /* valid */
quotes: '"';  /* NOT VALID */

The
first rule also illustrates one way to put string quotes around the strings
themselves. The double quotation marks are surrounded by single quotation marks,
and vice versa.

Let's look at a simple example. Suppose you're
creating an XML format to store a list of favorite quotations. Here's one entry in
the
list:

I hate quotations.
Ralph Waldo Emerson

To
present the data in a useful way, you could employ the following rules, with the
result shown in
Figure
12-20
:

quotation: display: block;}
quote {quotes: '"' '"';}
quote:before {content: open-quote;}
quote:after {content: close-quote;}
quotee:before {content: " (";}
quotee:after {content: ")";}

Figure 12-20. Inserting quotes and other content

The values
open-quote
and
close-quote
are used to insert whatever quoting
symbols are appropriate (since different languages have different quotation
marks). They use the value of quotes to determine how they should work. Thus, the
quotation begins and ends with a double quotation mark.

If you want to
use "curly quotes" instead of the plain vertical-line quotation marks, as is
common in most print media, the
quote
rule
would
read:

quote {quotes: '\201C' '\201D';}

This
uses the hexadecimal Unicode positions for the "curly quote" symbols and, if
applied to the previous quotation, would surround Emerson's quote with curly
quotes instead of the straight quotes in
Figure 12-20
.

With
quotes
, you can define quotation patterns to as many nesting levels as
you like. In English, for example, a common practice is to start out with a double
quotation mark, and a quotation nested inside the first one gets single quotation
marks. This can be recreated with "curly" quotation marks using the following
rules:

quotation: display: block;}
quote {quotes: '\201C' '\201D' '\2018' '\2019';}
quote:before, q:before{content: open-quote;}
quote:after, q:after {content: close-quote;}

When
applied to the following markup, these rules will have the effect shown in
Figure
12-21
:

 In the beginning, there was nothing. And God said: Let there
be light! And there was still nothing, but you could see it.

Figure 12-21. Nested curly quotes

In a case where the nested level of quotation marks is greater than
the number of defined pairs, the last pair is reused for the deeper levels. Thus,
if you had applied the following rule to the markup shown in
Figure 12-21
, the inner quote would have
had double quotation marks, the same as the outer
quote:

quote {quotes: '\201C' '\201D';}

Generated
quotes make possible one other common typographic effect. In situations where
there are several paragraphs of quoted text, the
close-quote
of each paragraph is often omitted; only the opening
quote marks are shown, with the exception of the last paragraph. This can be
recreated using the
no-close-quote
value:

blockquote {quotes: '"' '"' "'" "'" '"' '"';}
blockquote p:before   {content: open-quote;}
blockquote p:after  {content: no-close-quote;}

This
will start each paragraph with a double quotation mark but no closing mark. This
is true of the last paragraph as well, so if you need to add a closing quote mark,
you'd need to class the final paragraph and declare a
close-quote
for its
:after
content.

This value is important because it decrements the quotation
nesting level without actually generating a symbol. This is why each paragraph
starts with a double quotation mark, instead of alternating between double and
single marks until the third paragraph is reached.
no-close-quote
closes the quotation nesting at the end of each
paragraph, and thus every paragraph starts at the same nesting
level.

This is significant because, as the CSS2.1 specification notes,
"Quoting depth is independent of the nesting of the source document or the
formatting structure." In other words, when you start a quotation level, it
persists across elements until a
close-quote
is
encountered, and the quote nesting level is decremented.

For the sake
of completeness, there is a
no-open-quote
keyword, which has a symmetrical effect to
no-close-quote
. This keyword increments the quotation nesting level by
one but does not generate a symbol.