Skip to content

Commit

Permalink
Fix border size on some structured content images (#1695)
Browse files Browse the repository at this point in the history 
* Fix border size on structured content images

* Fix corners of images going over border

* Make tests happy
  • Loading branch information
@Kuuuube
Kuuuube authored Dec 24, 2024
1 parent 3142fa9 commit cd60eba
Show file tree
Hide file tree
Showing 3 changed files with 15 additions and 12 deletions.
2 changes: 2 additions & 0 deletions ext/css/structured-content.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,8 @@
/* Glossary images */
.gloss-image-container {
display: inline-block;
font-size: calc(1em / var(--font-size-no-units));
overflow: hidden;
}
.gloss-image-link[data-background=true]>.gloss-image-container {
background-color: var(--gloss-image-background-color);
Expand Down
1 change: 1 addition & 0 deletions ext/data/structured-content-style.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
"selectors": [".gloss-image-container"],
"styles": [
["display", "inline-block"],
["overflow", "hidden"],
["font-size", "1px"]
]
},
Expand Down
24 changes: 12 additions & 12 deletions test/data/anki-note-builder-test-results.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -863,12 +863,12 @@
"frequency-average-occurrence": "0",
"furigana": "<ruby>画像<rt>がぞう</rt></ruby>",
"furigana-plain": "画像[がぞう]",
"glossary": "<div style=\"text-align: left;\" class=\"yomitan-glossary\"><i>(n, termsDictAlias)</i> <ul><li>gazou definition 1</li><li><a target=\"_blank\" rel=\"noreferrer noopener\" style=\"cursor:inherit;display:inline-block;position:relative;line-height:1;max-width:100%;color:inherit;\"><span style=\"display:inline-block;font-size:1px;\"><img width=\"350\" height=\"350\" style=\"display:inline-block;vertical-align:top;object-fit:contain;border:none;outline:none;width:100%;image-rendering:auto;image-rendering:-moz-crisp-edges;image-rendering:-webkit-optimize-contrast;image-rendering:pixelated;image-rendering:crisp-edges;\"></span></a></li></ul><style>.yomitan-glossary ul[data-sc-content='glossary'] {\n color: #ffff00;\n}</style></div>",
"glossary-brief": "<div style=\"text-align: left;\" class=\"yomitan-glossary\"><ul><li>gazou definition 1</li><li><a target=\"_blank\" rel=\"noreferrer noopener\" style=\"cursor:inherit;display:inline-block;position:relative;line-height:1;max-width:100%;color:inherit;\"><span style=\"display:inline-block;font-size:1px;\"><img width=\"350\" height=\"350\" style=\"display:inline-block;vertical-align:top;object-fit:contain;border:none;outline:none;width:100%;image-rendering:auto;image-rendering:-moz-crisp-edges;image-rendering:-webkit-optimize-contrast;image-rendering:pixelated;image-rendering:crisp-edges;\"></span></a></li></ul><style>.yomitan-glossary ul[data-sc-content='glossary'] {\n color: #ffff00;\n}</style></div>",
"glossary-no-dictionary": "<div style=\"text-align: left;\" class=\"yomitan-glossary\"><i>(n)</i> <ul><li>gazou definition 1</li><li><a target=\"_blank\" rel=\"noreferrer noopener\" style=\"cursor:inherit;display:inline-block;position:relative;line-height:1;max-width:100%;color:inherit;\"><span style=\"display:inline-block;font-size:1px;\"><img width=\"350\" height=\"350\" style=\"display:inline-block;vertical-align:top;object-fit:contain;border:none;outline:none;width:100%;image-rendering:auto;image-rendering:-moz-crisp-edges;image-rendering:-webkit-optimize-contrast;image-rendering:pixelated;image-rendering:crisp-edges;\"></span></a></li></ul><style>.yomitan-glossary ul[data-sc-content='glossary'] {\n color: #ffff00;\n}</style></div>",
"glossary-first": "<div style=\"text-align: left;\" class=\"yomitan-glossary\"><i>(n, termsDictAlias)</i> <ul><li>gazou definition 1</li><li><a target=\"_blank\" rel=\"noreferrer noopener\" style=\"cursor:inherit;display:inline-block;position:relative;line-height:1;max-width:100%;color:inherit;\"><span style=\"display:inline-block;font-size:1px;\"><img width=\"350\" height=\"350\" style=\"display:inline-block;vertical-align:top;object-fit:contain;border:none;outline:none;width:100%;image-rendering:auto;image-rendering:-moz-crisp-edges;image-rendering:-webkit-optimize-contrast;image-rendering:pixelated;image-rendering:crisp-edges;\"></span></a></li></ul><style>.yomitan-glossary ul[data-sc-content='glossary'] {\n color: #ffff00;\n}</style></div>",
"glossary-first-brief": "<div style=\"text-align: left;\" class=\"yomitan-glossary\"><ul><li>gazou definition 1</li><li><a target=\"_blank\" rel=\"noreferrer noopener\" style=\"cursor:inherit;display:inline-block;position:relative;line-height:1;max-width:100%;color:inherit;\"><span style=\"display:inline-block;font-size:1px;\"><img width=\"350\" height=\"350\" style=\"display:inline-block;vertical-align:top;object-fit:contain;border:none;outline:none;width:100%;image-rendering:auto;image-rendering:-moz-crisp-edges;image-rendering:-webkit-optimize-contrast;image-rendering:pixelated;image-rendering:crisp-edges;\"></span></a></li></ul><style>.yomitan-glossary ul[data-sc-content='glossary'] {\n color: #ffff00;\n}</style></div>",
"glossary-first-no-dictionary": "<div style=\"text-align: left;\" class=\"yomitan-glossary\"><i>(n)</i> <ul><li>gazou definition 1</li><li><a target=\"_blank\" rel=\"noreferrer noopener\" style=\"cursor:inherit;display:inline-block;position:relative;line-height:1;max-width:100%;color:inherit;\"><span style=\"display:inline-block;font-size:1px;\"><img width=\"350\" height=\"350\" style=\"display:inline-block;vertical-align:top;object-fit:contain;border:none;outline:none;width:100%;image-rendering:auto;image-rendering:-moz-crisp-edges;image-rendering:-webkit-optimize-contrast;image-rendering:pixelated;image-rendering:crisp-edges;\"></span></a></li></ul><style>.yomitan-glossary ul[data-sc-content='glossary'] {\n color: #ffff00;\n}</style></div>",
"glossary": "<div style=\"text-align: left;\" class=\"yomitan-glossary\"><i>(n, termsDictAlias)</i> <ul><li>gazou definition 1</li><li><a target=\"_blank\" rel=\"noreferrer noopener\" style=\"cursor:inherit;display:inline-block;position:relative;line-height:1;max-width:100%;color:inherit;\"><span style=\"display:inline-block;overflow:hidden;font-size:1px;\"><img width=\"350\" height=\"350\" style=\"display:inline-block;vertical-align:top;object-fit:contain;border:none;outline:none;width:100%;image-rendering:auto;image-rendering:-moz-crisp-edges;image-rendering:-webkit-optimize-contrast;image-rendering:pixelated;image-rendering:crisp-edges;\"></span></a></li></ul><style>.yomitan-glossary ul[data-sc-content='glossary'] {\n color: #ffff00;\n}</style></div>",
"glossary-brief": "<div style=\"text-align: left;\" class=\"yomitan-glossary\"><ul><li>gazou definition 1</li><li><a target=\"_blank\" rel=\"noreferrer noopener\" style=\"cursor:inherit;display:inline-block;position:relative;line-height:1;max-width:100%;color:inherit;\"><span style=\"display:inline-block;overflow:hidden;font-size:1px;\"><img width=\"350\" height=\"350\" style=\"display:inline-block;vertical-align:top;object-fit:contain;border:none;outline:none;width:100%;image-rendering:auto;image-rendering:-moz-crisp-edges;image-rendering:-webkit-optimize-contrast;image-rendering:pixelated;image-rendering:crisp-edges;\"></span></a></li></ul><style>.yomitan-glossary ul[data-sc-content='glossary'] {\n color: #ffff00;\n}</style></div>",
"glossary-no-dictionary": "<div style=\"text-align: left;\" class=\"yomitan-glossary\"><i>(n)</i> <ul><li>gazou definition 1</li><li><a target=\"_blank\" rel=\"noreferrer noopener\" style=\"cursor:inherit;display:inline-block;position:relative;line-height:1;max-width:100%;color:inherit;\"><span style=\"display:inline-block;overflow:hidden;font-size:1px;\"><img width=\"350\" height=\"350\" style=\"display:inline-block;vertical-align:top;object-fit:contain;border:none;outline:none;width:100%;image-rendering:auto;image-rendering:-moz-crisp-edges;image-rendering:-webkit-optimize-contrast;image-rendering:pixelated;image-rendering:crisp-edges;\"></span></a></li></ul><style>.yomitan-glossary ul[data-sc-content='glossary'] {\n color: #ffff00;\n}</style></div>",
"glossary-first": "<div style=\"text-align: left;\" class=\"yomitan-glossary\"><i>(n, termsDictAlias)</i> <ul><li>gazou definition 1</li><li><a target=\"_blank\" rel=\"noreferrer noopener\" style=\"cursor:inherit;display:inline-block;position:relative;line-height:1;max-width:100%;color:inherit;\"><span style=\"display:inline-block;overflow:hidden;font-size:1px;\"><img width=\"350\" height=\"350\" style=\"display:inline-block;vertical-align:top;object-fit:contain;border:none;outline:none;width:100%;image-rendering:auto;image-rendering:-moz-crisp-edges;image-rendering:-webkit-optimize-contrast;image-rendering:pixelated;image-rendering:crisp-edges;\"></span></a></li></ul><style>.yomitan-glossary ul[data-sc-content='glossary'] {\n color: #ffff00;\n}</style></div>",
"glossary-first-brief": "<div style=\"text-align: left;\" class=\"yomitan-glossary\"><ul><li>gazou definition 1</li><li><a target=\"_blank\" rel=\"noreferrer noopener\" style=\"cursor:inherit;display:inline-block;position:relative;line-height:1;max-width:100%;color:inherit;\"><span style=\"display:inline-block;overflow:hidden;font-size:1px;\"><img width=\"350\" height=\"350\" style=\"display:inline-block;vertical-align:top;object-fit:contain;border:none;outline:none;width:100%;image-rendering:auto;image-rendering:-moz-crisp-edges;image-rendering:-webkit-optimize-contrast;image-rendering:pixelated;image-rendering:crisp-edges;\"></span></a></li></ul><style>.yomitan-glossary ul[data-sc-content='glossary'] {\n color: #ffff00;\n}</style></div>",
"glossary-first-no-dictionary": "<div style=\"text-align: left;\" class=\"yomitan-glossary\"><i>(n)</i> <ul><li>gazou definition 1</li><li><a target=\"_blank\" rel=\"noreferrer noopener\" style=\"cursor:inherit;display:inline-block;position:relative;line-height:1;max-width:100%;color:inherit;\"><span style=\"display:inline-block;overflow:hidden;font-size:1px;\"><img width=\"350\" height=\"350\" style=\"display:inline-block;vertical-align:top;object-fit:contain;border:none;outline:none;width:100%;image-rendering:auto;image-rendering:-moz-crisp-edges;image-rendering:-webkit-optimize-contrast;image-rendering:pixelated;image-rendering:crisp-edges;\"></span></a></li></ul><style>.yomitan-glossary ul[data-sc-content='glossary'] {\n color: #ffff00;\n}</style></div>",
"part-of-speech": "Noun",
"pitch-accents": "",
"pitch-accent-graphs": "",
Expand Down Expand Up @@ -1570,12 +1570,12 @@
"frequency-average-occurrence": "0",
"furigana": "<ruby>画像<rt>がぞう</rt></ruby>",
"furigana-plain": "画像[がぞう]",
"glossary": "<div style=\"text-align: left;\" class=\"yomitan-glossary\"><i>(n, termsDictAlias)</i> <ul><li>gazou definition 1</li><li><a target=\"_blank\" rel=\"noreferrer noopener\" style=\"cursor:inherit;display:inline-block;position:relative;line-height:1;max-width:100%;color:inherit;\"><span style=\"display:inline-block;font-size:1px;\"><img width=\"350\" height=\"350\" style=\"display:inline-block;vertical-align:top;object-fit:contain;border:none;outline:none;width:100%;image-rendering:auto;image-rendering:-moz-crisp-edges;image-rendering:-webkit-optimize-contrast;image-rendering:pixelated;image-rendering:crisp-edges;\"></span></a></li></ul><style>.yomitan-glossary ul[data-sc-content='glossary'] {\n color: #ffff00;\n}</style></div>",
"glossary-brief": "<div style=\"text-align: left;\" class=\"yomitan-glossary\"><ul><li>gazou definition 1</li><li><a target=\"_blank\" rel=\"noreferrer noopener\" style=\"cursor:inherit;display:inline-block;position:relative;line-height:1;max-width:100%;color:inherit;\"><span style=\"display:inline-block;font-size:1px;\"><img width=\"350\" height=\"350\" style=\"display:inline-block;vertical-align:top;object-fit:contain;border:none;outline:none;width:100%;image-rendering:auto;image-rendering:-moz-crisp-edges;image-rendering:-webkit-optimize-contrast;image-rendering:pixelated;image-rendering:crisp-edges;\"></span></a></li></ul><style>.yomitan-glossary ul[data-sc-content='glossary'] {\n color: #ffff00;\n}</style></div>",
"glossary-no-dictionary": "<div style=\"text-align: left;\" class=\"yomitan-glossary\"><i>(n)</i> <ul><li>gazou definition 1</li><li><a target=\"_blank\" rel=\"noreferrer noopener\" style=\"cursor:inherit;display:inline-block;position:relative;line-height:1;max-width:100%;color:inherit;\"><span style=\"display:inline-block;font-size:1px;\"><img width=\"350\" height=\"350\" style=\"display:inline-block;vertical-align:top;object-fit:contain;border:none;outline:none;width:100%;image-rendering:auto;image-rendering:-moz-crisp-edges;image-rendering:-webkit-optimize-contrast;image-rendering:pixelated;image-rendering:crisp-edges;\"></span></a></li></ul><style>.yomitan-glossary ul[data-sc-content='glossary'] {\n color: #ffff00;\n}</style></div>",
"glossary-first": "<div style=\"text-align: left;\" class=\"yomitan-glossary\"><i>(n, termsDictAlias)</i> <ul><li>gazou definition 1</li><li><a target=\"_blank\" rel=\"noreferrer noopener\" style=\"cursor:inherit;display:inline-block;position:relative;line-height:1;max-width:100%;color:inherit;\"><span style=\"display:inline-block;font-size:1px;\"><img width=\"350\" height=\"350\" style=\"display:inline-block;vertical-align:top;object-fit:contain;border:none;outline:none;width:100%;image-rendering:auto;image-rendering:-moz-crisp-edges;image-rendering:-webkit-optimize-contrast;image-rendering:pixelated;image-rendering:crisp-edges;\"></span></a></li></ul><style>.yomitan-glossary ul[data-sc-content='glossary'] {\n color: #ffff00;\n}</style></div>",
"glossary-first-brief": "<div style=\"text-align: left;\" class=\"yomitan-glossary\"><ul><li>gazou definition 1</li><li><a target=\"_blank\" rel=\"noreferrer noopener\" style=\"cursor:inherit;display:inline-block;position:relative;line-height:1;max-width:100%;color:inherit;\"><span style=\"display:inline-block;font-size:1px;\"><img width=\"350\" height=\"350\" style=\"display:inline-block;vertical-align:top;object-fit:contain;border:none;outline:none;width:100%;image-rendering:auto;image-rendering:-moz-crisp-edges;image-rendering:-webkit-optimize-contrast;image-rendering:pixelated;image-rendering:crisp-edges;\"></span></a></li></ul><style>.yomitan-glossary ul[data-sc-content='glossary'] {\n color: #ffff00;\n}</style></div>",
"glossary-first-no-dictionary": "<div style=\"text-align: left;\" class=\"yomitan-glossary\"><i>(n)</i> <ul><li>gazou definition 1</li><li><a target=\"_blank\" rel=\"noreferrer noopener\" style=\"cursor:inherit;display:inline-block;position:relative;line-height:1;max-width:100%;color:inherit;\"><span style=\"display:inline-block;font-size:1px;\"><img width=\"350\" height=\"350\" style=\"display:inline-block;vertical-align:top;object-fit:contain;border:none;outline:none;width:100%;image-rendering:auto;image-rendering:-moz-crisp-edges;image-rendering:-webkit-optimize-contrast;image-rendering:pixelated;image-rendering:crisp-edges;\"></span></a></li></ul><style>.yomitan-glossary ul[data-sc-content='glossary'] {\n color: #ffff00;\n}</style></div>",
"glossary": "<div style=\"text-align: left;\" class=\"yomitan-glossary\"><i>(n, termsDictAlias)</i> <ul><li>gazou definition 1</li><li><a target=\"_blank\" rel=\"noreferrer noopener\" style=\"cursor:inherit;display:inline-block;position:relative;line-height:1;max-width:100%;color:inherit;\"><span style=\"display:inline-block;overflow:hidden;font-size:1px;\"><img width=\"350\" height=\"350\" style=\"display:inline-block;vertical-align:top;object-fit:contain;border:none;outline:none;width:100%;image-rendering:auto;image-rendering:-moz-crisp-edges;image-rendering:-webkit-optimize-contrast;image-rendering:pixelated;image-rendering:crisp-edges;\"></span></a></li></ul><style>.yomitan-glossary ul[data-sc-content='glossary'] {\n color: #ffff00;\n}</style></div>",
"glossary-brief": "<div style=\"text-align: left;\" class=\"yomitan-glossary\"><ul><li>gazou definition 1</li><li><a target=\"_blank\" rel=\"noreferrer noopener\" style=\"cursor:inherit;display:inline-block;position:relative;line-height:1;max-width:100%;color:inherit;\"><span style=\"display:inline-block;overflow:hidden;font-size:1px;\"><img width=\"350\" height=\"350\" style=\"display:inline-block;vertical-align:top;object-fit:contain;border:none;outline:none;width:100%;image-rendering:auto;image-rendering:-moz-crisp-edges;image-rendering:-webkit-optimize-contrast;image-rendering:pixelated;image-rendering:crisp-edges;\"></span></a></li></ul><style>.yomitan-glossary ul[data-sc-content='glossary'] {\n color: #ffff00;\n}</style></div>",
"glossary-no-dictionary": "<div style=\"text-align: left;\" class=\"yomitan-glossary\"><i>(n)</i> <ul><li>gazou definition 1</li><li><a target=\"_blank\" rel=\"noreferrer noopener\" style=\"cursor:inherit;display:inline-block;position:relative;line-height:1;max-width:100%;color:inherit;\"><span style=\"display:inline-block;overflow:hidden;font-size:1px;\"><img width=\"350\" height=\"350\" style=\"display:inline-block;vertical-align:top;object-fit:contain;border:none;outline:none;width:100%;image-rendering:auto;image-rendering:-moz-crisp-edges;image-rendering:-webkit-optimize-contrast;image-rendering:pixelated;image-rendering:crisp-edges;\"></span></a></li></ul><style>.yomitan-glossary ul[data-sc-content='glossary'] {\n color: #ffff00;\n}</style></div>",
"glossary-first": "<div style=\"text-align: left;\" class=\"yomitan-glossary\"><i>(n, termsDictAlias)</i> <ul><li>gazou definition 1</li><li><a target=\"_blank\" rel=\"noreferrer noopener\" style=\"cursor:inherit;display:inline-block;position:relative;line-height:1;max-width:100%;color:inherit;\"><span style=\"display:inline-block;overflow:hidden;font-size:1px;\"><img width=\"350\" height=\"350\" style=\"display:inline-block;vertical-align:top;object-fit:contain;border:none;outline:none;width:100%;image-rendering:auto;image-rendering:-moz-crisp-edges;image-rendering:-webkit-optimize-contrast;image-rendering:pixelated;image-rendering:crisp-edges;\"></span></a></li></ul><style>.yomitan-glossary ul[data-sc-content='glossary'] {\n color: #ffff00;\n}</style></div>",
"glossary-first-brief": "<div style=\"text-align: left;\" class=\"yomitan-glossary\"><ul><li>gazou definition 1</li><li><a target=\"_blank\" rel=\"noreferrer noopener\" style=\"cursor:inherit;display:inline-block;position:relative;line-height:1;max-width:100%;color:inherit;\"><span style=\"display:inline-block;overflow:hidden;font-size:1px;\"><img width=\"350\" height=\"350\" style=\"display:inline-block;vertical-align:top;object-fit:contain;border:none;outline:none;width:100%;image-rendering:auto;image-rendering:-moz-crisp-edges;image-rendering:-webkit-optimize-contrast;image-rendering:pixelated;image-rendering:crisp-edges;\"></span></a></li></ul><style>.yomitan-glossary ul[data-sc-content='glossary'] {\n color: #ffff00;\n}</style></div>",
"glossary-first-no-dictionary": "<div style=\"text-align: left;\" class=\"yomitan-glossary\"><i>(n)</i> <ul><li>gazou definition 1</li><li><a target=\"_blank\" rel=\"noreferrer noopener\" style=\"cursor:inherit;display:inline-block;position:relative;line-height:1;max-width:100%;color:inherit;\"><span style=\"display:inline-block;overflow:hidden;font-size:1px;\"><img width=\"350\" height=\"350\" style=\"display:inline-block;vertical-align:top;object-fit:contain;border:none;outline:none;width:100%;image-rendering:auto;image-rendering:-moz-crisp-edges;image-rendering:-webkit-optimize-contrast;image-rendering:pixelated;image-rendering:crisp-edges;\"></span></a></li></ul><style>.yomitan-glossary ul[data-sc-content='glossary'] {\n color: #ffff00;\n}</style></div>",
"part-of-speech": "Noun",
"pitch-accents": "",
"pitch-accent-graphs": "",
Expand Down

0 comments on commit cd60eba

Please sign in to comment.