[CSS2.1] :first-letter

S5.12.2<http://www.w3.org/TR/2003/WD-CSS21-20030915/selector.html#first-letter>

Constitution
------------

# Punctuation (i.e, characters defined in Unicode [UNICODE] in the
# "open" (Ps), "close" (Pe), and "other" (Po) punctuation classes),
# that precedes the first letter should be included, as in:

What about punctuation immediately following the first letter?
Imagine the following with a drop-caps effect:

   M. Lafayette ést parti de France...

   É? Nín shūo shénme? Wǒ tīng bù dǒng. Qĭng nín...

   "A" is the first letter of the alphabet. Remarkably consistent
    across scripts, it...

There's also this degenerate case to consider:

    "_", the underscore, was used on typewriters...

The first *letter* is 't', but surely it should not be part of the
:first-letter pseudo-element.

And what of numbers? They're not letters, but...

    67 million dollars is a lot of money.

Should :first-letter hold the '6' or the 'm'?

Language-Specific Requirements
------------------------------

# Some languages may have specific rules about how to treat certain
# letter combinations. In Dutch, for example, if the letter
# combination "ij" appears at the beginning of a word, both letters
# should be considered within the :first-letter pseudo-element.

The UA requirents wrt such combinations should be, IMO, more clearly
expressed.


S5.12.3<http://www.w3.org/TR/2003/WD-CSS21-20030915/selector.html#before-and-after>

Before and After
----------------

# When the :first-letter and :first-line pseudo-elements are combined
# with :before and :after, they apply to the first letter or line of
# the element including the inserted text.
#
# Example(s):
#
# p.special:before {content: "Special! "}
# p.special:first-letter {color: #ffd800}
#
# This will render the "S" of "Special!" in gold.

/I/ think it should render the first letter of the paragraph itself
in gold. Here's why:

   H1:before {content:counter(chapno, upper-roman) ". "}
   :first-letter {font-size: larger; color: #ffd800;}

   <h1>Planes in Spain</h1>

If this gives me

    XII. Planes in Spain

I would want the P in "Plane" to be affected, not the X in "XII".

Not good enough? Try this:

   BODY { margin-left: 8.5em; }

   P { text-indent: 5%; }

   :first-letter { font-size: larger;
                   color: #ffd800; }

   P.note:before { content: "Note:";
                   margin-left: -8em;
                   width: 7.5em;
                   float: left;
                   color: green; }

   DIV.example:before { content: "Example";
                        display: block;
                        margin: 0.5em;
                        margin-left: -2em;
                        font-weight: bold; }

Is it better that the N in "Note:" be gold or the first letter of the
note itself?
Is it better that the E in "Example" be gold or the first letter of
the example's text?

<http://fantasai.inkedblade.net/style/demos/first-letter/www-style>

If I specifically want to make the N in "Note:" bigger, I should be
able to do this:

   P.note:before:first-letter { font-size: 110%; }

/That/ makes sense.

(":first-letter:before", though, does not.)

~fantasai

Received on Saturday, 11 October 2003 03:21:03 UTC