{glossary} with Compact glossaries + jmdict_extra is not fully compact

[Aquafina-water-bottle]

Description
Using the jmdict_english_extra_with_examples_2023_01_29.zip dictionary from FooSoft/yomichan-import#40, and with Popup Appearance -> Compact glossaries enabled, the exported result of {glossary} does not properly compact some <li> elements. However, it is properly compacted on the actual popup in Yomichan.

I'm guessing it has to do with the dictionary format, i.e. the custom list-style-type.

Example: 仕舞う

This example works on the 2nd entry, but not the rest.

<div style="text-align: left;"><ol><li><i>(1, v5u, vt, uk, JMdict)</i> <span><ul data-sc-content="glossary" lang="en" style="list-style-type: circle;"><li>to finish</li><li>to stop</li><li>to end</li><li>to put an end to</li><li>to bring to a close</li></ul><ul data-sc-content="examples" lang="ja" style="list-style-type: &quot;🇯🇵 &quot;;"><li>買い物を済ませてしまったら電話します。</li><li lang="en" style="list-style-type: &quot;🇬🇧 &quot;;">I will call you when I have done my shopping.</li></ul></span></li><li><i>(2, v5u, vt, uk, JMdict)</i> to close (a business, etc.) | to close down | to shut down | to shut up</li><li><i>(3, v5u, vt, uk, JMdict)</i> <span><ul data-sc-content="glossary" lang="en" style="list-style-type: circle;"><li>to put away</li><li>to put back</li><li>to keep</li><li>to store</li></ul><ul data-sc-content="examples" lang="ja" style="list-style-type: &quot;🇯🇵 &quot;;"><li>本とノートをしまいなさい。</li><li lang="en" style="list-style-type: &quot;🇬🇧 &quot;;">Put away your books and notebooks.</li></ul></span></li><li><i>(4, aux-v, v5u, uk, JMdict)</i> <span><ul data-sc-content="glossary" lang="en" style="list-style-type: circle;"><li>to do completely</li><li>to finish</li></ul><ul data-sc-content="notes" lang="ja" style="list-style-type: &quot;📝 &quot;;"><li>after the -te form of a verb</li></ul><ul data-sc-content="examples" lang="ja" style="list-style-type: &quot;🇯🇵 &quot;;"><li>やってしまったことは元に戻らない。</li><li lang="en" style="list-style-type: &quot;🇬🇧 &quot;;">What is done cannot be undone.</li></ul></span></li><li><i>(5, aux-v, v5u, uk, JMdict)</i> <span><ul data-sc-content="glossary" lang="en" style="list-style-type: circle;"><li>to do accidentally</li><li>to do without meaning to</li><li>to happen to do</li></ul><ul data-sc-content="notes" lang="ja" style="list-style-type: &quot;📝 &quot;;"><li>after the -te form of a verb</li></ul></span></li><li><i>(forms, JMdict)</i> 仕舞う（★） | 終う | 了う | 蔵う</li></ol></div>

Example: 健康

This example works on the 2nd entry, but not the first.

<div style="text-align: left;"><ol><li><i>(1, n, JMdict)</i> <span><ul data-sc-content="glossary" lang="en" style="list-style-type: circle;"><li>health</li></ul><ul data-sc-content="examples" lang="ja" style="list-style-type: &quot;🇯🇵 &quot;;"><li>煙草をすうことは健康に悪い。</li><li lang="en" style="list-style-type: &quot;🇬🇧 &quot;;">Smoking is bad for the health.</li></ul></span></li><li><i>(2, adj-na, JMdict)</i> healthy | sound | fit | wholesome</li></ol></div>

Example: 猛暑日

<div style="text-align: left;"><i>(n, JMdict)</i> <span><ul data-sc-content="glossary" lang="en" style="list-style-type: circle;"><li>day on which the temperature rises above 35°C</li><li>extremely hot day</li></ul><ul data-sc-content="references" lang="en" style="list-style-type: &quot;➡️ &quot;;"><li>see: <a lang="ja" href="#"><span>夏日</span></a><span data-sc-content="refGlosses" style="font-size: 65%; vertical-align: middle;"> 2. day on which the temperature reaches at least 25°C</span></li><li>see: <a lang="ja" href="#"><span>真夏日</span></a><span data-sc-content="refGlosses" style="font-size: 65%; vertical-align: middle;"> day on which the temperature rises above 30°C</span></li></ul></span></div>

Browser version
Chromium 109.0.5414.119

Yomichan version
22.10.23.0

Exported settings file
The settings should be more or less the default settings, but I included it here just in case.
yomichan-settings-2023-02-11-08-39-37.zip

[stephenmk]

Thanks for the bug report. I'll see if I can find a solution. In the meantime, you can produce the desired behavior by adding some custom CSS to your anki cards:

ul[data-sc-content="glossary"] li {
  display: inline-block;
  padding-right: 1em;
  margin-right: 1em;
  border-right: 2px solid;
}

ul[data-sc-content="glossary"] li:last-of-type {
  padding-right: 0px;
  margin-right: 0px;
  border-right: 0px solid;
}

Example: 仕舞う

Example: 健康

Example: 猛暑日

[stephenmk]

First a little background on this. The normal style of glossaries are formatted in the *.json term-bank files like this:

["gloss1", "gloss2", "gloss3"]

In my current redesign of the JMdict file for Yomichan, terms with extra lists of information do not follow this format. Instead of an array of strings, the glossary array only contains one "structured-content" object. Its format looks sort of like this:

[
  {
    "type": "structured-content", 
    "content": [{list-of-glosses},
                {list-of-notes},
                {list-of-references},
                {list-of-example-sentences},
                ...
               ]
  }
]

Within the Yomichan browser popup, we only want the {list-of-glosses} content to be compacted in "compact glossaries" mode. If the example sentences and notes are compacted, they'll lose their emoji icons and line-breaks, making them difficult to distinguish from each other.

I submitted an edit for Yomichan last year which specifically targets this {list-of-glosses} content to make it compacted when "compact glossaries" mode is enabled in the browser popup. But this styling does not carry over to exported Anki cards. For the normal style of glossaries, this conversion to Anki is handled by the Handlebars.js template:

yomichan/ext/data/templates/default-anki-field-templates.handlebars

Lines 23 to 31 in 2ee3e3a

	{{~#if (op "<=" glossary.length 1)~}}
	{{#each glossary}}{{#formatGlossary ../dictionary}}{{{.}}}{{/formatGlossary}}{{/each}}
	{{~else if @root.compactGlossaries~}}
	{{#each glossary}}{{#formatGlossary ../dictionary}}{{{.}}}{{/formatGlossary}}{{#unless @last}} | {{/unless}}{{/each}}
	{{~else~}}
	<ul>{{#each glossary}}<li>{{#formatGlossary ../dictionary}}{{{.}}}{{/formatGlossary}}</li>{{/each}}</ul>
	{{~/if~}}
	{{~#set "previousDictionary" dictionary~}}{{~/set~}}
	{{/inline}}

On lines 25-26 in the code above, a normal glossary like ["gloss1", "gloss2", "gloss3"] is converted into "gloss1 | gloss 2 | gloss3" during Anki card creation if Yomichan is in compact mode. For my redesigned glossaries, the "length" of the glossary array is always equal to 1 (because it only contains 1 object), and so it it processed in lines 23-24 in the code above.

---

So I think there are three different approaches we can take to solve this problem

1. Update the Yomichan browser extension itself to process the {list-of-glosses} content during the export to Anki.
2. Update my redesigned dictionary file to store the {list-of-glosses} content as regular string glosses.
   Like this: ["gloss1", "gloss2", "gloss3", {structured-content-object-with-all-extra-info}]
3. Do nothing and require users to add the custom CSS styles to their Anki cards if they want the glosses compacted.

---

I think option #1 is probably off the table for now. Too much time and effort.

Option #2 will solve the issue, but I think it's kind of ugly. See the example images below. These are minor gripes, though.

読む in compact mode. There are trailing border symbols.

読む in non-compact mode. The extra glosses are no longer flush-left with the other glosses.

Option #3 is personally my preference. In the first place, I don't think it's good for Yomichan to be removing the HTML structure from these glossaries during the export to Anki. I like to see the glossaries in "compact mode" when I'm doing reviews on my PC, but on my phone I prefer to have them in bulleted lists. As long as the HTML structure is maintained, I can use CSS to adjust the presentation of the info depending upon the window's screen size. This can't be done when the glossaries are converted to a flat string like gloss1 | gloss2 | gloss3. So I've removed that function (lines 25-26 in the code above) from my Anki export template in my Yomichan settings.

That's just my two cents. If option #2 sounds like the best solution to everyone else, I don't have a problem making that change. It's a pretty simple adjustment.

[Aquafina-water-bottle]

Thanks for the super detailed reply! Out of the three options, I'm personally fine with using custom CSS to compact the cards. However, I know that there are some people that highly prefer plaintext definitions, and my initial guess is that option #2 is not appealing to most people. Right now, I think it would be best to keep this issue up in case anyone wants to pick up the work in Yomichan to implement option #1 since I believe that option is best for all parties (so long as someone wants to spend the time and effort on it.)

One final note: I believe there is a 4th hacky potential option. If the dictionary for option #2 is created and named something different, say JMdict Anki, it would be possible to hide the JMdict Anki dictionary in the popup with CSS. On card export, one would have to edit the handlebars to skip the JMdict (English) dictionary, so it only exports JMdict Anki.

Thanks again for all your hard work on making these dictionaries!