(With solution) Chinese single and double quotation marks appear unclear #3180
Comments
codebykat
added
bug
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
What
Windows 11 - Edge / Chrome
When using the default browser font to display the Simplenote Web App, Chinese quotation marks may appear like English quotation marks.
For example:
Why
Since Chinese quotation marks come in left and right pairs, but there's only one key in the input method, pressing the key once outputs the left quotation mark, and pressing it twice outputs the right quotation mark. Therefore, if it's difficult to distinguish, it's easy for the left and right quotation marks throughout the entire article to be reversed.
I (myself) previously emailed you to report the same issue, but because my English is not very good, it was difficult for me to describe the problem accurately, and your follow-up email was not replied to promptly (apologies). Today, with the help of ChatGPT, not only can I accurately describe the problem to you, but more importantly, I have a solution of my own and hope to incorporate it into future versions of Simplenote Electron. (You can continue to contact me on GitHub.)
How
The quotation characters in Chinese fonts are all full-width punctuation, meaning they come in left and right pairs, with each punctuation mark occupying the space of one Chinese character. However, depending on the software or webpage being used, the glyph may occupy the space of one or half of a Chinese character.
I've researched some information, and it seems that how the characters are displayed depends on the language settings of the entire page. When
<html lang="en">is set, the browser prioritizes displaying characters to conform to English habits, so it also adjusts the quotation marks to better fit English characters (this is just a guess, and I'm not sure if this is the exact reason).You can also preview international fonts on the Windows 11 settings page, look for a Simplified Chinese font, and enter Chinese single and double quotation marks in the test column to reproduce this problem.
MS Yahei 微软雅黑 is the system default fonts for Windows 11, which unfortunately have the quotation marks problem. Please note the slightly difference between Chinese and English quotation marks, when zoom out to about 14px it's basically impossible to distinguish.
In any case, Chinese punctuation requires specific font pairing to consistently display as the width of one Chinese character in the browser. Some fonts may display single and double quotation marks very narrowly, but they still distinguish between left and right quotation marks. However, this makes it difficult to differentiate in the typing interface (as with ChatGPT).
Using Stylish to Customize Font Settings
In Edge / Chrome, I use the Stylish plugin to only modify the default font under the domain simplenote.com to a font that doesn't have issues with quotation marks.
This way, most of the display will be normal, but the only issue arises when setting up the to-do list, as you've customized the "Simplenote Tasks" font, which gets overridden, preventing the task checkboxes from displaying correctly. The solution is to place "Simplenote Tasks" after the Chinese font.
body, p, div, span { font-family: "Source Han Serif", "Simplenote Tasks"; }You can test several Chinese fonts. Open source "思源" series, "文泉驿" series, and system fonts within the Windows OS such as "SimHei", "KaiTi", and "FangSong" can all display quotation marks clearly distinguishable.
I think perhaps the best solution would be to allow users to customize the interface font in the settings. Additionally, if support for monospaced fonts is also provided, it might be more friendly to those who edit scripts or code within it (that's another issue altogether).
The text was updated successfully, but these errors were encountered: