https://nk2028.shn.hk/tshet-uinh-autoderiver/ - The line breaks do not render, causing all content within the <rt> tags to appear on a single line

[ryanlo713]

URL: https://nk2028.shn.hk/tshet-uinh-autoderiver/

Browser / Version: Firefox 131.0 Operating System: Windows 10 Tested Another Browser: Yes Chrome

Problem type: Something else Description: Issue with Line Breaks in <rt> Tags in Firefox Steps to Reproduce: I have encountered an issue in Firefox where <br> elements wrapped within <rt> tags do not render line breaks as expected. This affects the display of phonetic annotations using the <ruby> and <rt> HTML elements.

Reproduction Steps:

• Open a new tab in Firefox.

• Enter the following HTML code in the console or include it in an HTML document:

<ruby>盘<rp>(</rp><rt lang="och-Latn-fonipa">ban<span hidden=""> / </span><br>ban<span hidden=""> / </span><br>buan<span hidden=""> / </span><br>buan<span hidden=""> / </span><br>ban</rt><rp>)</rp></ruby>

• Render the code.

• Observe that the line breaks (<br>) do not occur as expected within the <rt> tags.

Expected Behavior: The text within the <rt> elements should render each line separated by line breaks, resulting in correctly formatted phonetic annotations.

Actual Behavior: The line breaks do not render, causing all content within the <rt> tags to appear on a single line.

Additional Information:

This issue appears to be affecting the latest version of Firefox. Similar HTML structures behave correctly in earlier browser versions or under different conditions. Suggested Fix: Could you please investigate this problem? It would be beneficial to have a solution to ensure correct rendering of phonetic annotations.

Thank you for your attention to this matter.

View the screenshot

Browser Configuration

• gfx.webrender.software: false
• blockList: basic
• channel: aurora
• defaultUserAgent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:131.0) Gecko/20100101 Firefox/131.0
• hasTouchScreen: false
• frameworks: {'fastclick': False, 'mobify': False, 'marfeel': False}
• mixed active content blocked: false
• mixed passive content blocked: false
• tracking content blocked: false

View console log messages

From webcompat.com with ❤️

[ryanlo713]

The aforementioned issue has also been documented in the Chromium Issue Tracker at https://issues.chromium.org/issues/366056653. It is stated that this behavior is an intentional design in accordance with the W3C Ruby standard.

It is advisable to employ nested tags to achieve the desired functionality.

[sv-calin]

Thank you for reporting this issue, I was able to reproduce it. I've created a bugzilla report for this issue: https://bugzilla.mozilla.org/show_bug.cgi?id=1918992

Closing this as moved.

[qa_38/2024]