Description
Hi FX TF, CSS WG, etc!
We have text stroke properties, eg
https://twitter.com/jensimmons/status/822479461836853249
but there's an issue: eg in the demo (linked in the above tweet)
http://codepen.io/jensimmons/pen/EZWeeb?editors=1100
when you set the text-stroke-width to eg 10px, you will see that the result is pretty ugly 🙁
What I need as web developer (and sometimes designer) is the option to have outside strokes.
I think this feature would be useful for many other web developers/designers as well.
I'd need two options:
(I use "characters" although sometimes "glyphs" might be more appropriate.)
-
An "outside stroke". Basically the text-stroke we have now but offering the "outside" option, and allowing for multiple (unlimited number of) strokes. It would stay visible when its character/shape overlaps another character/shape, and it can be overlapped by such outlines which are on other overlapping characters/shapes.
-
A "group outline". It would be an outside stroke around a group of characters/shapes that might have (eg overlapping) outside-strokes themselves. It would be invisible where the outlined characters/shapes (incl. any outside strokes) do overlap - it's an outside outline around the group of characters/shapes and any of their outlines. (When applied to a single character/shape it would have the same effect as an "outside stroke" applied to that character/shape. The distinguishing characteristic of the "group outline" only becomes apparent when two or more characters/shapes overlap.)
(Also see https://lists.w3.org/Archives/Public/www-style/2013Jan/0461.html .)
Here's an example containing several of each:
https://www.tobireif.com/non_site_stuff/outlines.png
(It uses a boring font and it's not well-designed - it's only meant to show the technical/graphic capabilities I need.)
All this should be made available for HTML elements incl. HTML text and for SVG shapes/elements incl. SVG text.
I hope you will consider my wish, and I hope you will standardize it 😃
The exact syntax doesn't matter to me, as long as it's expressive (nicely human-readable) and is capable of all of the above.