[paint] "outside stroke" and "group outline"

tobireif commented 7 years ago

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.)

1) 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.

2) 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.

Tobi https://tobireif.com/

tobireif commented 7 years ago

Per problematic edge case: If neither the FX TF nor the CSS WG or the SVG WG (does any exist?) can devise a solution, consider specifying eg "a path that is not closed can't have an outside stroke or group stroke". I'd be fine with it because I'd use the various strokes with shapes, closed paths, text glyphs, etc, and with groups consisting of those - but not with unclosed paths and such.

AmeliaBR commented 7 years ago

There are two issues here:

Support inside/outside/center stroke options (aka stroke-align or stroke-alignment property). That has been discussed extensively in SVG without decision, see the draft SVG Strokes spec. The option Tobi discusses, forcing a used value of center for open or overlapping strokes, is one option. But even then, you need to decide wheter open/overlapping is determined per path or per sub-path.
Support more advanced paint-order control for text: i.e., do you apply the fill & stroke to individual glyphs, characters, words, or the entire element? SVG currently uses the "text layout chunk", with no option to change it yet. All letters in the chunk are filled before any are stroked (or the reverse, for paint-order: stroke fill).

tobireif commented 7 years ago

@AmeliaBR

The option Tobi discusses, forcing a used value of center for open or overlapping strokes, is one option.

But I was only wishing for the "outside" (or "outer") option, I don't understand how that could be interpreted as "forcing a used value of center".

But even then, you need to decide wheter open/overlapping is determined per path or per sub-path.

Could you illustrate the problem? If you could show me both options in a simple graphic I could tell you what I (as just one unimportant web developer) would prefer.

tobireif commented 7 years ago

Here's another graphic illustrating what I want:

strokes