From 34695474901bbcc2efae8446ca3f2c193cbe8d3e Mon Sep 17 00:00:00 2001 From: Emanuel Pilz Date: Tue, 18 Jun 2024 02:50:36 +0200 Subject: [PATCH 1/3] core: Use logical instead of physical block margins --- packages/core/src/createStyleObject.test.ts | 12 ++++++------ packages/core/src/createStyleObject.ts | 4 ++-- packages/core/src/createStyleString.test.ts | 8 ++++---- site/src/components/Preview.tsx | 4 ++-- 4 files changed, 14 insertions(+), 14 deletions(-) diff --git a/packages/core/src/createStyleObject.test.ts b/packages/core/src/createStyleObject.test.ts index ab6844df..9b822d4e 100644 --- a/packages/core/src/createStyleObject.test.ts +++ b/packages/core/src/createStyleObject.test.ts @@ -20,12 +20,12 @@ describe('createStyleObject', () => { "::after": { "content": "''", "display": "table", - "marginTop": "-0.2626em", + "marginBlockStart": "-0.2626em", }, "::before": { "content": "''", "display": "table", - "marginBottom": "-0.2753em", + "marginBlockEnd": "-0.2753em", }, "fontSize": "150px", "lineHeight": "180px", @@ -43,12 +43,12 @@ describe('createStyleObject', () => { "::after": { "content": "''", "display": "table", - "marginTop": "-0.2375em", + "marginBlockStart": "-0.2375em", }, "::before": { "content": "''", "display": "table", - "marginBottom": "-0.2502em", + "marginBlockEnd": "-0.2502em", }, "fontSize": "150px", "lineHeight": "normal", @@ -68,12 +68,12 @@ describe('createStyleObject', () => { "::after": { "content": "''", "display": "table", - "marginTop": "-0.2626em", + "marginBlockStart": "-0.2626em", }, "::before": { "content": "''", "display": "table", - "marginBottom": "-0.2753em", + "marginBlockEnd": "-0.2753em", }, "fontSize": "150px", "lineHeight": "180px", diff --git a/packages/core/src/createStyleObject.ts b/packages/core/src/createStyleObject.ts index b26266b1..51ca25ca 100644 --- a/packages/core/src/createStyleObject.ts +++ b/packages/core/src/createStyleObject.ts @@ -12,12 +12,12 @@ const _createStyleObject = ({ lineHeight, '::before': { content: "''", - marginBottom: capHeightTrim, + marginBlockEnd: capHeightTrim, display: 'table', }, '::after': { content: "''", - marginTop: baselineTrim, + marginBlockStart: baselineTrim, display: 'table', }, }; diff --git a/packages/core/src/createStyleString.test.ts b/packages/core/src/createStyleString.test.ts index 272a8022..e9903c0a 100644 --- a/packages/core/src/createStyleString.test.ts +++ b/packages/core/src/createStyleString.test.ts @@ -22,13 +22,13 @@ describe('createStyleString', () => { .testClassName::before { content: ""; - margin-bottom: -0.2753em; + margin-block-end: -0.2753em; display: table; } .testClassName::after { content: ""; - margin-top: -0.2626em; + margin-block-start: -0.2626em; display: table; }" `); @@ -50,13 +50,13 @@ describe('createStyleString', () => { .testClassName::before { content: ""; - margin-bottom: -0.2753em; + margin-block-end: -0.2753em; display: table; } .testClassName::after { content: ""; - margin-top: -0.2626em; + margin-block-start: -0.2626em; display: table; }" `); diff --git a/site/src/components/Preview.tsx b/site/src/components/Preview.tsx index 66545873..76642b4b 100644 --- a/site/src/components/Preview.tsx +++ b/site/src/components/Preview.tsx @@ -91,7 +91,7 @@ const Preview = () => { backgroundSize: `100% ${resolvedCapHeightFromFontSize + lineGap}px`, backgroundPosition: `0 calc((${ (resolvedCapHeightFromFontSize + lineGap - lineHeightNormal) / 2 - }px) + ${capsizeStyles?.['::before'].marginBottom})`, + }px) + ${capsizeStyles?.['::before'].marginBlockEnd})`, } : { ...highlightGradient( @@ -100,7 +100,7 @@ const Preview = () => { ), backgroundPosition: `0 calc((${ (leading - lineHeightNormal) / 2 - }px) + ${capsizeStyles?.['::before'].marginBottom})`, + }px) + ${capsizeStyles?.['::before'].marginBlockEnd})`, }, leading: { backgroundImage: `linear-gradient(180deg, transparent ${leading}px, ${highlight} ${leading}px, ${highlight} ${ From 607cb2b7dd4f97cbbb319eb1f2dd2600c710ce92 Mon Sep 17 00:00:00 2001 From: Emanuel Pilz Date: Tue, 25 Jun 2024 02:28:56 +0200 Subject: [PATCH 2/3] add changeset for #206 --- .changeset/nice-flowers-burn.md | 13 +++++++++++++ 1 file changed, 13 insertions(+) create mode 100644 .changeset/nice-flowers-burn.md diff --git a/.changeset/nice-flowers-burn.md b/.changeset/nice-flowers-burn.md new file mode 100644 index 00000000..613c5d6b --- /dev/null +++ b/.changeset/nice-flowers-burn.md @@ -0,0 +1,13 @@ +--- +'@capsizecss/core': major +--- + +Use logical instead of physical block margins + +Capsize does not work on text, that is rotated 90deg (using [`writing-mode: vertical-lr;`](https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode)). +The current implementation always applies `margin-top` and `margin-bottom`, regardless of the actual orientation. + +This change replaces `margin-top` with `margin-block-start` and `margin-bottom` with `margin-block-end`, as these properties respect aforementioned text orientation. + +From [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-block#syntax): +> This property corresponds to the [margin-top](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-top) and [margin-bottom](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-bottom), or the [margin-right](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-right) and [margin-left](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-left) properties, depending on the values defined for [writing-mode](https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode), [direction](https://developer.mozilla.org/en-US/docs/Web/CSS/direction), and [text-orientation](https://developer.mozilla.org/en-US/docs/Web/CSS/text-orientation). From 0c81fae3f242934961375a754050b8a2e1be7b42 Mon Sep 17 00:00:00 2001 From: Michael Taranto Date: Wed, 24 Jul 2024 14:31:58 +1000 Subject: [PATCH 3/3] Update .changeset/nice-flowers-burn.md --- .changeset/nice-flowers-burn.md | 38 ++++++++++++++++++++++++++++----- 1 file changed, 33 insertions(+), 5 deletions(-) diff --git a/.changeset/nice-flowers-burn.md b/.changeset/nice-flowers-burn.md index 613c5d6b..d6377426 100644 --- a/.changeset/nice-flowers-burn.md +++ b/.changeset/nice-flowers-burn.md @@ -4,10 +4,38 @@ Use logical instead of physical block margins -Capsize does not work on text, that is rotated 90deg (using [`writing-mode: vertical-lr;`](https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode)). -The current implementation always applies `margin-top` and `margin-bottom`, regardless of the actual orientation. +Support different [writing-modes], e.g.`writing-mode: vertical-lr;` by adopting logical block margins in favour of the explicit physical margins. -This change replaces `margin-top` with `margin-block-start` and `margin-bottom` with `margin-block-end`, as these properties respect aforementioned text orientation. +### BREAKING CHANGE: -From [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-block#syntax): -> This property corresponds to the [margin-top](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-top) and [margin-bottom](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-bottom), or the [margin-right](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-right) and [margin-left](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-left) properties, depending on the values defined for [writing-mode](https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode), [direction](https://developer.mozilla.org/en-US/docs/Web/CSS/direction), and [text-orientation](https://developer.mozilla.org/en-US/docs/Web/CSS/text-orientation). +#### Browser support + +The switch to logical block margins means that browsers from before 2019 will likely not understand the property resulting in no trim. We think it's a valid trade off at this time, get in touch if you disagree. + +See [caniuse] for more details on when the different browsers added support. + +#### API Change + +TL;DR If you are using the object returned from `createStyleObject` as a passthrough without interrogating it's properties, there is no API break! + +Given the change to the CSS properties of the pseudo elements (i.e. `marginTop` to `marginBlockStart` and `marginBottom` to `marginBlockEnd`), any consumer of `createStyleObject` that is interrogating the style object may need to update their usage: + +```diff +import { createStyleObject } from '@capsizecss/core'; + +const capsizeStyles = createStyleObject(...); + +// Any access to the CSS properties on the return pseudo elements should be updated +- capsizeStyles.['::before'].marginBottom ++ capsizeStyles.['::before'].marginBlockEnd + +- capsizeStyles.['::after'].marginTop ++ capsizeStyles.['::after'].marginBlockStart +``` + +See [margin-block-start] and [margin-block-end] documentation on MDN for more details. + +[caniuse]: https://caniuse.com/mdn-css_properties_margin-block-end +[margin-block-start]: https://developer.mozilla.org/en-US/docs/Web/CSS/margin-block-start +[margin-block-end]: https://developer.mozilla.org/en-US/docs/Web/CSS/margin-block-end +[writing-modes]: https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode