Drop Caps and Design Systems

Drop Caps and Design Systems(product.voxmedia.com)

57 points by willlll 7 years ago | 9 comments

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 7 years ago |

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 7 years ago | |

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 7 years ago | | |

: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

dredmorbius 7 years ago | |

It is, but browser implementations vary to an annoying degree.

dredmorbius 7 years ago |

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

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

Somewhat maddenning.