Bug 142531 - Online Help: improve online help css for Simplified Chinese language in Linux
Summary: Online Help: improve online help css for Simplified Chinese language in Linux
Status: RESOLVED FIXED
Alias: None
Product: LibreOffice
Classification: Unclassified
Component: Documentation (show other bugs)
Version:
(earliest affected)
Inherited From OOo
Hardware: All All
: medium normal
Assignee: Not Assigned
URL:
Whiteboard: target:7.2.0 target:7.5.0 target:7.4....
Keywords:
Depends on:
Blocks:
 
Reported: 2021-05-28 03:57 UTC by Kevin Suo
Modified: 2022-06-20 12:41 UTC (History)
2 users (show)

See Also:
Crash report or crash signature:


Attachments

Note You need to log in before you can comment on or make changes to this bug.
Description Kevin Suo 2021-05-28 03:57:23 UTC
The submodule "helpcontent2" contains specialized css files for each language. For instance, for Simplified Chinese language the css file is located at:
helpcontent2/source/auxiliary/zh-CN/default.css.

However, this language-specific css file is not used at all in the generated html files at build time, thus the generated help content only uses the css file in helpcontent2/help3xsl/default.css, as defined by the makefile helpcontent2/Package_html_static.mk. This makes the display of other languages (e.g. Simplified Chinese) ugly in the browser.

To include language-specific css files, the language independent default css shouls still be reserved, thus in index.html it should be:

<link type="text/css" href="default.css" rel="Stylesheet">
<link type="text/css" href="<lang_tag>/default.css" rel="Stylesheet">

whereas the css styles defined in the 2nd one (<lang_tag>/default.css) can override those in the 1st one, which makes it possible for different languages to modify the css to make the pages of their language appear better.
Comment 1 Adolfo Jayme Barrientos 2021-05-28 08:42:48 UTC
Please don’t create all that duplication. We support hundreds of languages.

We need just one stylesheet, and add selectors for bidirectionality for RTL languages.
Comment 2 Kevin Suo 2021-05-28 11:20:15 UTC
For example I want to use different fonts for Simplified Chinese pages, how can I do that now using css selectors?
Comment 3 Olivier Hallot 2021-05-28 11:44:12 UTC
All the css mentioned (helpcontent2/source/auxiliary/$lang/default.css) are obsolete since we changed our Help.

Although your solution is feasible, I would prefer not to split css in languages (you are the first to ask for this change). The diff between en-US and zh-CN in 2005 is below. I note that zh-CN has some special fonts, not required in western languages.

Anyway please give us here your suggested changes for zh-CN for investigation.



