Implement "stroke-align:outset" - single and multiple outside strokes for text
Reported by
t...@tobireif.com,
Dec 19 2017
|
|||||||
Issue descriptionUserAgent: 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:
,
Dec 19 2017
,
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.
,
Dec 20 2017
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...!!
,
Dec 20 2017
BTW, supporting "stroke-align:outset" only for non-transparent colors (at first) would be fine with me.
,
Dec 20 2017
,
Dec 21
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
,
Dec 21
,
Dec 22
,
Dec 31
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 |
|||||||
Comment 1 by t...@tobireif.com
, Dec 19 2017