Diacritics displayed differently & consistently between the WRITE & PREVIEW tabs
sophlew opened this issue · 7 comments
User feedback, in the Holmer material there are lots of diacritics/symbols etc. These are inconsistently displayed between the WRITE and PREVIEW tabs.
Incorrect display examples can be found on pages WakkaGoreng-008A and WakkaGoreng-008B, see screenshots. WakkaGoreng-008B, line 16, over the e and in ben, the character has moved "d'ūm bē̜̆n be̜ 'smoking' (JW)".
Correct display example in WarregoBurdekinV-046A, see screenshot, line 5. Is this something to do with how different users have edited the text? Please help.
I think this is a display issue but i'm really not sure. @Conal-Tuohy What do you think?
Some of these I have been able to fix.
WakkaGoreng-008B still has an issue. This text (line 15) bē̜̆n be̜ 'smoking' (JW). @Conal-Tuohy could you please take. The symbols over e are being elongated.
am I right in thinking the text should actually appear something like this?
I think we can fix this by using a font with better support for combining diacritics. At the moment the web pages are relying on the browser's generic monospace font, which will vary between different users' computers, and will often not be a great font. To get a consistent rendering, we should actually supply a particular font, and specify that it's the font used to display the transcription.
I have created a work-around for this that seems to do the trick, in my browser, just by using the Chrome dev tools to add a user CSS stylesheet that loads a specific font (the monospaced version of Google's "Noto" font, which is a font that's designed specifically for good multilingual support), and then overrides the font used in the "codemirror" TEI editor panel and also the TEI preview panel:
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Mono&display=swap');
.cm-scroller,
.tei {
font-family: 'Noto Sans Mono' !important;
}I haven't added this to the codebase at all; I've just tested it out in my own browser. We should slot this font specification into the proper places in Nyingarn's CSS.
I think we'll probably want to also include italic, bold, and bold italic styles from the same font family (for formatted text in the preview pane). What do you prefer, @marcolarosa; should we host the font files on nyingarn.net or just rely on fonts.googleapis.com?
Also, should we actually use a monospaced font, or should we just use a normal variable-width font?