Add lang specific font stacks for CJK #6007

zeripath · 2019-02-08T21:00:42Z

The PR #5983 proposed deleting the YaHei font from the default font stack in order to fix issues with the presentation of Kanji in Japanese being forced in to simplified Chinese glyph forms. The Meiryo UI font being removed earlier.

The underlying issue is Han Unification - any font providing the Han unified glyphs has to choose a glyph form. Therefore deleting fonts isn't the answer, we need to provide different fonts and tell them to choose the right glyph forms for CJK languages.

We should also probably choose a default glyph form to display - likely that is simplified Chinese in honour of @lunny one of our owners.

This PR proposes that we should set up CJK language specific font-families and then set these as appropriate. It doesn't deal with the issue of documents that should contain different languages, in say markdown etc. That should be dealt with at a later point.

zeripath · 2019-02-08T21:02:54Z

Not having these fonts by default and not being aware of what the appropriate appearances are I would appreciate comments on the font stacks. @lunny, @xps2 are these stacks ok?

lunny · 2019-02-09T07:01:26Z

It seems no effective.

zeripath · 2019-02-09T07:49:32Z

Agh so that's the reason for the !important - sorry I removed that.

Have you set your Gitea language to Chinese? That should also change the font stack - I don't see the lang matcher in your screenshot

Signed-off-by: Andrew Thornton <art27@cantab.net>

zeripath · 2019-02-09T09:52:02Z

@lunny, I've added back in the !important to override the semantic-ui css.

I think this probably isn't the correct way to do it, but it's the way we've been doing it.

I've also added a reoverride to restore the icons.

Any chance you could retest?

codecov-io · 2019-02-09T09:52:55Z

Codecov Report

Merging #6007 into master will decrease coverage by 0.01%.
The diff coverage is 100%.

@@            Coverage Diff             @@
##           master    #6007      +/-   ##
==========================================
- Coverage   38.89%   38.87%   -0.02%     
==========================================
  Files         363      363              
  Lines       51210    51211       +1     
==========================================
- Hits        19917    19909       -8     
- Misses      28425    28434       +9     
  Partials     2868     2868

Impacted Files	Coverage Δ
modules/context/context.go	`50% <100%> (+0.29%)`	⬆️
models/unit.go	`0% <0%> (-14.29%)`	⬇️
modules/sync/unique_queue.go	`78.57% <0%> (-10.72%)`	⬇️
routers/repo/view.go	`41.08% <0%> (-1%)`	⬇️

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update cd8cdbd...ca5fd1d. Read the comment docs.

lunny · 2019-02-10T02:27:40Z

I have set the welcome page's language as Simplified Chinese, but it seems the {{.Language}} return empty.

<html lang="">

Signed-off-by: Andrew Thornton <art27@cantab.net>

zeripath · 2019-02-10T10:19:55Z

Heya @lunny, it's unfortunately not just a template and less change so you need to rebuild gitea to get it to put the language into the context.

I've put some more changes in to simply override the semantic css where necessary rather than use important. It's horrible but without it icons and monospace won't work properly.

Signed-off-by: Andrew Thornton <art27@cantab.net>

appleboy · 2019-02-16T03:14:53Z

@zeripath Conflicts.

CL-Jeremy · 2019-03-11T00:45:42Z

Gogs has recently adopted a font called PingFang SC and I have to say I like it more than Lato. Edit: might not actually be that font rendering the english glyphs.

I can confirm it is rendering English glyphs, as it is placed right at the beginning of the fallback list, a decision I cannot put up with. Gitea is definitely ahead regarding i18n!

Maybe PingFang is worth adding to the stack as the preferred macOS Font.

Yes, please! The stacks in d014ae5 look thrilling indeed, but I don't get why Microsoft YaHei gets prioritized over PingFang SC. My current private settings look like this:

:lang(zh-Hans) {
  font-family: Lato, -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", Roboto, Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", "Source Han Sans SC", "Source Han Sans CN", "Microsoft YaHei", "Heiti SC", "SimHei", sans-serif;
}
:lang(zh-Hant) {
  font-family: Lato, -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", Roboto, Helvetica, Arial, "PingFang TC", "Hiragino Sans TC", "Noto Sans CJK TC", "Source Han Sans TC", "Source Han Sans TW", "Microsoft JhengHei", "Heiti TC", "PMingLiU", sans-serif;
}
:lang(ja) {
  font-family: Lato, -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", Roboto, Helvetica, Arial, "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans CJK JP", "Source Han Sans JP", "Droid Sans Japanese", "Meiryo", "MS PGothic", sans-serif;
}

Some humble personal opinions:

Regarding the localized font names: I'm not sure if they are needed for Windows, but definitely not on Mac or Linux. Plus there is no 方体/方體 installed anywhere by default: those are the suggested names by the ROC Ministry of Education and never really adopted widely; PingFang fonts are called {苹|蘋}方-{{简|簡}|繁|港}, and Heiti SC/TC 黑{体|體}-{{简|簡}|繁} respectively
For Hiragino, I can't speak for the tastes of people living in Japan, but the JIS 2004 standard should be complied to be at least consistent with Meiryo and Noto Sans CJK. The W3 ending should also be ditched: first there has long been a W4 variant since El Capitan, and second the boldface wouldn't be used with explicit weight reference (result: "ヒラギノ角ゴ Pro W3" -> "ヒラギノ角ゴシック ProN", or maybe even just "Hiragino Sans"?)
Yu Gothic is available since Windows 8.1 and should be added before the free fonts. My rule of thumb: current Mac font > current Windows font > current free fonts >> deprecated OEM free fonts > deprecated OEM commercial fonts >> fallbacks
Latin fonts almost never get used when placed after CJK fonts, so Helvetica and Arial should be placed right after Segoe UI (I respect your choice with Helvetica Neue otherwise, as I treat that font as the default iOS 7-8/OS X 10.10/HTC Sense system font and should never be used unless native Latin design is wished, so no comment on that)
Just in case there is need for pan-Cyrillic improvements: PT Sans could be appended to the regular list (but that could be another topic)

lafriks · 2019-03-12T12:59:55Z

Conflict

CL-Jeremy · 2019-03-13T01:41:49Z

Seems obvious that such a thorough rewrite of index.css would result in a merge conflict... not sure if I should open another pull request or should I remain with this one, but I cloned the fork by @zeripath and reverted the two .css files to allow it to merge (just remember to do make generate-stylesheets to update the actual stylesheets afterwards), plus several fixes by myself (not sure if done right, especially the part with updating Lato, see below). I merged them into a patch: CL-Jeremy@47f323b (latest edit: actually fixing language chooser) and hope that could help resolve this issue.

Remark on updating Lato: the original files (same as on Google Fonts) are significantly out of date, but I didn't touch them considering the lack of legacy iOS support with the updated files. Instead I just dropped in the new files (larger, but not really a big issue for me, at least not as serious as the inconsistencies with Cyrillic/Latin-Extended rendering). Of course this wouldn't matter if we were to ditch Lato in favor of native system fonts.

apricote · 2019-03-13T10:44:48Z

We are having a discussing in #6203 on how to avoid these merge conflicts for css (and potentially js) bundles.

commit 7d1679e9079541359869c9e677ba7412bfcc59f3 Author: Mike L <cl.jeremy@qq.com> Date: Wed Mar 13 13:53:49 2019 +0100 Remove missed YaHei leftover from _home.less commit 0079121ea91860a323ed4e5cc1a9c0d490d9cefd Author: Mike L <cl.jeremy@qq.com> Date: Wed Mar 13 12:03:54 2019 +0100 Fix overdone fixes (inherit, :lang) commit 62c919915928ec1db4731d547e95885f91a0618d Author: Mike L <cl.jeremy@qq.com> Date: Wed Mar 13 02:29:10 2019 +0100 Fix elements w/ explicit lang (language chooser) commit b3117587aa2eb8570d60bed583a11ee5565418be Author: Mike L <cl.jeremy@qq.com> Date: Tue Mar 12 20:17:26 2019 +0100 Fix textarea also (to match body) commit 81cedf2c3012c4dd05a7680782b4a98e1b947f67 Author: Mike L <cl.jeremy@qq.com> Date: Tue Mar 12 19:41:39 2019 +0100 Revert css temporarily to fix conflict commit 80ff82797f3203cbeaf866f22e961334e137df89 Author: Mike L <cl.jeremy@qq.com> Date: Tue Mar 12 19:15:30 2019 +0100 Tweak CJK, fix Yu Gothic, more monospace inherits commit 581dceb9a869646c2c486dabb925c88c2680d70c Author: Mike L <cl.jeremy@qq.com> Date: Mon Mar 11 13:09:26 2019 +0100 Add Lato for latin extd. & cyrillic, improve CJK

