Use logical instead of physical block margins

[emonadeo]

I am currently trying to use Capsize with text, that is rotated 90deg (using writing-mode: vertical-lr;). The current implementation always applies margin-top and margin-bottom, regardless of the actual orientation.

This PR replaces margin-top with margin-block-start and margin-bottom with margin-block-end, as these properties respect aforementioned text orientation.

From MDN:

This property corresponds to the margin-top and margin-bottom, or the margin-right and margin-left properties, depending on the values defined for writing-mode, direction, and text-orientation.

However while this fixes text in vertical writing mode, it does not work with text in vertical writing mode and upright text orientation:

writing-mode: vertical-lr; // or vertical-rl;
text-orientation: upright;

This incorrectly (in the case of capsize) applies left and right margins when using start and end.

I personally think breaking this in favor of supporting vertical text is a worth trade-off, but this is of course up for discussion. Alternatively, this could be an extra opt-in option instead of replacing the current behavior.

I am not sure if this would affect east asian languages that may be written vertically. To my knowledge these are also written horizontally on the web.

[changeset-bot]

🦋 Changeset detected

Latest commit: cfbd642

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages

Name	Type
@capsizecss/core	Major
@capsizecss/vanilla-extract	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[michaeltaranto]

Hey thanks for opening this. We havent been able to use this until very very recently with due to our browser support policy. I wonder if that would be a factor for others too?

Not wanting to add config for no reason, maybe we release this as a breaking change and then if there is a ground swell of people needing the explicit margin direction due to pre Safari 12, then we can add an option then.

How's that sound?

[emonadeo]

Sounds good to me. I am down to implement that option if that comes to be the case. Feel free to tag me then, as I probably won't be actively monitoring new issues of this repo.