search

webcompat / web-bugs

A place to report bugs on websites.
https://webcompat.com
Mozilla Public License 2.0
746 stars 66 forks source link

www.ghibli.jp - Ruby element is not rendered correctly #96604

Open mandel59 opened 2 years ago

mandel59 commented 2 years ago

URL: https://www.ghibli.jp/shuppan/np/013521/

Browser / Version: Firefox 95.0 Operating System: Mac OS X 10.15 Tested Another Browser: Yes Chrome

Problem type: Design is broken Description: Items are misaligned Steps to Reproduce: ruby element with style display: inline don't show ruby correctly

View the screenshot Screenshot
Browser Configuration
  • None

From webcompat.com with ❤️

mandel59 commented 2 years ago

Google Chrome renders ruby correctly:

スクリーンショット 2021-12-14 2 48 16
softvision-raul-bucata commented 2 years ago

We appreciate your report. I was able to reproduce the issue using other devices as well. The ruby elements are not rendered correctly, with missing characters being presented:

Firefox:

Screenshot_20

Chrome:

Screenshot_21

Tested with:

Browser / Version: Firefox Release 95.0. (64-bit)/ Firefox Nightly 97.0a1 (2021-12-15) (64-bit)/Chrome Version 96.0.4664.93 (Official Build) (64-bit) Operating System: Windows 10 PRO x64 Operating System: Mac OSX 10.15.6

Notes:

  1. Reproducible regardless of the status of ETP.
  2. Reproducible on the latest build of Firefox Nightly.
  3. Works as expected using :

Moving this to NeedsDiagnosis for further investigations.

karlcow commented 2 years ago

First the remedy.

/* Inline #1 | https://www.ghibli.jp/shuppan/np/013521/ */

ruby {
  display: ruby;
}

or more exactly removing ruby from 

a, abbr, acronym, bdo, big, cite, code, dfn, em, img, kbd, object, q, ruby, samp, small, span, strong, sub, sup, var {
    display: inline;
    line-height: inherit;
}

But there is an interesting difference in between browser. Let's try to make a reduced test case.

data:text/html,<!doctype html><title>ruby</title><meta charset='utf-8'><p>%E5%90%8D%E5%89%8D%E3%81%AE%E3%81%AA%E3%81%84<ruby style="display:inline">%E4%BA%8B%E4%BB%B6<rt>%EF%BE%94%EF%BE%8F</rt></ruby></p>

Capture d’écran 2021-12-17 à 14 01 40

webcompat-bot commented 2 years ago

Generate outreach template

karlcow commented 2 years ago

That might be a duplicate of https://bugzilla.mozilla.org/show_bug.cgi?id=1041711

I created a new issue https://bugzilla.mozilla.org/show_bug.cgi?id=1746562

karlcow commented 2 years ago

As mentioned in https://bugzilla.mozilla.org/show_bug.cgi?id=1746562 This is in fact a Blink (Chrome, Edge) and Safari (WebKit) issue. It just happens it manifests on Firefox because Firefox supports CSS Ruby and not WebKit/Blink.

karlcow commented 2 months ago

The new WebKit bug for this specific issue is https://bugs.webkit.org/show_bug.cgi?id=278469

As css ruby has been implemented since that report.