search

seek-oss / capsize

Flipping how we define typography in CSS.
https://seek-oss.github.io/capsize/
MIT License
1.48k stars 37 forks source link

Use logical instead of physical block margins #206

Open emonadeo opened 2 weeks ago

emonadeo commented 2 weeks ago

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[bot] commented 2 weeks ago

🦋 Changeset detected

Latest commit: 607cb2b7dd4f97cbbb319eb1f2dd2600c710ce92

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 commented 2 weeks ago

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 commented 1 week ago

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.