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

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

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…

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

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:"

Also

illuminated letters

Florian suggested

lettrine

so maybe

lettrine-style (or lettrine-somethingelse?)

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

@jensimmons

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

@astearns

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?

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

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.

@wjmoner

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. :)

@AmeliaBR

@AmeliaBR WFM

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.

@Crissov

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

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

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

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

@AmeliaBR

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

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-*

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

RESOLVED: Stay with the name initial-letter

Navigation Menu

Repository navigation

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

Selector

Properties

Relevant to this discussion:

8 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

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

Description

Activity

jensimmons commented on Jul 25, 2018

dauwhe commented on Jul 25, 2018

jensimmons commented on Jul 25, 2018

jensimmons commented on Jul 25, 2018

fantasai commented on Jul 25, 2018

astearns commented on Jul 25, 2018

fantasai commented on Jul 25, 2018

wjmoner commented on Jul 25, 2018

AmeliaBR commented on Jul 25, 2018

kgcreative commented on Jul 25, 2018

Selector

Properties

Relevant to this discussion:

fantasai commented on Jul 25, 2018

fantasai commented on Jul 25, 2018

Crissov commented on Jul 25, 2018

kgcreative commented on Jul 25, 2018

8 remaining items

jensimmons commented on Nov 14, 2018

jensimmons commented on Nov 14, 2018

Dan503 commented on Nov 14, 2018

jonjohnjohnson commented on Nov 15, 2018

Dan503 commented on Nov 15, 2018

css-meeting-bot commented on Jan 23, 2019

fantasai commented on Jun 3, 2020

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions