Improve Anki styles for gloss-sc-li

Author: classicsc

MaruAnkiTests/GlossaryHTMLFormatTests.swift

@@ -34,7 +34,8 @@ struct GlossaryHTMLFormatTests {
         term: String = "映像",
         reading: String? = "えいぞう",
         dictionaryTitle: String = "Dictionary A",
-        dictionaryUUID: UUID = UUID()
+        dictionaryUUID: UUID = UUID(),
+        definitions: [Definition] = [.text("Test definition")]
     ) -> SearchResult {
         let candidate = LookupCandidate(from: term)
         let rankingCriteria = RankingCriteria(
@@ -55,7 +56,7 @@ struct GlossaryHTMLFormatTests {
             candidate: candidate,
             term: term,
             reading: reading,
-            definitions: [.text("Test definition")],
+            definitions: definitions,
             frequency: nil,
             frequencies: [],
             pitchAccents: [],
@@ -196,6 +197,80 @@ struct GlossaryHTMLFormatTests {
         #expect(html.contains("<li data-dictionary="), "Missing li with data-dictionary")
     }
 
+    @Test("Single dictionary glossary preserves Jitendex sense lists", .bug("https://github.com/classicsc/MaruReader/issues/26"))
+    func singleDictionaryGlossary_preservesJitendexSenseList() async throws {
+        let dictionaryUUID = UUID()
+        let definitionJSON = #"""
+        {
+          "type": "structured-content",
+          "content": {
+            "tag": "ul",
+            "data": {"content": "sense-groups"},
+            "content": {
+              "tag": "li",
+              "data": {"content": "sense-group"},
+              "content": [
+                {
+                  "tag": "span",
+                  "data": {"class": "tag", "content": "part-of-speech-info"},
+                  "content": "noun"
+                },
+                {
+                  "tag": "ol",
+                  "content": {
+                    "tag": "li",
+                    "style": {"listStyleType": "\"①\""},
+                    "data": {"content": "sense"},
+                    "content": {
+                      "tag": "ul",
+                      "data": {"content": "glossary"},
+                      "content": [
+                        {"tag": "li", "content": "major recession"},
+                        {"tag": "li", "content": "serious depression"}
+                      ]
+                    }
+                  }
+                }
+              ]
+            }
+          }
+        }
+        """#
+        let definition = try JSONDecoder().decode(Definition.self, from: Data(definitionJSON.utf8))
+        let result = makeTestSearchResult(
+            term: "大不況",
+            reading: "だいふきょう",
+            dictionaryTitle: "Jitendex",
+            dictionaryUUID: dictionaryUUID,
+            definitions: [definition]
+        )
+        let dictionaryResults = makeDictionaryResults(
+            dictionaryTitle: "Jitendex",
+            dictionaryUUID: dictionaryUUID,
+            searchResults: [result]
+        )
+        let group = makeGroupedSearchResults(
+            expression: "大不況",
+            reading: "だいふきょう",
+            dictionariesResults: [dictionaryResults]
+        )
+        let response = makeTextLookupResponse(selectedGroup: group)
+        let resolver = TextLookupResponseTemplateResolver(
+            response: response,
+            selectedGroup: group,
+            selectedDictionaryID: dictionaryUUID
+        )
+
+        let resolved = await resolver.resolve(.singleDictionaryGlossary(dictionaryID: dictionaryUUID))
+        let html = try #require(resolved.text)
+
+        #expect(html.contains("<ol><li data-dictionary=\"Jitendex\">"))
+        #expect(html.contains("<ul style=\"margin: 0; padding-left: 1.5em; list-style-type: circle;\">"))
+        #expect(html.contains("<ol class=\"gloss-sc-ol\">"))
+        #expect(html.contains("list-style-type: &quot;①&quot;"))
+        #expect(html.contains("data-sc-content=\"glossary\""))
+    }
+
     @Test func singleGlossary_usesFirstDisplayedDictionary() async {
         let firstDictionary = makeDictionaryResults(dictionaryTitle: "Dictionary A")
         let secondDictionary = makeDictionaryResults(dictionaryTitle: "Dictionary B")

MaruReaderCore/DictionarySearch/AnkiStyleProvider.swift

@@ -295,6 +295,23 @@ public enum AnkiStyleProvider {
         display: list-item;
     }
 
+    /* Compact glossary lists */
+    .gloss-sc-ul[data-sc-content=glossary] {
+        display: inline;
+        list-style: none;
+        padding-left: 0;
+    }
+
+    .gloss-sc-ul[data-sc-content=glossary] .gloss-sc-li {
+        display: inline;
+    }
+
+    .gloss-sc-ul[data-sc-content=glossary] .gloss-sc-li:not(:first-child)::before {
+        white-space: pre-wrap;
+        content: ", ";
+        display: inline;
+    }
+
     /* Link styles */
     .gloss-link {
         color: #0066cc;

MaruReaderCore/DictionaryTypes/Definition.swift

@@ -211,7 +211,7 @@ extension [Definition] {
             let definitionHTML = definition.toAnkiHTML(mediaBaseURL: mediaBaseURL)
             return "<li style=\"margin: 0.25em 0;\" data-index=\"\(index)\">\(definitionHTML)</li>"
         }.joined()
-        return "<ol style=\"margin: 0; padding-left: 1.5em; list-style-type: decimal;\">\(itemsHTML)</ol>"
+        return "<ul style=\"margin: 0; padding-left: 1.5em; list-style-type: circle;\">\(itemsHTML)</ul>"
     }
 
     /// Extracts all image paths from the definitions.

MaruReaderCoreTests/AnkiStyleProviderTests.swift

@@ -71,6 +71,17 @@ struct AnkiStyleProviderTests {
         #expect(css.contains("padding-left: 2em"))
     }
 
+    @Test("Base styles compact structured glossary lists", .bug("https://github.com/classicsc/MaruReader/issues/26"))
+    func baseStylesCSS_containsCompactGlossaryListStyles() {
+        let css = AnkiStyleProvider.baseStylesCSS()
+
+        #expect(css.contains(".gloss-sc-ul[data-sc-content=glossary]"))
+        #expect(css.contains(".gloss-sc-ul[data-sc-content=glossary] .gloss-sc-li"))
+        #expect(css.contains("display: inline"))
+        #expect(css.contains("list-style: none"))
+        #expect(css.contains("content: \", \""))
+    }
+
     @Test func baseStylesCSS_containsLinkStyles() {
         let css = AnkiStyleProvider.baseStylesCSS()
 

MaruReaderCoreTests/DefinitionHTMLGenerationTests.swift

@@ -175,6 +175,20 @@ struct DefinitionHTMLGenerationTests {
         #expect(html.contains("<ul class=\"gloss-glossary-list\""))
     }
 
+    @Test("Anki definitions use an unordered circle list", .bug("https://github.com/classicsc/MaruReader/issues/26"))
+    func arrayOfDefinitions_toAnkiHTML_usesCircleList() {
+        let definitions: [Definition] = [
+            .text("First definition"),
+            .text("Second definition"),
+        ]
+
+        let html = definitions.toAnkiHTML()
+
+        #expect(html.hasPrefix("<ul style=\"margin: 0; padding-left: 1.5em; list-style-type: circle;\">"))
+        #expect(html.contains("list-style-type: decimal") == false)
+        #expect(html.hasSuffix("</ul>"))
+    }
+
     @Test func imageDefinition_toHTML_rendersDescriptionWrapper() {
         let image = ImageDef(
             type: "image",