@braccato/core 1.16.7 → 1.16.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +2 -0
- package/dist/README.md +2 -0
- package/dist/styles/image-highlights.css +5 -0
- package/dist/styles/lyrics.css +6 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -586,5 +586,7 @@ For real-browser regression checks, build the package, serve the repository root
|
|
|
586
586
|
`tooling/browser/image-highlights.html`. Import `image-highlights-checks.js` from that page and
|
|
587
587
|
call `runImageHighlightChecks(testView)`. The default fixture uses an SDR image; a `theme` query
|
|
588
588
|
parameter can point at a consumer's HDR stylesheet for physical-display testing.
|
|
589
|
+
`runLetterInkChecks(testView)` in the same module checks that letter masks cover glyph overhang,
|
|
590
|
+
such as a `j`'s hook or an italic `f`, without moving any letter.
|
|
589
591
|
|
|
590
592
|
Words that mix RTL characters with LTR letters or numbers retain native text shaping instead of per-letter motion. Image glow, letter masks and letter motion retain their current paint during the line exit fade.
|
package/dist/README.md
CHANGED
|
@@ -586,5 +586,7 @@ For real-browser regression checks, build the package, serve the repository root
|
|
|
586
586
|
`tooling/browser/image-highlights.html`. Import `image-highlights-checks.js` from that page and
|
|
587
587
|
call `runImageHighlightChecks(testView)`. The default fixture uses an SDR image; a `theme` query
|
|
588
588
|
parameter can point at a consumer's HDR stylesheet for physical-display testing.
|
|
589
|
+
`runLetterInkChecks(testView)` in the same module checks that letter masks cover glyph overhang,
|
|
590
|
+
such as a `j`'s hook or an italic `f`, without moving any letter.
|
|
589
591
|
|
|
590
592
|
Words that mix RTL characters with LTR letters or numbers retain native text shaping instead of per-letter motion. Image glow, letter masks and letter motion retain their current paint during the line exit fade.
|
|
@@ -17,6 +17,11 @@
|
|
|
17
17
|
color: transparent;
|
|
18
18
|
-webkit-text-fill-color: transparent;
|
|
19
19
|
}
|
|
20
|
+
/* The content-box copy keeps each letter's image; the padding-box copy carries it under glyph overhang. */
|
|
21
|
+
.blyrics-word-highlight.blyrics-image-highlight .blyrics--letter {
|
|
22
|
+
background-image: var(--blyrics-highlight-image, none), var(--blyrics-highlight-image, none);
|
|
23
|
+
background-origin: content-box, padding-box;
|
|
24
|
+
}
|
|
20
25
|
.blyrics-image-highlight:not(.blyrics-word-highlight--lettered) .blyrics-image-fill {
|
|
21
26
|
--blyrics-image-sweep-angle: 90deg;
|
|
22
27
|
mask-image: linear-gradient(var(--blyrics-image-sweep-angle),
|
package/dist/styles/lyrics.css
CHANGED
|
@@ -186,7 +186,13 @@
|
|
|
186
186
|
background-image: none;
|
|
187
187
|
}
|
|
188
188
|
|
|
189
|
+
/* A mask clips to the border box, cutting off glyph overhang (a j's hook, italics). The padding
|
|
190
|
+
widens that clip without moving layout, and the content-box origin keeps the sweep geometry. */
|
|
189
191
|
.blyrics-word-highlight .blyrics--letter {
|
|
192
|
+
padding-inline: 0.25em;
|
|
193
|
+
margin-inline: -0.25em;
|
|
194
|
+
-webkit-mask-origin: content-box;
|
|
195
|
+
mask-origin: content-box;
|
|
190
196
|
color: var(--blyrics-lyric-active-color);
|
|
191
197
|
-webkit-mask-image: linear-gradient(90deg, #000 0, #000 50%, #0000 calc(50% + var(--mask-fade, 3%)));
|
|
192
198
|
mask-image: linear-gradient(90deg, #000 0, #000 50%, #0000 calc(50% + var(--mask-fade, 3%)));
|