diff --git a/src/content/TextAnimations/Shuffle/Shuffle.css b/src/content/TextAnimations/Shuffle/Shuffle.css index e498f57c..c693228a 100644 --- a/src/content/TextAnimations/Shuffle/Shuffle.css +++ b/src/content/TextAnimations/Shuffle/Shuffle.css @@ -27,7 +27,11 @@ } .shuffle-char { - line-height: 1; + /* `normal` resolves to the font's own ascent + descent. The clip wrapper is + sized from this box, so a fixed 1 makes the mask shorter than the glyph + and clips descenders on every face that has them. Line spacing is still + controlled by .shuffle-parent. */ + line-height: normal; display: inline-block; text-align: center; } diff --git a/src/tailwind/TextAnimations/Shuffle/Shuffle.jsx b/src/tailwind/TextAnimations/Shuffle/Shuffle.jsx index af1c7593..ef53e1d3 100644 --- a/src/tailwind/TextAnimations/Shuffle/Shuffle.jsx +++ b/src/tailwind/TextAnimations/Shuffle/Shuffle.jsx @@ -116,7 +116,10 @@ const Shuffle = ({ splitRef.current = new GSAPSplitText(el, { type: 'chars', - charsClass: 'shuffle-char', + // `leading-normal` overrides the parent's `leading-none` on the char + // itself: the clip wrapper is sized from this box, and a line-height + // of 1 makes the mask shorter than the glyph, clipping descenders. + charsClass: 'shuffle-char leading-normal', wordsClass: 'shuffle-word', linesClass: 'shuffle-line', smartWrap: true, diff --git a/src/ts-default/TextAnimations/Shuffle/Shuffle.css b/src/ts-default/TextAnimations/Shuffle/Shuffle.css index e498f57c..c693228a 100644 --- a/src/ts-default/TextAnimations/Shuffle/Shuffle.css +++ b/src/ts-default/TextAnimations/Shuffle/Shuffle.css @@ -27,7 +27,11 @@ } .shuffle-char { - line-height: 1; + /* `normal` resolves to the font's own ascent + descent. The clip wrapper is + sized from this box, so a fixed 1 makes the mask shorter than the glyph + and clips descenders on every face that has them. Line spacing is still + controlled by .shuffle-parent. */ + line-height: normal; display: inline-block; text-align: center; } diff --git a/src/ts-tailwind/TextAnimations/Shuffle/Shuffle.tsx b/src/ts-tailwind/TextAnimations/Shuffle/Shuffle.tsx index 77481b55..8fd16386 100644 --- a/src/ts-tailwind/TextAnimations/Shuffle/Shuffle.tsx +++ b/src/ts-tailwind/TextAnimations/Shuffle/Shuffle.tsx @@ -129,7 +129,10 @@ const Shuffle: React.FC = ({ splitRef.current = new GSAPSplitText(el, { type: 'chars', - charsClass: 'shuffle-char', + // `leading-normal` overrides the parent's `leading-none` on the char + // itself: the clip wrapper is sized from this box, and a line-height + // of 1 makes the mask shorter than the glyph, clipping descenders. + charsClass: 'shuffle-char leading-normal', wordsClass: 'shuffle-word', linesClass: 'shuffle-line', smartWrap: true,