
Drop Caps and Design Systems - willlll
https://product.voxmedia.com/2019/6/17/18524029/the-ballad-of-drop-caps-and-design-systems
======
johnnyAghands
Very interesting read, aside from the issue at hand, I was really drawn to how
they pulled off this kind of change in a giant org with many heads. Routinely,
the root issue is easily addressable, however, it's a different story when
it's something that's cross org. Usually you hit a wall and can't move forward
without a consensus and some kind of org wide champion.

At the end of the day the process this team followed has all the hallmarks of
a great culture (-- perhaps another article?). I'm curious what kind of
management by-in was required, or if this was strictly driven by engineering
and design.

God -- It really shows I've been in an enterprise for far too long. :,)

------
dusted
Breaks normal in-browser search, at least for me. Since dropcap is an
established layout element, maybe it should be a style property instead, so
that the browser can render it correctly and also allow for search.

~~~
sago
I don't think it needs a new style. [Edit: I'm wrong, see reply below]. There
is a CSS pseudo-element ::first-letter, which you can format and align as you
wish. In the article they try to use this, but run afoul of the fact that
different rendering engines disagree on how exactly it should be converted
into a (CSS) box. In my experience you can get a lot further without having to
use spans, but I also couldn't make it perfect.

I suspect it's just ultra low priority for folks making rendering engines. It
doesn't make a lot of sense for web typography, and to me looks just downright
daft if you're not going to pull in and accentuate the start of the first
line, or if you're going to separate your paragraphs with blank lines. My
personal feelings only of course, but it feels like a bastardisation between
different eras of typography.

~~~
gsnedders
:first-letter doesn't actually suffice to make good initial letters, either as
implemented or as spec'd.

The initial-letters CSS property (maybe to be renamed?) is the future solution
to this, and that should work fine with search. See
[https://drafts.csswg.org/css-inline/#initial-letter-
styling](https://drafts.csswg.org/css-inline/#initial-letter-styling)

~~~
sago
Can you say more what you mean by 'doesn't suffice'? There are certainly some
forms of typographic initial I know it can't do. But if it worked
consistently, it would be sufficient to achieve the effect that the article is
attempting, wouldn't it?

Thanks for the link. I had no idea it was an active proposal.

~~~
gsnedders
Without knowledge of the fonts used, you can't get both ascender line and
baseline aligned with respective lines of content, which is the traditional
way of doing drop caps.

Sure, with web fonts and assumptions that the font always successfully loads
and covers all graphemes in the text you can hardcode lengths to achieve
proper alignment, but that's still a bit fragile.

~~~
DougBTX
The implementation in the article still used hard-coded lengths, perhaps this
could have been fixed without the extra markup after all.

------
dredmorbius
I'm a fan of drop caps as a visual element -- they, along with a bolded lede
line, very much help draw the eye to section starts, in a way which is very
nondistraction (IMO).

A recent example, adding drop caps (and a number of other styling changes) to
unv.is:

[https://mastodon.cloud/@dredmorbius/102329333215634483](https://mastodon.cloud/@dredmorbius/102329333215634483)

Because I'm restyling a page, that's restricted to CSS-only methods, which for
that site works marvelously. And on the principle of divorcing content and
presentation, it appeals strongly.

But on Wikipedia/Mediawiki, attempting to add drop-caps + bold lede-line
results in a very annoying sift of the text offset by the drop cap *merely by
defining a selector for ::first-line (Firefox/OSX):

[https://mastodon.cloud/@dredmorbius/102329661015728246](https://mastodon.cloud/@dredmorbius/102329661015728246)

Somewhat maddenning.