@CL-Jeremy

With changes from @CL-Jeremy

zeripath · 2019-03-13T18:45:38Z

Thanks @CL-Jeremy for your changes.

So the major negative thing that is left in this PR is the use of the specific semanticUI overrides. The main benefit of doing it that way is that you don't have !important with weird pre-selector tricks - which I don't know to implement - however, the cost is that there is an ugly block. (But as we move from semantic UI these can disappear, and without the !important we should have predictable reactions as we add other things.

lunny · 2019-03-17T13:10:08Z

Unfortunately, this is still unavailable for Chinese language environment. The sementic ui will override index.css. I think maybe we could move this to v1.9 @zeripath

techknowlogick · 2019-03-17T13:43:20Z

Moving to 1.9

CL-Jeremy · 2019-03-17T14:45:44Z

Are you sure you have used the latest code base? I believe I have cleared the last trace of these general rules in the latest commit. Probably you used my commit without make generate-stylesheets, while @zeripath updated again in 3034e23 to include the correctly compiled stylesheets? This commit should be free from any font name in double quotes, while your screenshot still shows them.

If you may, please check the instance on https://mikeslab.dix.asia/gitea, which is built with the changes from this PR, plus the deletion of -webkit-font-smoothing: antialiased; (for which I'd like to raise a separate PR some time). I am yet to find any display problem there regarding fonts.

zeripath · 2019-03-17T18:21:49Z

@lunny it seems you've never had this working for you. Are you sure you've not ended up with cached templates or stylesheets?

It's worth noting it won't select the Chinese stack unless you set the language to Chinese.

lunny · 2019-03-18T07:54:44Z

@zeripath @CL-Jeremy It seems it's my Chrome cache problem? I tested it again on my Firefox, it's OK for Simple Chinese

zeripath · 2019-03-18T07:55:59Z

So in 1.8?

Add lang specific font stacks

d9cff8b

GiteaBot added the lgtm/need 2 This PR needs two approvals by maintainers to be considered for merging. label Feb 8, 2019

zeripath added the topic/ui Change the appearance of the Gitea UI label Feb 8, 2019

zeripath added this to the 1.8.0 milestone Feb 8, 2019

zeripath changed the title ~~Add lang specific font stacks~~ Add lang specific font stacks for CJK Feb 8, 2019

zeripath added 3 commits February 9, 2019 09:43

Force font changes

7733808

Signed-off-by: Andrew Thornton <art27@cantab.net>

Merge branch 'master' into issue-4173-alternative-fix

1dc2afd

Fix icons

5d13c8b

Signed-off-by: Andrew Thornton <art27@cantab.net>

Merge branch 'master' into issue-4173-alternative-fix

0fc334a

sapk mentioned this pull request Feb 9, 2019

[Contrib] Checkout a PR #6021

Merged

lafriks approved these changes Feb 9, 2019

View reviewed changes

GiteaBot added lgtm/need 1 This PR needs approval from one additional maintainer to be merged. and removed lgtm/need 2 This PR needs two approvals by maintainers to be considered for merging. labels Feb 9, 2019

lunny mentioned this pull request Feb 10, 2019

Delete Microsoft YaHei (#4173) #5983

Closed

zeripath added 5 commits February 10, 2019 08:57

Fix octicons and icons

9e652eb

Signed-off-by: Andrew Thornton <art27@cantab.net>

Just override the semantic ui fonts only

755983e

Signed-off-by: Andrew Thornton <art27@cantab.net>

Missed the headers... override them too

2c55257

Missed some more semantic ui stuff

645a79d

Fix PT Sans

5a0c8f3

Signed-off-by: Andrew Thornton <art27@cantab.net>

zeripath added 2 commits February 12, 2019 14:49

Merge branch 'master' into issue-4173-alternative-fix

1264f90

More changes

d014ae5

Signed-off-by: Andrew Thornton <art27@cantab.net>

xps2 mentioned this pull request Feb 16, 2019

In Japanese environment, displayed in Chinese Hanja #4173

Closed

7 tasks

Merge branch 'master' into issue-4173-alternative-fix

489eed6

CL-Jeremy mentioned this pull request Mar 13, 2019

Add lang specific font stacks for CJK zeripath/gitea#1

Merged

zeripath added 2 commits March 13, 2019 17:07

Merge pull request #1 from CL-Jeremy/issue-4173-patch

d9b45ec

With changes from @CL-Jeremy

update stylesheet

3034e23

techknowlogick requested a review from lunny March 16, 2019 03:44

techknowlogick modified the milestones: 1.8.0, 1.9.0 Mar 17, 2019

lunny approved these changes Mar 18, 2019

View reviewed changes

GiteaBot added lgtm/done This PR has enough approvals to get merged. There are no important open reservations anymore. and removed lgtm/need 1 This PR needs approval from one additional maintainer to be merged. labels Mar 18, 2019

lunny modified the milestones: 1.9.0, 1.8.0 Mar 18, 2019

Merge branch 'master' into issue-4173-alternative-fix

ca5fd1d

techknowlogick merged commit d78bb1d into go-gitea:master Mar 18, 2019

zeripath deleted the issue-4173-alternative-fix branch March 18, 2019 22:05

CirnoT mentioned this pull request Jun 9, 2020

Ensure text remain visible during webfont load with font-display #11814

Closed

go-gitea locked and limited conversation to collaborators Nov 24, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add lang specific font stacks for CJK #6007

Add lang specific font stacks for CJK #6007

zeripath commented Feb 8, 2019 •

edited

Loading

zeripath commented Feb 8, 2019

lunny commented Feb 9, 2019

zeripath commented Feb 9, 2019

zeripath commented Feb 9, 2019

codecov-io commented Feb 9, 2019 •

edited

Loading

lunny commented Feb 10, 2019

zeripath commented Feb 10, 2019 •

edited

Loading

appleboy commented Feb 16, 2019

CL-Jeremy commented Mar 11, 2019

lafriks commented Mar 12, 2019

CL-Jeremy commented Mar 13, 2019 •

edited

Loading

apricote commented Mar 13, 2019

zeripath commented Mar 13, 2019

lunny commented Mar 17, 2019

techknowlogick commented Mar 17, 2019

CL-Jeremy commented Mar 17, 2019

zeripath commented Mar 17, 2019

lunny commented Mar 18, 2019 •

edited

Loading

zeripath commented Mar 18, 2019

Add lang specific font stacks for CJK #6007

Add lang specific font stacks for CJK #6007

Conversation

zeripath commented Feb 8, 2019 • edited Loading

zeripath commented Feb 8, 2019

lunny commented Feb 9, 2019

zeripath commented Feb 9, 2019

zeripath commented Feb 9, 2019

codecov-io commented Feb 9, 2019 • edited Loading

Codecov Report

lunny commented Feb 10, 2019

zeripath commented Feb 10, 2019 • edited Loading

appleboy commented Feb 16, 2019

CL-Jeremy commented Mar 11, 2019

lafriks commented Mar 12, 2019

CL-Jeremy commented Mar 13, 2019 • edited Loading

apricote commented Mar 13, 2019

zeripath commented Mar 13, 2019

lunny commented Mar 17, 2019

techknowlogick commented Mar 17, 2019

CL-Jeremy commented Mar 17, 2019

zeripath commented Mar 17, 2019

lunny commented Mar 18, 2019 • edited Loading

zeripath commented Mar 18, 2019

zeripath commented Feb 8, 2019 •

edited

Loading

codecov-io commented Feb 9, 2019 •

edited

Loading

zeripath commented Feb 10, 2019 •

edited

Loading

CL-Jeremy commented Mar 13, 2019 •

edited

Loading

lunny commented Mar 18, 2019 •

edited

Loading