Web-bugs: language.chinadaily.com.cn - see bug description

[MDTsai]

URL: http://language.chinadaily.com.cn/
Browser / Version: Firefox 50.0
Operating System: Mac OS X 10.11
Problem type: Something else - I'll add details below

Steps to Reproduce
1) Navigate to: http://language.chinadaily.com.cn/
2) See the right column "最新推荐"

Expected Behavior:
Text is shown correctly

Actual Behavior:
Text is cut about 0.5px on the top. .tui span line-height: 20px is root cause. Disable or enlarge to 21px looks good for me.

_From webcompat.com with ❤️_

[MDTsai]

Another issue at the bottom of this page, the 友情链接 ul, texts are cut in second line

[karlcow]

Firefox on top, Safari on bottom

[karlcow]

I can see a slight difference in box position once we draw an outline.

Firefox

Safari

After adding padding to the top of .all-right

.all-right {
    margin: 0px;
    padding: 8px 0 0 0;
    float: right;
    width: 300px;
}

We can even see better the difference between Gecko and WebKit.

Firefox left, Safari right.

something strange though, while the outline around the nesting box is declared to be 26px in devtools. it is in real bigger than 26px. We can see the outline bigger than the background image.

A bug in Gecko?

ping @dholbert for boxes-fu!

[MDTsai]

About 友情链接 on bottom, set margin-top to 0 can fixed this. The .lian div computed size is 940x0, is this root cause?

[MDTsai]

Discuss with @heycam today, he can help pass this issue to correct owner.

[MDTsai]

File bug https://bugzilla.mozilla.org/show_bug.cgi?id=1307678 for follow-up, check the fallback font first.

[karlcow]

From https://bugzilla.mozilla.org/show_bug.cgi?id=1307678

One thing I notice is that http://language.chinadaily.com.cn/ doesn't seem to have a lang attribute (e.g. on the root element), so it looks like the Chinese text is actually getting a default Japanese font. Adding lang="zh-CN" should cause it to use our Chinese font prefs rather than Japanese during fallback, which seems like it's probably more appropriate for the site.

@MDTsai could you contact them for asking them to specify a "lang" attribute.

[MDTsai]

Yes, I sent a mail to customer service today for language attribute. Wait for their feedback.

[reinhart1010]

This issue is partially fixed.

1. The text under "最新推荐" is now rendered correctly. (See the punctuation marks being correctly placed)
   

2. The footer text layout is fixed.
   

3. Unfortunately, the lang="zh-CN" attribute is not being applied to the page. This page is being rendered with Japanese Kanji instead.
   
   Note: I modify the 1st title to "冷" to demonstrate differences between (Simplified) Chinese Hanzi and Japanese Kanji, as in #8900.

[softvision-oana-arbuzov]

The layout has changed.

Tested with:
Browser / Version: Firefox Nightly 70.0a1 (2019-08-20)
Operating System: MacOS 10.14.6

@reinhart1010 and @MDTsai can you still reproduce any of the issues (cropped text and rendered language)? If yes please reopen.

[reinhart1010]

I can confirm the site change and the footer issue is no longer reproducible.

The column title (e.g. "最新推荐") are now left-aligned, yet there are no issues with it as well.

The default font is now set to "微软雅黑" (Microsoft YaHei), a Simplified Chinese font. In my Linux installation this is substituted with "Noto Sans SC", hence Japanese Kanji issue is no longer reproducible. (CSS Source)

So it's safe to close this as invalid.

[MDTsai]

confirmed

[softvision-oana-arbuzov]

Thanks @reinhart1010 and @MDTsai for your input.