Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[fill-stroke] Stroke alignment: open & complex paths #345

Open
Mamboleoo opened this issue Jun 17, 2019 · 11 comments

Comments

@Mamboleoo
Copy link

commented Jun 17, 2019

Hey there,
I know this is not a new request but I couldn't find any issue related to this topic nor any mention in the future proposal for the specs (#StrokeProperties) but if I'm wrong feel free to close this issue :)

I was wondering if a stroke alignement property could be part of the future specs?
Taking Adobe Illustrator as an example, it allows three type of alignement (Center, Inside, Outside) but when exporting to SVG using inside and outside values will convert the path using a stroke into a plain path.
image

Open path

I also noticed that Illustrator doesn't allow an alignment if a path isn't closed.
image

I guess the reason is linked to the naming of the alignements since an open path doesn't have an inside or outside part.
But maybe the outside could be defined based on the clockwise direction of the path?
(Using different naming could also be needed)
image

Thanks!

@Mamboleoo

This comment has been minimized.

Copy link
Author

commented Jun 17, 2019

I guess I submitted my issue a bit early because I just found out about this draft where I found many of my questions.
https://svgwg.org/specs/strokes/#SpecifyingStrokeAlignment

@AmeliaBR

This comment has been minimized.

Copy link

commented Jun 17, 2019

Hi Louis,

The most up-to-date draft spec is actually the CSS Fill & Stroke module: https://drafts.fxtf.org/fill-stroke-3/#stroke-align

Current issues on that spec: https://github.com/w3c/fxtf-drafts/labels/fill-stroke-3

I'm going to try to transfer this issue to that repo, since it doesn't look like there is an open GitHub issue to match the inline issue.

There hasn't been much movement on the proposal in years. SVG WG folks have been prioritizing cleaning up the SVG 2 spec, and there aren't enough of us to do the work.

The open questions for stroke-align remain the same as in the SVG module you linked to: what to do with open or criss-crossing paths?

The probable answer is: do what existing graphics programs do (even if that means ignoring the property). If you or anyone else can compile here a summary of how Illustrator, Sketch, Figma, etc., handle this property on complex paths, we can hopefully remove that issue, finalize the spec for this property, and then put pressure on browsers to implement it!

@AmeliaBR AmeliaBR transferred this issue from w3c/svgwg Jun 17, 2019

@AmeliaBR AmeliaBR changed the title Stroke alignment [fill-stroke] Stroke alignment: open & complex paths Jun 17, 2019

@Mamboleoo

This comment has been minimized.

Copy link
Author

commented Jun 24, 2019

Thanks for your answer!
I would love to see that property being implemented so I will try to take some time to write some notes about how Illustrator handle it and how we could improve it or use it as is for SVG.
Is this issue the best place to share my future work on this?

@dirkschulze

This comment has been minimized.

Copy link
Contributor

commented Jun 28, 2019

@AmeliaBR The issue is more complex than it is described in the spec. Many implementations take the winding rule into account as well.

Just as an overview what some implementations do for complex shapes:
Pasted image at 2017_08_22 10_29 AM

To open vs. closed path: Adobe Illustrator and Adobe XD just supports inner and outer strokes on closed paths - Adobe Photoshop on open paths as well. Not sure about InDesign but usually all implementations do something different.

@AmeliaBR

This comment has been minimized.

Copy link

commented Jun 28, 2019

Dirk, if you have screenshots of actual implementation variation, that would definitely help. Maybe we won't be able to match everyone if they're not consistent to start with. But we should at least get an idea of where the inconsistencies will be!

@Mamboleoo

This comment has been minimized.

Copy link
Author

commented Jul 1, 2019

Here is the result on current version of Photoshop.
It looks like it acts with a fill-rule of even-off as a default (I couldn't find how to change it)
image

And here is Illustrator.
image

I will try to do the same on inDesign asap ;)

@AmeliaBR

This comment has been minimized.

Copy link

commented Jul 1, 2019

Interesting. So for Illustrator, at least, the inside/outside for the stroke isn't affected by the fill rule.

@Mamboleoo

This comment has been minimized.

Copy link
Author

commented Jul 5, 2019

I was thinking, instead of defining the expected result we could create another rule to let the user define what result their are expecting?
image

This example is using a stroke-alignment: inside but it would behave the same with outside.

In this example the stroke-rule would define if the stroke should be drawn all along the path nonzero or the result should be defined based on the inside areas of the path evenodd. Of course those terms are copy-pasted from the fill-rule` property and it may make no sense (I never truly understood this property, I always tried both values and picked the expected result 😅)

@BigBadaboom

This comment has been minimized.

Copy link

commented Jul 5, 2019

Here's the result from Sketch.

  • Inside/outside on open paths is not allowed
  • Winding rule of path has no effect. Sketch's default rule is "non-zero".

inside_outside_sketch

@jrmuizel

This comment has been minimized.

Copy link

commented Jul 5, 2019

I don't think any of the underlying graphics libraries used by browsers implement this functionality so I suspect the appetite for implementing wont be that high. It feels to me a like a feature better left in authoring tools.

@BigBadaboom

This comment has been minimized.

Copy link

commented Aug 14, 2019

For completeness, here is what Figma does.

  • Inside/outside on open paths is allowed, but has no effect
  • Winding rule of path does have an effect.

inside_outside_figma

It appears they are using the simple, obvious(?), solution of masking a double-width stroke with the fill (for inside), or the inverse of the fill (for outside).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
5 participants
You can’t perform that action at this time.