-
Notifications
You must be signed in to change notification settings - Fork 5
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Modify list-style-type for example sentences and info glosses #5
Conversation
The info emoji and the flag emojis do not display well in Chrome-based browsers. These new symbols are more abstract, but it should be a better default for most users.
Thank you for trying to resolve this. Would including a font that has those emoji directly in yomichan/yomitan be another way to resolve this? |
This blog post describes some of the difficulties in using emoji characters in browsers. It seems the reason why the emoji display correctly in firefox is due to the bundled Twemoji Mozilla font. Chrome browsers apparently don't ship with bundled fonts, and the native fonts it uses often don't implement many emoji. So I expect that bundling a font in yomitan would allow the characters to display correctly. I don't know if it would be worth the time and effort, though. The idea of using flag emoji to denote example sentences was just an idea I had, and it doesn't seem essential for a good user experience. There are other use cases for bundled fonts, though. For example, Wiktionary displays a variant form of 牙 by wrapping the character in a Korean language So if yomitan included bundled Korean and Chinese fonts in addition to a Japanese font, it would be able to natively display these variant forms reliably. But again, this is kind of an obscure feature that might not be worth the effort. If you really want to display the alternate 牙 form in a yomitan dictionary, you could just use an inline SVG image instead. |
I think the filled square and filled circle resemble each other a tiny bit too much. Maybe the info emoji can be something like "◆"? I've seen this symbol used in other dictionaries before, for example, in 明鏡国語辞典: Here's an example with ◆ in JMdict (using the previous version + custom CSS): JMdict CSS usedul[data-sc-content="infoGlossary"] {
list-style-type: "◆ " !important;
}
ul[data-sc-content="examples"] {
list-style: disc !important;
}
ul[data-sc-content="examples"] > li[lang="en"] {
list-style: none !important;
font-size: 0.7em
} I'm not a fan of the asymmetry introduced with ◆, but maybe there's a better example out there. |
I think following the typography/iconography conventions used in monolingual dictionaries is actually a great idea, as it will make for a slightly easier transition to such dictionaries as learners get more advanced, and in general just makes for a more consistent ecosystem. Here are how various dicts do it: 明鏡: 三国: 大辞泉: |
The monolingual references mostly don't share the same iconography, so I don't think there's much we can do there as far as consistency goes. Yomichan/tan uses the circle (○) list-style-type for glossaries that don't use structured content. So by default, regular glosses in JMdict are marked with a circle (○). I chose the disk (●) list-style-type for the "information" glosses (e.g. "wanting even the help of a cat") because these are also glosses (as opposed to metadata), so it seemed fitting to use a similar shape. The example sentences are pretty obviously example sentences regardless of which symbol we use. Unlike the notepad emoji used with notes or the globe emoji used with loanword information, the symbol doesn't need to convey any extra information to help users quickly understand what they're looking at. I think it mostly just serves as a guide to the eye, so any choice of symbol should be fine as long as it's not too similar to the others. The disc (●) and square list-style-types do look pretty similar at a glance. The diamond symbol ◆ can also look pretty similar to the disc depending on how large a browser chooses to render it. How about a fullwidth asterisk * character? I think it's sufficiently distinct from all other symbols used in the dictionary. |
I think that for readability purposes, the fullwidth asterisk is definitely distinct enough to differentiate at a glance, and for that reason alone, I prefer that solution over the original and my previous suggestion. However, it does seem a bit weird to use it as a symbol to represent an example sentence. As another quick suggestion, what are your thoughts on encasing the example sentences in quotes 「」? I'm not too sure if this is 100% replicable in structured content (in particular, the padding-left overrides), but here's an example of what I'm thinking of: JMdict CSS used (again, on the old version)ul[data-sc-content="infoGlossary"] {
list-style-type: "◆ " !important;
}
ul[data-sc-content="examples"] {
list-style: disc !important;
}
ul[data-sc-content="examples"] {
padding-left: 0em !important;
list-style: none !important;
}
ul[data-sc-content="examples"] > li[lang="en"] {
list-style: none !important;
font-size: 0.7em;
padding-left: 1.428em !important;
}
ul[data-sc-content="examples"] > li:not([lang="en"]):before {
content: "「"
}
ul[data-sc-content="examples"] > li:not([lang="en"]):after {
content: "」"
} |
Some of the examples already use 「」 brackets inside of the sentences (see 赤恥, 驀地・ばくち, 躍動感, etc.), so it might look funny if we wrap brackets within brackets. Some of the sentences use 『』 brackets too. Besides that, the brackets take up extra space which can be valuable to have in a popup window. The yomichan dictionary format doesn't allow for fancy built-in CSS styles, so we can't use those tricks to save space by default. |
I would far prefer 「」 around the example sentences. I think it's a good use of space as it's the standard indicator for that within monolingual dictionaries. It is true that there are space constraints, but yomichan/yomitan popups use screen real estate very poorly overall and need some UI attention. I don't think golfing away the quotation is the right way to achieve that. That said if we could extend the dictionary format to support example sentences first-class, I think that'd be the most future-proof solution, as all styling concerns could then be delegated to yomitan proper. So my recommendation for now is to wrap example sentences in 「」, and if there are already any 「」 within the definition, replace them with 『』 . For sentences that have 『』 I think we can leave it as is. What do you think @stephenmk ? |
One quick note: If we are indeed using 「」 for example sentences, it might be nice to strip the final 。 from sentences, if it exists. |
The quotation marks are not a convention used by major J-E dictionaries like Kenkyusha's New Japanese-English Dictionary (GG5), Shogakukan's Progressive, Sanseido's Wisdom, etc. They simply use some sort of bullet point. I think it's very clear from context that these example sentences are example sentences, and the bullet point really just serves as a visual aid to help users quickly parse page contents. Wrangling the example sentence data to add the quotation marks as described would require some time and effort. Personally, I don't see any value in it. I do appreciate and thank you all for the feedback. I know everyone here cares deeply about the quality and usefulness of these tools. There are still a few unresolved formatting issues with my new version of JMdict. Notably, part-of-speech tags are displayed in the wrong order, and term tags can sometimes be misleading when terms from separate entries are merged (see "Problems and Considerations"). I think I might redesign the dictionary once again sometime in the future to resolve these problems. If/when I get to that, your feedback would be invaluable. よろしくお願いします。 |
Going to focus my future developments of JMdict into my jitenbot project, which has the advantage of supporting MDict (.mdx / .mdd) formats in addition to yomichan. |
I've received feedback from users of the new JMdict version for yomichan that the info emoji and the flag emojis do not display well in Chrome-based browsers.
I suggest changing these symbols to simple geometric shapes. These new symbols are more abstract, but it should be a better default for most users. Emojis can still be customized by applying some custom CSS.
I've changed the info emoji to a disc, the Japanese flag emoji to a square, and removed the UK flag emoji altogether. I also made the font size smaller for the English example sentences. I think these should still be legible at smaller sizes, and it will help save space.
Example: 上方絵 and 上方 (before changes)
Example: 上方絵 and 上方 (after changes)
Example: 猫の手も借りたい (after changes)
Example: 猫の手も借りたい (compact mode)
Here's a copy of the dictionary with these proposed changes.
jmdict_english_extra_with_examples.zip (04/04/2023)jmdict_english_extra_with_examples.zip (04/09/2023)