flutter_html [BUG] Render Arabic (RTL) Text with images not as expected

Describe the bug: When render Arabic text with images the render not correct

HTML to reproduce the issue: Here Html code used :

<div class="ql-editor read-mode"><p class="ql-indent-3 ql-direction-rtl" style="text-align: right;">هذه معادلة&nbsp;<img src="https://erp.staging.jahezacademy.com/files/wzjo9rl.png" width="148">حيث أننا يمكننا حساب&nbsp;<img src="https://erp.staging.jahezacademy.com/files/GwD2iuN.png" width="78"> حيث <img src="https://erp.staging.jahezacademy.com/files/YmFCjBB.png" style="" width="32"></p><p class="ql-direction-rtl" style="text-align: right;">حيث <img src="https://erp.staging.jahezacademy.com/files/HbnxVz8.png" width="19"> = 3.14 و <img src="https://erp.staging.jahezacademy.com/files/SAK2aJF.png" width="17">= نصف القطر</p><p class="ql-direction-rtl" style="text-align: right;"><strong> مساحة الدائرة = ط × س = 3.14 ×س</strong></p></div>

Html widget configuration: Html(data:src)

Expected behavior: Screen Shot 2023-01-03 at 18 43 32

Screenshots: Screen Shot 2023-01-03 at 18 42 44

Device details and Flutter/Dart/flutter_html versions: Flutter 3.3.9 • channel stable • https://github.com/flutter/flutter.git Framework • revision b8f7f1f986 (6 weeks ago) • 2022-11-23 06:43:51 +0900 Engine • revision 8f2221fbef Tools • Dart 2.18.5 • DevTools 2.15.0

html package version : 3.0.0-alpha.6

Jan 03 '23 17:01 M97Chahboun

Facing the same issue, any solution available?

Feb 09 '23 09:02 MuhammadUsamaSiddiqui

Any update ?

May 04 '23 21:05 M97Chahboun

I'll look into this

May 09 '23 14:05 Sub6Resources

@Sub6Resources Thank you.

May 09 '23 15:05 M97Chahboun

Looks like an issue in Flutter: https://github.com/flutter/flutter/issues/54400. See also https://github.com/flutter/flutter/issues/111381.

Note that your text renders in the correct order if you add

<style>
    .ql-direction-rtl {
      direction: rtl;
    }
</style>

to your Html input. It's just the images that are misplaced.

May 16 '23 19:05 Sub6Resources

I'll take a look at the Flutter code later and see if I can open a pull request

May 16 '23 19:05 Sub6Resources

Thank you, I try to add rtl style but not render as expected, i think the main issue form flutter widget (Text.rich)

May 16 '23 22:05 M97Chahboun

@Sub6Resources

I also encountered a similar issue. It seems that there is an issue with rendering images when the width or height CSS properties are applied to the image tags. A is displayed correctly, but B does not appear at all.

I tested using Flutter 3.10.1 and flutter_html: ^3.0.0-beta.1, and I conducted the testing on the web platform.

A (it works)

Html(
                  data: """
          <html>
               <p>Render this item</p>
               <img src="https://storage.googleapis.com/cms-storage-bucket/90e34daecca082eb9b28.png" title="test">
         </html>
                    """,)

B (it doesn't work)

 Html(
                data: """
          <html>
               <p>Render this item</p>
               <img src="https://storage.googleapis.com/cms-storage-bucket/90e34daecca082eb9b28.png" title="test" style="width:100%;">
         </html>
                    """,)

May 19 '23 17:05 ckdgus08

@ckdgus08 this is an unrelated issue. I've opened a new issue for your case at #1277

May 19 '23 17:05 Sub6Resources

flutter_html flutter_html copied to clipboard

[BUG] Render Arabic (RTL) Text with images not as expected

flutter_html
flutter_html copied to clipboard