-------------------8<-----------------------
olivier@olivier-ntbk:~/tmp2/help/source/auxiliary/zh-CN$ diff default.css ../en-US/default.css 
23c23
< +                           CHINESE SIMPL                           +
---
> +                           WESTERN LANGUAGES                       +
25c25
< + LAST CHANGES: 24-MAR-2005                                         +
---
> + LAST CHANGES: 15-NOV-2004                                         +
30,31c30,31
< body, p, h1, h2, h3, h4, h5, h6, .listitem, .listitemintable, .tablecontent, .tablecontentintable  
<       { font-family:  方正宋体,"MSung Light SC",SimSun,FZSongYi,FZShuSong,NSimSun,"Andale Sans UI","Arial Unicode MS","Lucida Sans Unicode",Song; }
---
> body, p, h1, h2, h3, h4, h5, h6, .listitem, .listitemintable, .tablecontent, .tablecontentintable
>       { font-family: "Segoe UI",Ubuntu,Cantarell,"Noto Sans","DejaVu Sans","Lucida Sans Unicode","Helvetica Neue",Helvetica,Tahoma,sans-serif; }
34c34
<       { font-family: 方正宋体,"MSung Light SC","Cumberland AMT",Cumberland,Courier New,Courier,"Lucida Sans Typewriter","Lucida Typewriter",Monaco,Monospaced; margin-top: 1pt; margin-bottom: 1pt;}
---
>       { font-family: Menlo,Consolas,"DejaVu Sans Mono","Nimbus Mono L","Lucida Sans Typewriter","Courier New",Courier,Monaco,monospace; margin-top: 1pt; margin-bottom: 1pt; }
55c55
<       { font-size: 11pt; }
---
>       { font-size: 11pt; margin-top: 2px; margin-bottom: 2px;}
79c79
<       { background:#EEEEEE;}
---
>       { background:#EEEEEE; margin: 0px;}
Comment 4 Kevin Suo 2021-05-28 13:46:48 UTC
See the proposed change below (please note that the change should only apply to zh-CN pages, not others):

'''
diff --git a/help3xsl/default.css b/help3xsl/default.css
index ce1dd77f8..db1506d2c 100644
--- a/help3xsl/default.css
+++ b/help3xsl/default.css
@@ -40,7 +40,8 @@ h6,
 .listitem,
 .listitemintable,
 .tablecontent {
-    font-family: -apple-system, system-ui, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", "DejaVu Sans", "Lucida Grande", "Helvetica Neue", Helvetica, Arial, sans-serif, FreeSerif, NanumGothic, "Noto Sans Tibetan", Taprom;
+    font-family: "Nato Sans CJK SC", "思源黑体", 微软雅黑;
+    font-size: 18px;
 }
 .input {
     background-color: rgba(0,0,0,0.04);
@@ -228,7 +229,7 @@ h6 {
 p,
 ol,
 td {
-    font-size: 1.15rem;
+    font-size: 1em;
     margin: 2px 0 2px 0;
 }
'''
Comment 5 Kevin Suo 2021-05-28 13:51:06 UTC
Sorry, the corrent name font "思源黑体" as mentioned above should be "思源黑体 CN Normal".

The above change is tested under Fedora 33 and Windows 10 and it works good for zh-CN language.

@Ming Hua: if you have time, please test and see if you agree.
Comment 6 Ming Hua 2021-05-29 03:27:22 UTC
(In reply to Kevin Suo from comment #5)
> @Ming Hua: if you have time, please test and see if you agree.
Sure, happy to help testing, but exactly how?

The displaying quality of Chinese online help never seems to be a problem for me on Windows 10.  I now have the MSI package for zh-CN help version 7.2.0 alpha1 installed, with the default.css (which seems to be from the main MSI package, not the zh-CN help one, by the way), and the help pages look perfectly fine in Firefox or Edge, using the system's MS Yahei font.

It likely needs tweaking on Linux as there is no "default" Chinese font there, but I'm not sure what my testing on Windows can help, making sure the performance doesn't deteriorate?
Comment 7 Kevin Suo 2021-05-29 11:10:50 UTC
(In reply to Ming Hua from comment #6)
It looks very bad on Linux, even I do have Microsoft Yahei installed. The default css never ezplicitly mention that font, thus it falls back to another font on linux which looks ugly, but falls back to Yahei on Win 10.

So what I need you to test is to use the revised css to see if it is still good on Win 10.
Comment 8 Ming Hua 2021-05-29 14:23:32 UTC
(In reply to Kevin Suo from comment #7)
> So what I need you to test is to use the revised css to see if it is still
> good on Win 10.
I gave it a try, and there was no obvious difference, but that's expected, since on my system neither "Noto Sans CJK SC" (this is after I fix the Nato => Noto typo, by the way) nor "思源黑体 CN Normal" would match anything.  I installed the 思源黑体 released by Adobe and it is "Source Han Sans SC" and "思源黑体 Normal" here.  So the modified CSS would still select 微软雅黑/Microsoft Yahei for me.

In general I think only specifying these three fonts is very inadequate.  And it can't be incorporated into LibreOffice upstream as is anyway, since both Adolfo and Olivier has shown reluctance to the idea of separate zh-CN specific CSS, and would rather have a CSS that handles both western and Chinese help files.

> It looks very bad on Linux, even I do have Microsoft Yahei installed.
I know little about Linux's font handling and CSS, but this is surprising to me.  The current CSS has "sans-serif" in its font list, so as long as the Linux system has a Chinese Heiti/Dengxian font installed and properly configured, sans-serif should match to it.  Of course, just copying Microsoft Yahei under /usr/share/fonts/ or ~/.fonts/ and running fc-cache won't do.  So are you sure the problem is not in Fedora's Chinese font packaging or your local setup?
Comment 9 Kevin Suo 2021-05-31 14:13:55 UTC
(In reply to Ming Hua from comment #8)
I tested and find it is the "system-ui" font which causes the damage. In my system it falls back to a mixture of "Meiryo UI" and "Droid Sans Fallback".

One solution is to put "sans-serif" before "system-ui", so it should become:
> font-family: -apple-system, sans-serif, system-ui, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", "DejaVu Sans", "Lucida Grande", "Helvetica Neue", Helvetica, Arial, sans-serif, FreeSerif, NanumGothic, "Noto Sans Tibetan", Taprom;

See also this article:
Never, ever use system-ui as the value of font-family
https://infinnie.github.io/blog/2017/systemui.html
Comment 10 Kevin Suo 2021-05-31 15:42:19 UTC
I have submitted a patch on gerrit for review:
https://gerrit.libreoffice.org/c/help/+/116487
Comment 11 Commit Notification 2021-05-31 16:19:12 UTC
Kevin Suo committed a patch related to this issue.
It has been pushed to "master":

https://git.libreoffice.org/help/commit/e36e33937f9cda7fde9ab56f9eb25f6f549700c7

tdf#142531: fix help css for Simplified Chinese display on Linux
Comment 12 Commit Notification 2022-06-20 12:39:32 UTC
Adolfo Jayme Barrientos committed a patch related to this issue.
It has been pushed to "master":

https://git.libreoffice.org/help/commit/8db4f0bd980c14b969f8bc08d3a1ecac7d5f7336

tdf#142380 tdf#142531 Update font stack, w/o “system-ui”
Comment 13 Commit Notification 2022-06-20 12:41:50 UTC
Adolfo Jayme Barrientos committed a patch related to this issue.
It has been pushed to "libreoffice-7-4":

https://git.libreoffice.org/help/commit/9257660dcda0ba8aa7fe6b3b96c430c0ed6e8bf1

tdf#142380 tdf#142531 Update font stack, w/o “system-ui”