B4J Question Problem with Arabic text appearing on WebView

AlfaizDev

Well-Known Member
Licensed User
Problem with Arabic text appearing on WebView
I use WebView
When using it on Android the font appears beautiful
But when applying the same code on b4j the font overlaps, especially the vowels
I also saved the page as an HTML file and it works fine I think. The problem is in WebView b4j.
b4a
1736750621180.png


b4j
1736750662409.png


B4X:
Dim Font_Naskh As String="naskh.ttf"
    Dim Text As String=$"<p class=MsoNormal dir=RTL style='margin-top:6.0pt;margin-right:14.2pt;
margin-bottom:3.0pt;margin-left:0cm;line-height:normal;
page-break-after:avoid'><a name="_Toc97034699"><span lang=AR-SA style='font-family:Font_Naskh'>
الْجُغْرَافِيَّا الطَّبِيعِيَّةِ وهِي الَّتِي تَهْتِمُ بِدِرَاسَةِ طَبِيعَةِ الْأَرَضِ مِن حَيْث الْبِنْيَةِ الْجِيُولُوجِيَّةِ وَالظَّوَاهِرِ الْجَوِّيَّةِ وَالنَّبَاتِ وَالْحَيَوَانِ الطَّبِيعِيِّ أَو
    ومِنهَا أَيْضا الْجُغْرَافِيَا الْفَلَكِيَّةِ وَتَهْتِمُ بِدِرَاسَةِ شَكْلِ الْأرْضِ وَحَجْمِهَا وَحَرَكَتِهَا وَكُرَوِيَّتِهَا وَعَلَاَّقَاتِهَا بِالْكَوَاكِبِ الْأُخْرَى
</span ></a></p>
<p class=MsoNormal dir=RTL><span dir=LTR>&nbsp;</span ></p>
</div>
    
    "$
    Dim myHtmlString,code As String
    
    code  = $"
    <html dir='rtl'>
    <head>
    <meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no'/>
    <style Type='text/css'>
    @font-face {font-family: Font_Naskh;src: url('${ xui.FileUri(File.DirAssets,Font_Naskh) }');}


     body  {
    font-family: 'Font_Naskh',  sans-serif;
    font-size: ${16}pt;
    text-align: justify;
    }
    </style>
    </head>
    <body>  "$

    ''Log(B4XPages.MainPage.TypF_WebView1)

    myHtmlString = code &Text &  "</body></html>"

Log(myHtmlString)
'    myInterface.addJavascriptInterface(WebView1, "B4A")
    WebView1.LoadHtml(myHtmlString)
 

AlfaizDev

Well-Known Member
Licensed User
Try to use a different font. Anyway, this is not something that is controlled by B4J.

You can also try BBCodeView for rich text. It does support Arabic, though you might encounter some edge cases.
I need to use this font only. Any other recommendations about that? Also, because my text is html, I need to use webview.
When I run it on the browser it works fine
See example
 

Attachments

  • test.zip
    90.4 KB · Views: 150
Upvote 0

AlfaizDev

Well-Known Member
Licensed User
Hello, can I find a solution to my problem using PyBridge?
 
Upvote 0

peacemaker

Expert
Licensed User
Longtime User
Your trouble is anyway inside WebView JavaFX code that parses your HTML-code and renders.
Either the HTML code or the WebView code must be changed...
 
Upvote 0

epiCode

Active Member
Licensed User
Hello, can I find a solution to my problem using PyBridge?
I do not think that pybridge can be of help to you in this case.

Try adding this to your html string

B4X:
<meta charset="UTF-8">
 
  • Like
Reactions: byz
Upvote 0

AlfaizDev

Well-Known Member
Licensed User
I do not think that pybridge can be of help to you in this case.

Try adding this to your html string

B4X:
<meta charset="UTF-8">
Well I was just wondering
Will my problem be solved or not
Thank you
 
Upvote 0

stevel05

Expert
Licensed User
Longtime User
I asked MS Copilot the question it's answer was:

Yes, there are some known issues when displaying Arabic text in JavaFX WebView. Since Arabic is a right-to-left script, rendering it properly can be tricky. Some common problems include:


  • Incorrect character spacing: Arabic letters may appear disconnected or have unwanted spaces between them.
  • Font rendering issues: Some JavaFX configurations may not properly support Arabic text shaping.
  • Encoding problems: If the WebView doesn't correctly interpret UTF-8 encoding, Arabic characters might appear as boxes or garbled text.

Possible Solutions:​


  1. Enable Arabic text shaping: Set the system property prism.text to t2k before launching your JavaFX application: System.setProperty("prism.text", "t2k");

  2. Adjust font rendering settings: Disable LCD text rendering to improve Arabic text display: System.setProperty("prism.lcdtext", "false");

  3. Ensure proper encoding: Add <meta charset="utf-8"/> to your HTML content to ensure correct character encoding.

You could try the first two suggestions using the B4j SetSystemProperty keyword probably in appstart, and probably before you load the first layout. epiCode already suggested the third.
 
Upvote 0

AlfaizDev

Well-Known Member
Licensed User
I asked MS Copilot the question it's answer was:



You could try the first two suggestions using the B4j SetSystemProperty keyword probably in appstart, and probably before you load the first layout. epiCode already suggested the third.
B4X:
    Dim jo As JavaObject
    jo.InitializeStatic("java.lang.System")
    jo.RunMethod("setProperty", Array As Object("prism.text", "t2k"))

Thank you I have tried this solution before and Copilot said it works on Java 8
 
Upvote 0
Top