[css-inline] better name for initial-letters property

[dauwhe]

People have been confused that the initial-letters property sounds more like a selector than a property that changes the rendering of text. Let the bikeshedding begin!

Some possibilities:

• lettrine
• dropcap
• initial-cap

Constraints:

• reflect what it does, rather than what it affects
• be meaningful for all writing systems
• also make sense on digraphs/words

Spec link

[jensimmons]

I dropped a question about this on Twitter, to see what people might say:
https://twitter.com/jensimmons/status/1022155415239450625

It seems the crux of the problem is that Initial Letter (a graphic design term, used along with Drop Cap, where Initial means big text that sits on the baseline and rises above the rest of the text, where Drop Cap drops down into the text) — the word "Initial" in graphic design is a noun. And yet, when it's used in CSS, it seems like an adjective.

Ideas (first mine, second from Twitter):

• initial
• line-span

p::first-letter { initial: 5; }
p::first-letter { initial: 5 1; }
p::first-letter { line-span: 4; }

I wonder how line-span works in the world of words block, inline, span…

[dauwhe]

Wikipedia uses initial, which is probably the most accurate term in English.

Something about line-span makes me worry about confusion with the html element

[jensimmons]

I dropped this into a Slack channel and got a variety of suggestions:

• initial-ornaments
• initial-symbols
• text-initials

This discussion raised questions like "What about characters? Does it have to be text?
I mean... are numbers text? :thinking_face:"

[jensimmons]

Also

• illuminated letters

[fantasai]

Florian suggested

• lettrine

so maybe

• lettrine-style (or lettrine-somethingelse?)

[astearns]

versals or initials would be accurate terms. While versals isn't in common use, it is relatively easy to spell

[fantasai]

So maybe (to borrow from @jensimmons suggestion, which seems to work for the relevant value space) lettrine-span or versal-span?

[wjmoner]

I agree with @astearns about using initials, and I like the idea of using span. I'll suggest initial-decoration as a binary with initial-span as a numeric variable.

initial-decoration could also have a list of values
initial-decoration: 1 4 600 to correspond to chars, vertical-size(is this initial span), font-weight

maybe?

[AmeliaBR]

Unless the plan is to extend this property to apply beyond first child or first pseudo-element in a block, I think it is useful to preserve the initial- (or initials-) prefix for the properties.

However, I agree that the suffix -letter (or -letters, as it is currently spec'd) does not make sense for the primary property, which isn't defining a letter to use, it's defining a number of lines to span and to drop.

I would argue against the following suggestions:

• lettrine, versals : obscure terms. I'd have no idea what these words meant if they weren't part of this discussion. I'd probably have a hard time remembering how to spell either, and my browser dictionary tells me that the correct spellings are incorrect.

• -ornaments, -decoration: imply something added to the text, not just text sizing changes.

• dropcap: implies that the "dropping" part is essential. (And maybe isn't very easily translated to languages that don't have capitalization?)

• line-span: would be nice if the property actually applied to any element (like a floated image), but it doesn't communicate the "initial" restrictions in the spec. And line-span-align, line-span-wrap are just confusing.

I think initial(s)-line-span is clear, if long. Or initials-span, with the s required to prevent span from being read as a noun. Alternatives: initials-scale or initials-expansion, but those don't cover the "drop" half of the property as effectively.

The other properties would just be initials-align, initials-wrap.

(Sadly, there is no potential for an initials shorthand so long as the alignment properties are inherited and the sizing one is not. If there was an interest in changing the inheritance to create an overall shorthand, though, then the main property could be decomposed into initial-scale vs initial-drop, where -drop has auto as a default.)

[kgcreative]

Found this conversation via Jen Simmon's tweet. Here to provide a bit of context on how we approached drop caps in old-school (pre-internet) typography, and hopefully to help guide this discussion a bit from that context.

Selector

• Drop-caps (or Versals) were a property of paragraph styles, generally denoting the first paragraph in a chapter or section.
• In this case, the selector wouldn't apply to just the first letter of a paragraph, but it should be a property of a span or a block level element (p, or div), and could be applied with p:first-child, p:first-of-type, p:nth-child(), etc.

Properties

Versals generally had two parameters:

• Number of characters: (First (n) character(s) in a paragraph, or first (n) word(s)) in a paragraph
• Character Height: How many lines did the Versal(s) take up.

Relevant to this discussion:

In this case, this seems to be a property that's being applied to the existing ::first-letter pseudo element, which makes the "number of characters" parameter moot.

In an ideal world, this would be styled as

p:[selector] {
   versal-line-span: 3;
   versal-char-span: 2;
}

because this is being applied to the ::first-letter pseudo element (or, in the future, I can imagine ::first-nth-letters(3)), then we can simply use:

::first-letter {
  line-span: 3;
}

From the context of typography, both of these approaches make sense to me.

[fantasai]

Hi @wjmoner and @kgcreative, there's a full spec for all the relevant properties and their syntax at https://drafts.csswg.org/css-inline-3/#initial-letter-styling ; we're just looking for a new property name. :)

[fantasai]

@AmeliaBR WFM

[Crissov]

Iʼd like to approach this with non-existing keywords for the most common cases in mind. These sound reasonable to me:

selector {
  text-initial: dropped;   line-initial: dropped;   initial: dropped;   /* = 3 3 */
  text-initial: sunken;    line-initial: sunken;    initial: sunken;    /* = 3 2 */
  text-initial: raised;    line-initial: raised;    initial: raised;    /* = 3 1 */
} 

In particular, line-span, which I liked initially, makes no sense this way.