Add new structured content features: lists and the HTML `lang` attribute (#2129)

* Add support for structured content lists and `list-style-type` style

A full list of supported style types is documented here:
https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type

There's nothing in this code preventing a term bank from assigning,
for example, a `list-style-type` style to a `div` element, but it
doesn't seem like browsers will complain about things like that.

* Add support for `lang` attribute in structured content

Support added for the following node types:

"ruby", "rt", "rp", "table", "thead", "tbody", "tfoot", "tr", "td",
"th", "span", "div", "ol", "ul", "li", "a"

I couldn't get it to work for the alt-hover text on "img" tags.

Tests are included in the file
"test/data/dictionaries/valid-dictionary/term_bank_1.json"

* Add styles for structured content lists

* Add override rules for new structured-content list styles

see: https://github.com/FooSoft/yomichan/pull/2129

Co-authored-by: stephenmk <stephenmk@users.noreply.github.com>

3 files changed, 50 insertions, 3 deletions

diff --git a/ext/css/structured-content.css b/ext/css/structured-content.css
index 485527e5..5e863318 100644
--- a/ext/css/structured-content.css
+++ b/ext/css/structured-content.css
@@ -235,3 +235,21 @@
     padding: 0.25em;
     vertical-align: top;
 }
+.gloss-sc-ol,
+.gloss-sc-ul {
+    padding-left: var(--list-padding2);
+}
+:root[data-glossary-layout-mode=compact] .gloss-sc-ul[data-sc-content=glossary] {
+    display: inline;
+    list-style: none;
+    padding-left: 0;
+}
+:root[data-glossary-layout-mode=compact] .gloss-sc-ul[data-sc-content=glossary] .gloss-sc-li {
+    display: inline;
+}
+:root[data-glossary-layout-mode=compact] .gloss-sc-ul[data-sc-content=glossary] .gloss-sc-li:not(:first-child)::before {
+    white-space: pre-wrap;
+    content: var(--compact-list-separator);
+    display: inline;
+    color: var(--text-color-light3);
+}
diff --git a/ext/data/schemas/dictionary-term-bank-v3-schema.json b/ext/data/schemas/dictionary-term-bank-v3-schema.json
index 268a2c11..12c2e4f3 100644
--- a/ext/data/schemas/dictionary-term-bank-v3-schema.json
+++ b/ext/data/schemas/dictionary-term-bank-v3-schema.json
@@ -51,6 +51,10 @@
                                 },
                                 "data": {
                                     "$ref": "#/definitions/structuredContentData"
+                                },
+                                "lang": {
+                                    "type": "string",
+                                    "description": "Defines the language of an element in the format defined by RFC 5646."
                                 }
                             }
                         },
@@ -82,6 +86,10 @@
                                 },
                                 "style": {
                                     "$ref": "#/definitions/structuredContentStyle"
+                                },
+                                "lang": {
+                                    "type": "string",
+                                    "description": "Defines the language of an element in the format defined by RFC 5646."
                                 }
                             }
                         },
@@ -95,7 +103,7 @@
                             "properties": {
                                 "tag": {
                                     "type": "string",
-                                    "enum": ["span", "div"]
+                                    "enum": ["span", "div", "ol", "ul", "li"]
                                 },
                                 "content": {
                                     "$ref": "#/definitions/structuredContent"
@@ -105,6 +113,10 @@
                                 },
                                 "style": {
                                     "$ref": "#/definitions/structuredContentStyle"
+                                },
+                                "lang": {
+                                    "type": "string",
+                                    "description": "Defines the language of an element in the format defined by RFC 5646."
                                 }
                             }
                         },
@@ -206,6 +218,10 @@
                                     "type": "string",
                                     "description": "The URL for the link. URLs starting with a ? are treated as internal links to other dictionary content.",
                                     "pattern": "^(?:https?:|\\?)[\\w\\W]*"
+                                },
+                                "lang": {
+                                    "type": "string",
+                                    "description": "Defines the language of an element in the format defined by RFC 5646."
                                 }
                             }
                         }
@@ -276,6 +292,10 @@
                 "marginBottom": {
                     "type": "number",
                     "default": 0
+                },
+                "listStyleType": {
+                    "type": "string",
+                    "default": "disc"
                 }
             }
         }
diff --git a/ext/js/display/sandbox/structured-content-generator.js b/ext/js/display/sandbox/structured-content-generator.js
index eb847d07..6102cfdd 100644
--- a/ext/js/display/sandbox/structured-content-generator.js
+++ b/ext/js/display/sandbox/structured-content-generator.js
@@ -56,6 +56,9 @@ class StructuredContentGenerator {
                 return this._createStructuredContentElement(tag, content, dictionary, 'table-cell', true, true);
             case 'div':
             case 'span':
+            case 'ol':
+            case 'ul':
+            case 'li':
                 return this._createStructuredContentElement(tag, content, dictionary, 'simple', true, true);
             case 'img':
                 return this.createDefinitionImage(content, dictionary);
@@ -204,8 +207,9 @@ class StructuredContentGenerator {
 
     _createStructuredContentElement(tag, content, dictionary, type, hasChildren, hasStyle) {
         const node = this._createElement(tag, `gloss-sc-${tag}`);
-        const {data} = content;
+        const {data, lang} = content;
         if (typeof data === 'object' && data !== null) { this._setElementDataset(node, data); }
+        if (typeof lang === 'string') { node.lang = lang; }
         switch (type) {
             case 'table-cell':
                 {
@@ -239,7 +243,8 @@ class StructuredContentGenerator {
             marginTop,
             marginLeft,
             marginRight,
-            marginBottom
+            marginBottom,
+            listStyleType
         } = contentStyle;
         if (typeof fontStyle === 'string') { style.fontStyle = fontStyle; }
         if (typeof fontWeight === 'string') { style.fontWeight = fontWeight; }
@@ -254,6 +259,7 @@ class StructuredContentGenerator {
         if (typeof marginLeft === 'number') { style.marginLeft = `${marginLeft}em`; }
         if (typeof marginRight === 'number') { style.marginRight = `${marginRight}em`; }
         if (typeof marginBottom === 'number') { style.marginBottom = `${marginBottom}em`; }
+        if (typeof listStyleType === 'string') { style.listStyleType = listStyleType; }
     }
 
     _createLinkElement(content, dictionary) {
@@ -269,6 +275,9 @@ class StructuredContentGenerator {
         const text = this._createElement('span', 'gloss-link-text');
         node.appendChild(text);
 
+        const {lang} = content;
+        if (typeof lang === 'string') { node.lang = lang; }
+
         const child = this.createStructuredContent(content.content, dictionary);
         if (child !== null) { text.appendChild(child); }