[css-inline] Summary of drop-caps/initial-letters discussion

 From the F2F whiteboard... (plus a few extra notes from me)

initial-letters: normal | <integer>{1,2}
applies to ::first-letter or the inline-level first child of a block container

   - First integer represents the size of the letter (as N lines with N-1 gaps)

   - Second integer represents how many lines deep the letter sinks
     into the paragraph.

   - Omitted second integer defaults to copying first integer.

   - Integers must be > 0.

   - Glyph ink overflowing its bounding box is excludes text
     in both dimensions.

   - Be sure to handle non-alphabetic baselines correctly.

   - Subsequent paragraphs starting with normal text wrap,
     just like subsequent lines in the same paragraph.
     If a subsequent paragraph starts with non-normal letters,
     then it must clear the previous paragraph's dropped letters.

   - Subsequent BFCs must clear any dropped letters.

   - Note: text-indent and hanging-punctuation still apply to the
     dropped text.

   + Applying to a multi-word inline first-child will format all
     the letters inside that inline.
     If the inline wraps, it will not break the baseline table,
     since it's sized to cover exactly N lines; this needs to be
     specified clearly.

   + Applying to an atomic inline first-child will size and
     position the box accordingly.
     This can be used for, e.g. SVG illuminated caps.

   + CSS Inline will define how to synthesize baseline tables for
     atomic inlines. Might also define properties to explicitly
     specify such a baseline table.

Examples:

   initial-letters: 3; /* or initial-letters: 3 3; */
   represents a drop-cap 3 lines high, 3 lines deep

   initial-letters: 3 2;
   represents a sunken cap 3 lines high, 2 lines deep

   initial-letters: 3 1;
   represents an initial cap 3 lines high, 1 line deep

Credit to hober for the <integer>{1,2} syntax!

~fantasai

Received on Tuesday, 20 May 2014 06:30:51 UTC