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

[PARKED] waiting on ReadiumCSS ... Japanese settings in src/utils/fontList.ts #2252

Draft
wants to merge 8 commits into
base: develop
Choose a base branch
from

Conversation

peaceroad
Copy link
Contributor

In past versions, when the language setting was set to Japanese, settings for horizontal/vertical Japanese fonts were added in FontList.ts in the font selection.

I think I currently have the following problem:

  • The displayed label names are difficult for Japanese speakers to understand.
  • The same font is specified in both English and Japanese, but currently there should be no problem with the English font name.
  • I don't think the font specification is modern. (Unless there's a reason.)
    • I am using MS Gothic, MS Mincho, etc. and it is difficult to view on Windows.
    • At Hiragino in macOS, I want to specify ProN, which specifies kanji with new glyph shapes.
    • Hiragino Sans GB specifies simplified Chinese characters.

In this pull request, I hope to have solved the above problem to some extent.

  • The BIZ UD font may not be the best on Windows, but I think it's better, so I added it.
    (With Yu-Font's default settings, it appears a little thin and difficult to read.)

p.s.
Regarding specifying the font, I think it is difficult to solve the problem by simply specifying the font-family. For example, when Japanese is written vertically, ASCII characters may display rotating 90 degrees. In that case, you may also need to make adjustments using font-feature-settings.
If I have time...I would like to write about this in a separate issue at a later date.

@peaceroad peaceroad changed the title Fix Japanese settings in scr/utils/fontList.ts Fix Japanese settings in src/utils/fontList.ts May 20, 2024
@danielweck
Copy link
Member

Great expert feedback, thank you very much :)
@JayPanoz I borrowed the original font face recommendations from ReadiumCSS, let's see how to backport the proposal here into RCSS

@danielweck danielweck marked this pull request as draft May 20, 2024 21:40
@peaceroad
Copy link
Contributor Author

peaceroad commented May 25, 2024

Indeed, even with the settings in this pull request and running Thorium in the development environment, the font did not actually change.
Looks like I had to modify the r2-navigator-js package.
So I submitted a pull request.
readium/r2-navigator-js#79
I think now (probably) it will be displayed in BIZ UD fonts on Windows.

However, since I have not checked in detail, it is possible that this is a redundant specification or a strange setting.
I did a quick check. (The attached image shows this branch with r2-navigator-js modified.)

Horizontal Japanese mincho(serif) layout

Vertical Japanese mincho(serif) layout

Hosizontal Japanese gothic(sans-serif) layout

Vertical Japanese gothic(sans-serif) layout

Another thing is that even before changing this font family, I have noticed that in vertical writing, there are cases where the leftmost sentence column is cut off. I haven't checked if it's already registered as an issue, but if not, I'd like to submit it as an issue later. (I don't know if this is a problem that can be fixed right away.)

@danielweck danielweck marked this pull request as ready for review May 25, 2024 05:39
@danielweck
Copy link
Member

Thank you once again for looking into this. The navigator changes are actually directly related to the upstream ReadiumCSS project.

@JayPanoz could you please take a look? Adding the recommended font faces to the local stack seems like a safe and sensible action.

@danielweck danielweck marked this pull request as draft May 26, 2024 19:48
@danielweck
Copy link
Member

Related: readium/r2-navigator-js#79

@danielweck danielweck changed the title Fix Japanese settings in src/utils/fontList.ts [PARKED] waiting on ReadiumCSS ... Japanese settings in src/utils/fontList.ts May 28, 2024
@peaceroad
Copy link
Contributor Author

After that, I changed my mind and decided to use "Yu Gothic Medium" for sans-serif, which is pre-installed in the Windows Japanese environment. For now, it seems to be the most effective fallback for readability.

  • This font has a weight of 500, which eliminates the difficulty of reading due to the thinness of the normal Yu Gothic

  • Half-width ASCII characters in vertical display are not good with the BIZ UD font, so using the Yu font will solve this

I will commit after this.
I commented on this and committed to Readium-CSS earlier.
readium/readium-css#146 (comment)

Note that the Yu font (Yu Mincho Medium) with a weight of 500 for serif is not pre-installed in the Windows Japanese environment. Therefore, I left the BIZ UD font as the preferred font for serif.

horizontal layout by Yu Gothic Medium

vertical layout by Yu Gothic Medium

@danielweck
Copy link
Member

Resolution: readium/readium-css#146

@danielweck
Copy link
Member

ReadiumCSS backport into navigator: readium/r2-navigator-js@17b86f2

@danielweck
Copy link
Member

Fixed via 3a79251

Thank you @peaceroad

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