Add new structured content styling options (#2203)

Allow for arbitrary string assignment to the font-size property.
https://developer.mozilla.org/en-US/docs/Web/CSS/font-size

Add support for the text-align property.
https://developer.mozilla.org/en-US/docs/Web/CSS/text-align

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

3 files changed, 22 insertions, 3 deletions

diff --git a/ext/data/schemas/dictionary-term-bank-v3-schema.json b/ext/data/schemas/dictionary-term-bank-v3-schema.json
index a7c861d5..a52c18e0 100644
--- a/ext/data/schemas/dictionary-term-bank-v3-schema.json
+++ b/ext/data/schemas/dictionary-term-bank-v3-schema.json
@@ -252,7 +252,6 @@
                 },
                 "fontSize": {
                     "type": "string",
-                    "enum": ["xx-small", "x-small", "small", "medium", "large", "x-large", "xx-large", "xxx-large"],
                     "default": "medium"
                 },
                 "textDecorationLine": {
@@ -277,6 +276,11 @@
                     "enum": ["baseline", "sub", "super", "text-top", "text-bottom", "middle", "top", "bottom"],
                     "default": "baseline"
                 },
+                "textAlign": {
+                    "type": "string",
+                    "enum": ["start", "end", "left", "right", "center", "justify", "justify-all", "match-parent"],
+                    "default": "start"
+                },
                 "marginTop": {
                     "type": "number",
                     "default": 0
diff --git a/ext/js/display/sandbox/structured-content-generator.js b/ext/js/display/sandbox/structured-content-generator.js
index 0e287dc2..bf9c1fb2 100644
--- a/ext/js/display/sandbox/structured-content-generator.js
+++ b/ext/js/display/sandbox/structured-content-generator.js
@@ -265,6 +265,7 @@ class StructuredContentGenerator {
             fontSize,
             textDecorationLine,
             verticalAlign,
+            textAlign,
             marginTop,
             marginLeft,
             marginRight,
@@ -275,6 +276,7 @@ class StructuredContentGenerator {
         if (typeof fontWeight === 'string') { style.fontWeight = fontWeight; }
         if (typeof fontSize === 'string') { style.fontSize = fontSize; }
         if (typeof verticalAlign === 'string') { style.verticalAlign = verticalAlign; }
+        if (typeof textAlign === 'string') { style.textAlign = textAlign; }
         if (typeof textDecorationLine === 'string') {
             style.textDecoration = textDecorationLine;
         } else if (Array.isArray(textDecorationLine)) {
diff --git a/test/data/dictionaries/valid-dictionary1/term_bank_1.json b/test/data/dictionaries/valid-dictionary1/term_bank_1.json
index c8a83c9a..38b022fa 100644
--- a/test/data/dictionaries/valid-dictionary1/term_bank_1.json
+++ b/test/data/dictionaries/valid-dictionary1/term_bank_1.json
@@ -83,9 +83,13 @@
                 {"tag": "div", "style": {"fontWeight": "bold"}, "content": "fontWeight:bold"},
                 {"tag": "div", "style": {"fontSize": "xx-small"}, "content": "fontSize:xx-small"},
                 {"tag": "div", "style": {"fontSize": "x-small"}, "content": "fontSize:x-small"},
+                {"tag": "div", "style": {"fontSize": "70%"}, "content": "fontSize:70%"},
+                {"tag": "div", "style": {"fontSize": "smaller"}, "content": "fontSize:smaller"},
                 {"tag": "div", "style": {"fontSize": "small"}, "content": "fontSize:small"},
                 {"tag": "div", "style": {"fontSize": "medium"}, "content": "fontSize:medium"},
                 {"tag": "div", "style": {"fontSize": "large"}, "content": "fontSize:large"},
+                {"tag": "div", "style": {"fontSize": "larger"}, "content": "fontSize:larger"},
+                {"tag": "div", "style": {"fontSize": "130%"}, "content": "fontSize:130%"},
                 {"tag": "div", "style": {"fontSize": "x-large"}, "content": "fontSize:x-large"},
                 {"tag": "div", "style": {"fontSize": "xx-large"}, "content": "fontSize:xx-large"},
                 {"tag": "div", "style": {"fontSize": "xxx-large"}, "content": "fontSize:xxx-large"},
@@ -137,6 +141,15 @@
                         ]},
                         {"tag": "tr", "content": [
                             {"tag": "td", "content": "Cell A4"}
+                        ]},
+                        {"tag": "tr", "content": [
+                            {"tag": "td", "content": "Cell A5", "colSpan": 4, "style": {"textAlign": "left"}}
+                        ]},
+                        {"tag": "tr", "content": [
+                            {"tag": "td", "content": "Cell A6", "colSpan": 4, "style": {"textAlign": "center"}}
+                        ]},
+                        {"tag": "tr", "content": [
+                            {"tag": "td", "content": "Cell A7", "colSpan": 4, "style": {"textAlign": "right"}}
                         ]}
                     ]},
                     {"tag": "tfoot", "content": [
@@ -230,8 +243,8 @@
                 {"tag": "ul", "content": [
                     {"tag": "li", "style": {"listStyleType": "'⇄'"}, "content": ["【", {"tag": "a", "href": "?query=よみ&wildcards=off", "content": ["Antonym"]}, "】"]},
                     {"tag": "li", "style": {"listStyleType": "'🔄'"}, "content": ["【", {"tag": "a", "href": "?query=よみ&wildcards=off", "content": ["References and is referenced by"]}, "】"]},
-                    {"tag": "li", "style": {"listStyleType": "'➡'"}, "content": ["【", {"tag": "a", "href": "?query=よみ&wildcards=off", "content": ["References"]}, "】"]},
-                    {"tag": "li", "style": {"listStyleType": "'⬅'"}, "content": ["【", {"tag": "a", "href": "?query=よみ&wildcards=off", "content": ["Referenced by"]}, "】"]}
+                    {"tag": "li", "style": {"listStyleType": "'➡️'"}, "content": ["【", {"tag": "a", "href": "?query=よみ&wildcards=off", "content": ["References"]}, "】"]},
+                    {"tag": "li", "style": {"listStyleType": "'⬅️'"}, "content": ["【", {"tag": "a", "href": "?query=よみ&wildcards=off", "content": ["Referenced by"]}, "】"]}
                 ]}
             ]},
             {"type": "structured-content", "content": [