Skip to content
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

Fix japanese font settings #146

Merged
merged 5 commits into from
Jun 18, 2024

Conversation

peaceroad
Copy link
Contributor

@peaceroad peaceroad commented May 29, 2024

Please check if the PR fulfills these requirements:

  • I've read contributing guidelines
  • I'm making this pull request against the develop branch
  • I've updated from the develop branch before proposing this pull request
  • I've tested the changes for bug fixes and/or features
  • I've documented new code

What kind of change does this PR introduce? (Bug fix, feature, docs update, other)

In a Japanese Windows environment in Thorium Reader, I will change the font-family to be applied preferentially from MS Font to BIZ UD font.

To do this, I did the following:

  • css/src/ReadiumCSS-ebpaj_fonts_patch.css
    • Simply adding the BIZ UD font to the four font settings in "Extra variables for Japanese font-stacks" in ReadiumCSS-base.css did not work in Thorium Reader, so I added the BIZ UD font to @font-face in this file.
    • There are Japanese and English settings in @font-face in this file, but the Japanese setting is necessary for older environments such as Internet Explorer and should not be necessary in modern environments. Therefore, I removed as many settings with font names using Japanese as possible.
    • In addition, I set the Postscript name that should originally be written in local(), and the English font name to ensure recognition by the browser engine.
    • Even when setting a serif font, the sans serif font of MS font was also set as a fallback, so I removed it. I did not understand the need for fallback for fonts that are not the same typeface. The same shape was obtained in the reverse case, so I removed it in the same way.
    • I was not sure how much of an impact changing the order of the local in the src property would have, so I made some fine adjustments while leaving the MS font at the top as before.
  • css/src/modules/ReadiumCSS-base.css
    • I removed the Japanese names from the RS__baseFontFamily settings and only used the English names. I thought it would probably be okay.
    • I changed the order of priority settings for each font in "Extra variables for Japanese font-stacks" so that the fonts to be applied to macOS are listed first, and then the fonts to be applied to Windows.
      At that time, the priority order in the Windows settings was BIZ UD, Yu, and MS fonts. (All of these fonts are installed by default in recent Windows.)
    • I only set the Japanese font names for MS fonts and Hiragino in old macOS environments. The rest were set with English names.

What is the current behaviour? (You can also link to an open issue here)

When using the current Thorium Reader on Windows, if you apply each font in "Extra variables for Japanese font-stacks" in the text font settings that can be set after changing the UI language to "Japanese", it will become an MS font. MS fonts are a bit rough, so I think the reading experience using this font is a bit subtle.

ex. edrlab/thorium-reader#2353 (comment)

What is the new behaviour?

I changed the font name settings in various ways, but the behavior change should only apply to Windows. And in Thorium Reader, it should be displayed in BIZ UD font with anti-aliasing enabled.

ex. edrlab/thorium-reader#2252 (comment)

(I haven't confirmed that Thorium works on macOS.)

Does this PR introduce a breaking change? (What changes might users need to make in their application due to this PR?)

I don't think it will be a problem in the app.

Other information:

Some people think that Yu fonts are better than BIZ UD fonts, so it's a bit difficult to decide whether to prioritize BIZ UD (BIZ UD has less space after punctuation marks).
However, in this pull request, I chose the BIZ UD font, which is displayed clearly, because the default Yu font on Windows is displayed a little thin.
Therefore, I may choose to change the priority font order in the future.

Example of Yu/BIZ UD display in Chrome browser (image attached): https://codepen.io/peaceroad/pen/dyEOVdr
image

One thing to note in particular is that in vertical writing mode using the BIZ UD font, half-width ASCII characters are displayed narrowly, so if you look at only this part, the Yu font may be slightly easier to read. (Looking at this issue alone, it can be avoided by changing the setting from BIZ UD to BIZ UDP, but I didn't know if that was a good idea, so I didn't do that.)

Also, since I don't usually use macOS, there may be a better setting.

Remove Japanese name settings as much as possible and add Postscripting name settings. Font order is basically based on the previous one.
Remove Japanese names as much as possible. Since MS fonts do not have anti-aliasing, try adjusting them to use BIZ UD Fonts, which are currently considered easy to read in Japanese Windows environments.
@peaceroad
Copy link
Contributor Author

Example of Yu/BIZ UD display in Chrome browser (image attached):

Sorry. I forgot to change it back when I was checking, so in vertical writing mode, the image specified BIZ UDPMincho instead of BIZ UDMincho. I also updated the commit.

The result displayed with BIZ UDMincho is attached below.

image

@JayPanoz
Copy link
Collaborator

Thank you, this is an outstanding summary of the changes. This is greatly appreciated and helps a lot.

I will review as soon as possible but there shouldn’t be any issue at first sight – we also have an engineering call on Wednesday to discuss it with implementers if needed but it mainly impacts Daniel and he already chimed in.

@peaceroad
Copy link
Contributor Author

peaceroad commented Jun 6, 2024

Since then.

I thought it would be better to use BIZ UD font. However, in Windows, Yu Font's sans serif type (Gothic) also comes pre-installed with a font called "Yu Gothic Medium" with a weight of 500. I didn't check this properly. After that, I thought about using this font for sans serif. This will solve the problem of vertical ASCII characters in BIZ UD fonts being difficult to read.

https://codepen.io/peaceroad/pen/dyEOVdr

use-san-serif-font-to-yu-medium

I'll commit it later.

In addition, Yu Font's serif type font with weight 500 (Yu Mincho Medium) is not installed in Windows. Therefore, I think I'll leave the setting of displaying BIZ UD font for serif type as it is.

@JayPanoz
Copy link
Collaborator

LGTM. Thanks again! That’s a very valuable contribution as we are less familiar with CJK in general, and every input helps. 👍

@peaceroad
Copy link
Contributor Author

Thanks for merging.
After Thorium Reader with this implementation is released, I'll submit another pull request if I find any issues or can specify better font settings.

danielweck added a commit to readium/r2-navigator-js that referenced this pull request Jun 19, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants