Skip to content

[BUG] When using <ruby> for specific notations, the text disappears. #1491

@L4Ph

Description

@L4Ph

Describe the bug:

When using the flutter_html library to render HTML containing <ruby> tags with <rp> and <rt> elements for furigana (as shown in the provided HTML snippet), the base text (e.g., "そういう") is not displayed. Instead, only the ruby text (furigana, represented by "・・・・" in the attached image due to the character in <rt>) is visible. This issue prevents proper rendering of Japanese text with furigana, making the content difficult to read and understand.

Image

HTML to reproduce the issue:

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<ruby><rp>(</rp><rt></rt><rp>)</rp></ruby><ruby><rp>(</rp><rt></rt><rp>)</rp></ruby><ruby><rp>(</rp><rt></rt><rp>)</rp></ruby><ruby><rp>(</rp><rt></rt><rp>)</rp></ruby>

</body>
</html>

Html widget configuration:

              child: Html(
                data: content,
                style: {
                  "body": Style(
                    fontSize: FontSize(settings.fontSize),
                    color: settings.colorScheme.onSurface,
                    whiteSpace: WhiteSpace.normal,
                  ),
                },
              ),

Expected behavior:

Ensure that both the ruby text and the base text display correctly, as with attached images or CodePen examples.

https://codepen.io/Unillu/pen/eZjdZV
Image

Screenshots:

Device details and Flutter/Dart/flutter_html versions:

Dart: 3.8.1
Flutter: 3.32.5
flutter_html: ^3.0.0

Additional info:

A picture of a cute animal (not mandatory but encouraged)

LGTMeow

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions