[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.

[kgcreative]

to build off of @Crissov

/* Shorthand */
{
initial-chars: dropped; /* = 3 3 */
initial-chars: sunken; /* = 3 2 */
initial-chars: raised; /* = 3 1 */
initial-chars: 4 2; /* height in number of lines, offset in number of lines */
}
/* Long form */
{
initial-chars-height: 3;
initial-chars-offset: 2;
}

initial-chars feels more descriptive to me than initial-letters

[AmeliaBR]

@Crissov

I'm not sure if the specific numbers you suggest are common enough to make default. But, I do like the idea of keywords dropped and raised for the two most common use-cases for the second property. (I personally find it confusing that you need to specify a "drop" of 1 for not-dropped-at-all.)

[property-name]: 3 dropped;
[property-name]: 2 raised;

dropped would still be the default, and any other levels of sunken-ness could still be set with integer values.

This is maybe a separate issue, though.

[Dan503]

@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.

What's to say that this isn't a possibility in the future?

Remember how we started off with grid-gap but then everyone said that they wanted grid-gap in flexbox? The name grid-gap didn't make sense in flexbox though so it was changed to just gap.

That was a mess that we would have preferred to avoid.

Naming a property based on what restrictions the current spec has on it isn't future proofing the property. If we want to extend this functionality to floated images (something I can definitely see happening one day) we want a more generic property that will still make sense in that context.

That being said I LOVE the idea of line-span as the new name.

• It does exactly what you think it does
• we already have the line term in line-height and "line" means the same thing in both of them so I don't think it is going to get confused for anything
• span is the perfect term for how it behaves since it aligns with how we think of span in CSS Grid
• it is abstract enough to be used on anything if the spec changes in the future to allow it to be used in more contexts
• you don't need any graphic design hystory knowledge to understand the naming of the term
• it is easily translated into other languages
• it's super easy to spell and remember

I definitely 100% vote for line-span as the new property name. ❤

[bradkemper]

I’d never heard of lettrine and versals before either. “Lettrine” sounds too much “latrine” and is too easy to misspell. “Versal” is easier to spell and is nice and short, and doesn’t care about plural or not. But my autocorrect keeps trying to make it “vernal”. I’d be OK with it.

I prefer just “initial”, as it does seem more like the noun that way, and it is short. (Lettrine derives from Latin “initialis”, BTW, which means “standing at the beginning”, according to Wikipedia.)

[frivoal]

line-span seems OK with me (together with line-span-align and line-span-wrap).

I'd rather not keep initial in the name, as that about what it applies to rather than what it does, and that invites the confusion with selectors.

[fantasai]

I don't think we're going to extend this feature to span lines in the middle of the paragraph, so using initial somewhere in the name is probably fine. There are other features like warichu and ruby in Japanese that do interesting things with line layout, but they're different enough that they'd need a different layout mechanism. So applying only to the first item in a paragraph is a restriction that, afaict, we're going to keep.

I would lean towards @AmeliaBR’s proposal therefore, because I think it's clearer about that aspect (and leaves open such generic words as line-span for things like warichu, if we go down that path). line-span seems just too generic for something that very specifically applies only to ::first-letter and pretenders.

[Wrt history: earlier grid proposals shared row-gap with e.g. multicolumn layout, so there was already a sense of wanting to share that--it was a mistake (mine) to later make it grid-specific.]

[bradkemper]

How about big:? It always makes the letter bigger.

[bradkemper]

Or big-letter. I prefer the singular, since it is primarily a single letter, even though there can sometimes be punctuation too. If we had big-text Or even line-span makes it sound (to me) like something that could apply to any range of text or inline element.

[jensimmons]

Looking at this fresh, I feel like we are struggling to make initial work in any sort of way, and it's just not working. CSS Properties are descriptive of the change that the property will make (like font-size), and not of the motivation for making the change (not 'readable-type). Initial ends up sounding like an adjective, and gets easily confused with first-letter`. It doesn't come across as a noun.

I like what line-span does — it describes the context, affecting lines, and the result, setting a span across several lines. But as many have argued, span could be easily confused with its other meanings in HTML & CSS.

What if we try to find other words to do what line-span would do. Synonyms for "span" include:
interval
length
period
space
spell
stretch
term
amount
compass
extent
measure
reach
spread
time

line-spread?
line-reach?
character-spread?
???

Then you'd end up with
character-spread-align
character-spread-wrap
or
line-reach-align
line-reach-wrap
or something down this road...

[jensimmons]

Actually, I think line-reach is confusing reading it back.
character-reach and line-spread are better first rough thoughts.

[Dan503]

Don't go with character-*. "character" suggests the inline (horizontal) direction whereas "line" suggests the block (vertical) direction.

This property is all about the vertical/block direction so we should use line-*. Whatever the name ends up being the first word of that name should be "line".

Out of the possible second words you provided, I like these possibilities:

• line-interval
• line-stretch
• line-extent
• line-reach

[jonjohnjohnson]

As @AmeliaBR says...

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.

@Dan503 I think resorting to the use of a generic line- prefix will always leave authors wanting. Especially when we've already taught them line-height as something that doesn't solely apply to these "initial letters".

[Dan503]

Ah yes, that's a good point. Maybe not line-* then. 🤔

In that case we should think of what all the possible names for that first big letter could be.

These are names I can think of:

• cap-*
• drop-*
• principle-*
• prominent-*
• lead-*
• hero-*
• first-*
• giant-*
• giga-*
• mega-*
• boss-*
• master-*
• booster-*
• pro-*
• chief-*

[css-meeting-bot]

The CSS Working Group just discussed better name for initial-letters property.

The full IRC log of that discussion

<dael> Topic: better name for initial-letters property
<dael> github: https://github.com//issues/2950#issuecomment-438736819
<dael> jensimmons: As issue says we're debating a name. Kinda hit me is a way to approach is desc what this does. I wrote some stuff, but I disagree with myself.
<dael> jensimmons: Right now I'm thinking maybe line-span is a poss. I originally rejected because span is in the html, but there's em in html and em unit in CSS and that's never confused.
<dael> fantasai: Okay with that
<dael> jensimmons: Made me wonder if you can do more than make a letter big. Like if you had an image would it do anything?
<dael> fantasai: Yes, if you apply to an atomic element it will apply. There is text on how this works with inline blocks and images.
<dael> astearns: Def. intended to work in that case
<dael> fantasai: I think that was my favorite from the list
<dael> astearns: Other opinions?
<dael> dauwhe: Plausable to me
<AmeliaBR> But to clarify: it still only applies to the first element of a block? So that's the bit that isn't conveyed by the name.
<dael> bradk: line-span makes it sound like it would be any inline element and it would span the line. That was my concern
<dael> jensimmons: Agree we need to think about that
<dael> astearns: Table this for now and get to it at F2F. Let's try and get to this on the first day to make sure we give it needed time

[fantasai]

RESOLVED: Stay with the name initial-letter