Ruby (Furigana) on Android with a big font

[Larpoux]

Hi,

Here is my code :

child: Html
 (

             data: '<div><ruby>私<rt>わたし</rt></ruby>は<ruby>週末<rt>しゅうまつ</rt></ruby>に<ruby>野球<rt>やきゅう</rt></ruby>をする。</div>',
             style:
             {
                             "div": Style
                             (
                                             backgroundColor: Colors.white,
                                             fontSize: FontSize(30),
                                             fontFamily:  "Hiragino Kaku Gothic Pro",
                             ),
                             "b": Style(color:HighLightColor),
             },
)

The rendering is fine on iOS (see the enclosed screenshot), but is bad on Android (see the other enclosed screenshot) : The furigana annotation is almost completely eaten.

Note : with a fontSize: FontSize(13), the rendering is OK, but the text is really too small to be readable.

Please, tell me if I can do something to fix that. Furigana is very, very important for us. Eaven a hard dirty patch into the code would be OK.

On iOS :

on Android :

[Larpoux]

Does someone have any news about this PR (Problem Report) ? Thank you.

[Larpoux]

Any news for this Problem Report ?

[Larpoux]

Does someone have any news about this PR (Problem Report) ? Thank you.

[erickok]

As I have no real understanding of typesetting of Ruby,I couldn't even know what the problem is, let alone since it. It's this something that works with plain Text widget in Flutter? Could you explain in more detail what the problem is. Sorry for the lack of understanding. I only know latin languages.

[tneotia]

I think I see what you mean... iOS: vs Android: It seems cut off. I'll try soon to workout what is going on here.

[Larpoux]

Yeah ! Thank you so much if you can do something for that. We will ship our App in 3 months and this problem was very serious for us. I was about to dive into flutter_html code to try to find a fix, but I guess that flutter_html is a very complicated plugin. And Ruby/Furigana support is probably a very tricky code inside flutter_html.

Thank again if you can do something.

[tneotia]

Hi @Larpoux , I did some preliminary testing just now and it seems like your problem is because you are setting backgroundColor in your Style for <div>. When I removed the background color the Ruby displayed fine - I don't know if this is a good solution for you, nevertheless this shouldn't be happening so I will try to fix it.

[Larpoux]

Thank you very much @tneotia for spending time on this PR.

Yes, it is acceptable not to use backgroundColor. This is much better than having furigana eaten 😆 .

[tneotia]

Yea, this is very weird. I cannot reproduce it anymore with your code on my physical device. It could be an issue with the emulator?

This is the exact same code you gave me and I made no changes to the library. @erickok could you check this out on your end too (if you have an Android)?

[Larpoux]

HI @tneotia ,

I did several tests with flutter_html 1.2.0.

A- On an emulator

1. iOS, with backgroundColor:

2. Android, with backgroudColor:

3. iOS, without backgroundColor:

4. Android, without bacgroundColor:

Those tests shows that the Ruby text does not seem to be eaten by the emulators by flutter_html, but we have a (new?) problem with continuation lines.

B- On a real device, without backgroundColor:

The furigana is eaten, and the continuation lines are too high

My code

Html//Widget

(               
                data :'<div>' +
                (
                          //_japExample
                          '<ruby>私<rt>わたし</rt></ruby>は<ruby>週末<rt>しゅうまつ</rt></ruby>に<ruby>野球<rt>やきゅう</rt></ruby>をする。' +
                           '<ruby>私<rt>わたし</rt></ruby>は<ruby>週末<rt>しゅうまつ</rt></ruby>に<ruby>野球<rt>やきゅう</rt></ruby>をする。' +
                           '<ruby>私<rt>わたし</rt></ruby>は<ruby>週末<rt>しゅうまつ</rt></ruby>に<ruby>野球<rt>やきゅう</rt></ruby>をする。'
                ) + '</div>',

                style:
                {
                            "div": Style
                             (
                                        //!!!!!!!!!!!!!!!backgroundColor: sound.isPlaying( audio ) ? LightSelected : Colors.white,
                                        fontSize: FontSize(16),
                                        fontFamily:  "Hiragino Kaku Gothic Pro",
                              ),
                              //!!!!!!!!!!!!!!!!!!!!!!!!!!!!"b": Style(color:HighLightColor),
                },
 )

[tneotia]

@Larpoux I think increasing the lineHeight for <ruby> in <style> will probably fix the issue, since the "main" ruby lines are typset properly, there just is not enough space for the small characters above the "main" lines. I still think that we should try and solve this properly though without any workaround, this data is helpful and I'll look into it some more. In the meantime can you try lineHeight like this: lineHeight: LineHeight(2.4) in your Style for <div>?

Also your default background color should be Colors.transparent to make sure Furigana isn't eaten when rendered.

[Larpoux]

@tneotia , Yes, lineHeight: parameter was the solution (I did not know this parameter before).

Actually, Ruby/Furigana is now OK, except a little problem : on iOS, the characters that do not have Furigana annotation above are too high. But it is OK on Android. This is a small detail, and we can live with that ;-) . Thank you @tneotia for the time you have spent on this Issue.

Here are the result on iOS :

And here the result on Android :

[tneotia]

Sure, no problem, glad it worked. You can increase or decrease the lineHeight number as you wish, 1.2 is default so I asked you to double it for testing. Just know this will also affect English text, which will have the spacing you see between the big font size characters (I guess those are called Ruby).

[tneotia]

@erickok this can be closed I think.