Implement "stroke-align:outset" - single and multiple outside strokes for text

• Component: CSS
• Status: NEW ---

[Tobi Reif]

We need outside strokes for text, because the current centered strokes are not pretty - the intrude the font fill.

An image illustrating how centered strokes aren't pretty / don't do what typically is intended (leaving the fill of the font unaffected): 
https://twitter.com/TobiReif/status/942805851017969664

I hope you will implement stroke-align:outset.

[Tobi Reif]

It's being specified at https://www.w3.org/TR/fill-stroke-3/#propdef-stroke-align .

[Tobi Reif]

Note that this ticke / my request is only regarding "stroke-align:outset" for text.

At first, having the "outset" option for nothing but text (HTML and ideally also SVG) would be sufficient from my point of view. It would be a great start regarding implementation of that feature, as most people who need this option do need it for text (I'm pretty sure).

Supporting "outset" for SVG paths etc can then get considered later.

Having "outset" for text strokes is overdue by many many years - it should've been the default all along. Designers/developers almost never want (or expect) the stroke(s) to intrude the glyphs / to take away from the fill of the glyphs.

I (and many others) need this feature. eg:

Chris Coyer (of Codepen and css-tricks.com) in 2010 (seven years ago):
https://css-tricks.com/adding-stroke-to-web-text/
"Only outside text stroke alignment looks any good at all to me. It's unfortunate, both for CSS and for Illustrator, that the unchangeable default is centered."

https://stackoverflow.com/questions/26634201/add-stroke-around-text-on-the-outside-with-css
"Add stroke around text - on the outside - with css?"
"The -webkit-text-stroke doesn't support placing the stroke on the outside of the text"

https://stackoverflow.com/questions/17484262/css-webkit-text-stroke-but-stroke-covers-font-color
"Why [is] the webkit-text-stroke [...] covering [...] the font color?"

https://css-tricks.com/text-stroke-stuck-middle/
"When you set a stroke straddled over the designed edge of a character, you're losing the integrity of the shape."
"And that's the trouble with text-stroke in CSS: you have no choice. It's center-aligned stroke only."

Also, bad workarounds exist.

We need a solution.

[Tobi Reif]

BTW, supporting "stroke-align:outset" only for non-transparent colors (at first) would be fine with me.

[Tobi Reif]

I still hope that Safari will implement "stroke-align:outset" so that we can have single and multiple outside strokes for text.

[Brent Fulgham]

Feature request.

[Radar WebKit Bug Importer]

<rdar://problem/97093437>