New issue
Advanced search Search tips

Issue 796072 link

Starred by 1 user

Issue metadata

Status: Available
Owner: ----
Components:
EstimatedDays: ----
NextAction: ----
OS: Mac
Pri: 3
Type: Feature



Sign in to add a comment

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

Reported by t...@tobireif.com, Dec 19 2017

Issue description

UserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/63.0.3239.108 Safari/537.36

Steps to reproduce the problem:
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.

What is the expected behavior?

What went wrong?
There's no option for outset strokes.

Did this work before? N/A 

Does this work in other browsers? N/A

Chrome version: 63.0.3239.108  Channel: stable
OS Version: OS X 10.13.2
Flash Version:
 

Comment 1 by t...@tobireif.com, Dec 19 2017

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

Comment 3 by t...@tobireif.com, Dec 19 2017

Note that this ticket / 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.
Labels: -Type-Bug Triaged-ET M-65 Type-Feature
Status: Untriaged (was: Unconfirmed)
As per comment #0 and #3, the issue seems to be a feature request. Hence, marking it as untriaged for further inputs from dev team.

Thanks...!!

Comment 5 by t...@tobireif.com, Dec 20 2017

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

Comment 6 by shend@chromium.org, Dec 20 2017

Labels: -Pri-2 Pri-3
Status: Available (was: Untriaged)
Project Member

Comment 7 by sheriffbot@chromium.org, Dec 21

Labels: Hotlist-Recharge-Cold
Status: Untriaged (was: Available)
This issue has been Available for over a year. If it's no longer important or seems unlikely to be fixed, please consider closing it out. If it is important, please re-triage the issue.

Sorry for the inconvenience if the bug really should have been left as Available.

For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot
Components: -Blink>CSS Blink>SVG
Status: Available (was: Untriaged)
Regarding "Components: Blink > SVG":
The feature "stroke-align:outset" applies to HTML text as well, not just SVG text and SVG shapes.

I hope that Blink/Chromium/Chrome will implement "stroke-align:outset" - single and multiple outside strokes for HTML text, and also for SVG text and shapes.

https://www.w3.org/TR/fill-stroke-3/#propdef-stroke-align

Outside strokes:
https://www.w3.org/TR/fill-stroke-3/#propdef-stroke-align
"center | inset | outset"

Multiple strokes:
https://www.w3.org/TR/fill-stroke-3/#stroke-layering
"The stroke of a box can have multiple layers. The number of layers is determined by the larger of the number of comma-separated values for the stroke-image property and the number of comma-separated values for the stroke-color property."

Sign in to add a comment