Skip to content

Commit

Permalink
Fix svg styling and image scaling (#1699)
Browse files Browse the repository at this point in the history 
* Restore imageBackground

* Restore other missing styling and attributes

* Fix background displaying where it shouldnt

* Fix low quality image resizing

* Update tests

* Update structured content test json

* Update tests
  • Loading branch information
@Kuuuube
Kuuuube authored Dec 27, 2024
1 parent 9def9d5 commit 5c409b9
Show file tree
Hide file tree
Showing 7 changed files with 272 additions and 28 deletions.
4 changes: 0 additions & 4 deletions dev/data/structured-content-overrides.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,10 +28,6 @@
.gloss-image-link:hover {
/* remove-rule */
}
:root[data-browser=firefox] .gloss-image-link[data-image-rendering=crisp-edges] .gloss-image,
:root[data-browser=firefox-mobile] .gloss-image-link[data-image-rendering=crisp-edges] .gloss-image {
/* remove-rule */
}
.gloss-sc-thead,
.gloss-sc-tfoot,
.gloss-sc-th {
Expand Down
88 changes: 85 additions & 3 deletions ext/css/structured-content.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,11 @@
/* Glossary images */
.gloss-image-container {
display: inline-block;
max-width: 100%;
max-height: 100vh;
position: relative;
vertical-align: top;
line-height: 0;
font-size: calc(1em / var(--font-size-no-units));
overflow: hidden;
}
Expand All @@ -39,6 +44,48 @@
.gloss-image-link[href]:hover {
cursor: pointer;
}
.gloss-image-container-overlay {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
font-size: calc(1em * var(--font-size-no-units));
line-height: var(--line-height);
display: table;
table-layout: fixed;
white-space: normal;
color: var(--text-color-light3);
}
.gloss-image-link[data-has-image=true][data-image-load-state=load-error] .gloss-image-container-overlay::after {
content: 'Image failed to load';
display: table-cell;
width: 100%;
height: 100%;
vertical-align: middle;
text-align: center;
padding: 0.25em;
}
.gloss-image-background {
--image: none;

position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: var(--text-color);
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center center;
-webkit-mask-mode: alpha;
-webkit-mask-size: contain;
-webkit-mask-image: var(--image);
mask-repeat: no-repeat;
mask-position: center center;
mask-mode: alpha;
mask-size: contain;
mask-image: var(--image);
}
.gloss-image {
display: inline-block;
vertical-align: top;
Expand All @@ -47,27 +94,54 @@
outline: none;
width: 100%;
}
.gloss-image-link[data-image-rendering=pixelated] .gloss-image {
.gloss-image-link[data-image-rendering=pixelated] .gloss-image,
.gloss-image-link[data-image-rendering=pixelated] .gloss-image-background {
image-rendering: auto;
image-rendering: -moz-crisp-edges;
image-rendering: -webkit-optimize-contrast;
image-rendering: pixelated;
image-rendering: crisp-edges;
}
.gloss-image-link[data-image-rendering=crisp-edges] .gloss-image {
.gloss-image-link[data-image-rendering=crisp-edges] .gloss-image,
.gloss-image-link[data-image-rendering=crisp-edges] .gloss-image-background {
image-rendering: auto;
image-rendering: -moz-crisp-edges;
image-rendering: -webkit-optimize-contrast;
image-rendering: crisp-edges;
}
:root[data-browser=firefox] .gloss-image-link[data-image-rendering=crisp-edges] .gloss-image,
:root[data-browser=firefox-mobile] .gloss-image-link[data-image-rendering=crisp-edges] .gloss-image {
:root[data-browser=firefox] .gloss-image-link[data-image-rendering=crisp-edges] .gloss-image-background,
:root[data-browser=firefox-mobile] .gloss-image-link[data-image-rendering=crisp-edges] .gloss-image,
:root[data-browser=firefox-mobile] .gloss-image-link[data-image-rendering=crisp-edges] .gloss-image-background {
image-rendering: auto;
}
.gloss-image-link[data-has-aspect-ratio=true] .gloss-image-sizer {
display: inline-block;
width: 0;
vertical-align: top;
font-size: 0;
}
.gloss-image-link-text {
display: none;
line-height: var(--line-height);
}
.gloss-image-link-text::before {
content: '[';
}
.gloss-image-link-text::after {
content: ']';
}
.gloss-image-description {
display: block;
white-space: pre-line;
}

.gloss-image-link[data-appearance=monochrome] .gloss-image {
filter: grayscale(1);
}
.gloss-image-link:not([data-appearance=monochrome]) .gloss-image-background {
display: none;
}

.gloss-image-link[data-size-units=em] .gloss-image-container {
font-size: 1em;
Expand Down Expand Up @@ -105,6 +179,14 @@
:root[data-glossary-layout-mode=compact] .gloss-image-link[data-collapsible=true]:focus .gloss-image-container {
display: block;
}
.gloss-image-link[data-collapsed=true] .gloss-image-link-text,
:root[data-glossary-layout-mode=compact] .gloss-image-link[data-collapsible=true] .gloss-image-link-text {
display: inline;
}
.gloss-image-link[data-collapsed=true]~.gloss-image-description,
:root[data-glossary-layout-mode=compact] .gloss-image-description {
display: inline;
}


/* Links */
Expand Down
135 changes: 133 additions & 2 deletions ext/data/structured-content-style.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,11 @@
"selectors": [".gloss-image-container"],
"styles": [
["display", "inline-block"],
["max-width", "100%"],
["max-height", "100vh"],
["position", "relative"],
["vertical-align", "top"],
["line-height", "0"],
["overflow", "hidden"],
["font-size", "1px"]
]
Expand All @@ -24,6 +29,56 @@
["cursor", "pointer"]
]
},
{
"selectors": [".gloss-image-container-overlay"],
"styles": [
["position", "absolute"],
["left", "0"],
["top", "0"],
["width", "100%"],
["height", "100%"],
["font-size", "calc(1em * var(--font-size-no-units))"],
["line-height", "var(--line-height)"],
["display", "table"],
["table-layout", "fixed"],
["white-space", "normal"],
["color", "var(--text-color-light3)"]
]
},
{
"selectors": [".gloss-image-link[data-has-image=true][data-image-load-state=load-error] .gloss-image-container-overlay::after"],
"styles": [
["content", "'Image failed to load'"],
["display", "table-cell"],
["width", "100%"],
["height", "100%"],
["vertical-align", "middle"],
["text-align", "center"],
["padding", "0.25em"]
]
},
{
"selectors": [".gloss-image-background"],
"styles": [
["--image", "none"],
["position", "absolute"],
["left", "0"],
["top", "0"],
["width", "100%"],
["height", "100%"],
["background-color", "var(--text-color)"],
["-webkit-mask-repeat", "no-repeat"],
["-webkit-mask-position", "center center"],
["-webkit-mask-mode", "alpha"],
["-webkit-mask-size", "contain"],
["-webkit-mask-image", "var(--image)"],
["mask-repeat", "no-repeat"],
["mask-position", "center center"],
["mask-mode", "alpha"],
["mask-size", "contain"],
["mask-image", "var(--image)"]
]
},
{
"selectors": [".gloss-image"],
"styles": [
Expand All @@ -36,7 +91,10 @@
]
},
{
"selectors": [".gloss-image-link[data-image-rendering=pixelated] .gloss-image"],
"selectors": [
".gloss-image-link[data-image-rendering=pixelated] .gloss-image",
".gloss-image-link[data-image-rendering=pixelated] .gloss-image-background"
],
"styles": [
["image-rendering", "auto"],
["image-rendering", "-moz-crisp-edges"],
Expand All @@ -46,20 +104,75 @@
]
},
{
"selectors": [".gloss-image-link[data-image-rendering=crisp-edges] .gloss-image"],
"selectors": [
".gloss-image-link[data-image-rendering=crisp-edges] .gloss-image",
".gloss-image-link[data-image-rendering=crisp-edges] .gloss-image-background"
],
"styles": [
["image-rendering", "auto"],
["image-rendering", "-moz-crisp-edges"],
["image-rendering", "-webkit-optimize-contrast"],
["image-rendering", "crisp-edges"]
]
},
{
"selectors": [
":root[data-browser=firefox] .gloss-image-link[data-image-rendering=crisp-edges] .gloss-image",
":root[data-browser=firefox] .gloss-image-link[data-image-rendering=crisp-edges] .gloss-image-background",
":root[data-browser=firefox-mobile] .gloss-image-link[data-image-rendering=crisp-edges] .gloss-image",
":root[data-browser=firefox-mobile] .gloss-image-link[data-image-rendering=crisp-edges] .gloss-image-background"
],
"styles": [
["image-rendering", "auto"]
]
},
{
"selectors": [".gloss-image-link[data-has-aspect-ratio=true] .gloss-image-sizer"],
"styles": [
["display", "inline-block"],
["width", "0"],
["vertical-align", "top"],
["font-size", "0"]
]
},
{
"selectors": [".gloss-image-link-text"],
"styles": [
["display", "none"],
["line-height", "var(--line-height)"]
]
},
{
"selectors": [".gloss-image-link-text::before"],
"styles": [
["content", "'['"]
]
},
{
"selectors": [".gloss-image-link-text::after"],
"styles": [
["content", "']'"]
]
},
{
"selectors": [".gloss-image-description"],
"styles": [
["display", "block"],
["white-space", "pre-line"]
]
},
{
"selectors": [".gloss-image-link[data-appearance=monochrome] .gloss-image"],
"styles": [
["filter", "grayscale(1)"]
]
},
{
"selectors": [".gloss-image-link:not([data-appearance=monochrome]) .gloss-image-background"],
"styles": [
["display", "none"]
]
},
{
"selectors": [".gloss-image-link[data-size-units=em] .gloss-image-container"],
"styles": [
Expand Down Expand Up @@ -157,6 +270,24 @@
["display", "block"]
]
},
{
"selectors": [
".gloss-image-link[data-collapsed=true] .gloss-image-link-text",
":root[data-glossary-layout-mode=compact] .gloss-image-link[data-collapsible=true] .gloss-image-link-text"
],
"styles": [
["display", "inline"]
]
},
{
"selectors": [
".gloss-image-link[data-collapsed=true]~.gloss-image-description",
":root[data-glossary-layout-mode=compact] .gloss-image-description"
],
"styles": [
["display", "inline"]
]
},
{
"selectors": [".gloss-link-external-icon"],
"styles": [
Expand Down
6 changes: 3 additions & 3 deletions ext/js/dictionary/dictionary-database.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -462,7 +462,7 @@ export class DictionaryDatabase {
} else {
const image = new Blob([m.content], {type: m.mediaType});
// eslint-disable-next-line no-undef
await createImageBitmap(image).then((decodedImage) => {
await createImageBitmap(image, {resizeWidth: m.canvasWidth, resizeHeight: m.canvasHeight, resizeQuality: 'high'}).then((decodedImage) => {
// we need to do a dumb hack where we convert this ImageBitmap to an ImageData by drawing it to a temporary canvas, because Firefox doesn't support transferring ImageBitmaps cross-process
const canvas = new OffscreenCanvas(decodedImage.width, decodedImage.height);
const ctx = canvas.getContext('2d');
Expand Down Expand Up @@ -815,9 +815,9 @@ export class DictionaryDatabase {
* @param {import('dictionary-database').FindMultiBulkData<import('dictionary-database').DrawMediaGroupedRequest>} data
* @returns {import('dictionary-database').DrawMedia}
*/
_createDrawMedia(row, {itemIndex: index, item: {canvasIndexes, canvasWidth, generation}}) {
_createDrawMedia(row, {itemIndex: index, item: {canvasIndexes, canvasWidth, canvasHeight, generation}}) {
const {dictionary, path, mediaType, width, height, content} = row;
return {index, dictionary, path, mediaType, width, height, content, canvasIndexes, canvasWidth, generation};
return {index, dictionary, path, mediaType, width, height, content, canvasIndexes, canvasWidth, canvasHeight, generation};
}

/**
Expand Down
Loading

0 comments on commit 5c409b9

Please sign in to comment.