Skip to content

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

Open
@tobireif

Description

@tobireif

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/

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions