Problem with overlapping letters in some Arabic fonts on Webview b4j, I need someone to give me an alternative solution for an amount of money.

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


b4j


B4X:
Dim Font_Naskh As String="naskh.ttf"
Dim Text As String=$"<p 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 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)
 

Attachments

  • t4.zip
    93.5 KB · Views: 15

Mashiane

Expert
Licensed User
Longtime User
Hi

I am not sure which are the vowels... however I have added a webview to your app and set the *width* and *height*.

This ensures that the content is loaded within a webview with those settings.



You might also have to consider adding a *non breaking space* where you want to be spaces in your text.

 

Attachments

  • t4.zip
    93.4 KB · Views: 11

AlfaizDev

Well-Known Member
Licensed User


Look at the text in front of the word b4a, you will find a marker with a red circle on it, this is the right place here, away from the word, but if you look at the text in front of b4j, you will find that the same marker interferes with the word, and this is the issue, the marker should appear away from the word, like the text in front of b4a.
 

Mashiane

Expert
Licensed User
Longtime User
I just searched *webview arabic* in the forum and ran across a post you did on monday.

It seems Erel did indicate that b4j does not control the webview as per his response and other recommendations he made.


Update:
I see he suggested another component to use however your requirements are set for such.

You can also try BBCodeView for rich text. It does support Arabic, though you might encounter some edge cases.[/qoute]

This might need another look into other alternatives.
 

AlfaizDev

Well-Known Member
Licensed User
Yes, that's why I put my request here, looking for another library or workaround.
 

EnriqueGonzalez

Expert
Licensed User
Longtime User
After a lot of tests, with a lot fonts. this is the best i could do:


I tried 3 fonts:
KFGQPC Uthman Taha Naskh Regular <- overlaps
Noto Naskh Arabic, loaded from google fonts <- doesn't overlap
Bahij Uthman Taha Regular <- Doesn't overlap
(and tron, just for testing that i was loading the fonts correctly )
 

Attachments

  • 1737153132566.png
    100.7 KB · Views: 13
  • t4.zip
    240.8 KB · Views: 7

AlfaizDev

Well-Known Member
Licensed User
Thank you for all your hard work.
I have tried a lot of fonts before but the application I want is based on KFGQPC Uthman Taha Naskh and others like it.
After searching, I found solutions from the inclusion of a browser inside my application and there are tools that allow this.
Such as CEF (Chromium Embedded Framework)
Also JxBrowser, but it's expensive

Can anyone help me with this?
 
Last edited:

EnriqueGonzalez

Expert
Licensed User
Longtime User
Ok some good news and some bad news.

good news, i managed to embed CEF into b4x, bad news, it doesnt show anything XD, doesnt matter what i pass, always shows blank screen, also it seems it never triggers the load.

I am attaching the project, so someone could take another look, i already look at every java cef forum and didn't find anything wrong with the code.
Unfortunately the libs needed to compile are big around 5mb so i can't share it here. if someone needs it i can send them by email.

Greetings
 

Attachments

  • t5.zip
    241.2 KB · Views: 9

AlfaizDev

Well-Known Member
Licensed User

Thank you for your effort

I made a few attempts
and nothing changed.
And the record is intact as far as I can see.
But unfortunately, the page remains blank.


B4X:
WARNING: package com.sun.javafx.embed.swing.oldimpl not in javafx.swing
Waiting for debugger to connect...
Program started.
URL: https://www.google.com
Initializing browser...
يناير ??, ???? ??:??:?? ص me.friwi.jcefmaven.impl.progress.ConsoleProgressHandler handleProgress
INFO: LOCATING |> In progress...
يناير ??, ???? ??:??:?? ص me.friwi.jcefmaven.impl.progress.ConsoleProgressHandler handleProgress
INFO: INITIALIZING |> In progress...
يناير ??, ???? ??:??:?? ص me.friwi.jcefmaven.impl.progress.ConsoleProgressHandler handleProgress
INFO: INITIALIZED |> In progress...
CefApp initialized.
initialize on Thread[#43,AWT-EventQueue-0,6,main] with library path D:\MyApp\t5\B4J\Objects\jcef-bundle
[0120/100912.926:WARNING:alloy_main_delegate.cc(559)] Alloy bootstrap is deprecated and will be removed in ~M127. See https://github.com/chromiumembedded/cef/issues/3685
Browser instance created.
Loading page from URL...
Page loaded from URL: https://www.google.com
Call B4XPages.GetManager.LogEvents = True to enable logging B4XPages events.
Browser UI repainted.

B4X:
Sub Class_Globals
    Private Root As B4XView
    Private xui As XUI
    Private WebView1 As WebView
End Sub

Public Sub Initialize
    ' أي تهيئة تحتاجها هنا
End Sub

Public Sub B4XPage_Created (Root1 As B4XView)
    Root = Root1
    Root.LoadLayout("MainPage")

    ' تحديد رابط الإنترنت لتحميل الصفحة
    Dim url As String = "https://www.google.com"
    Log("URL: " & url)

    
    Try
        Dim javaObject As JavaObject = Me.as(JavaObject)
        javaObject.RunMethod("initBrowser", Null)
        javaObject.RunMethod("loadPageFromURL", Array(url))
    
    Catch
        Log("Error loading browser: " & LastException.Message)
    End Try

End Sub

#if java
import me.friwi.jcefmaven.*;
import org.cef.*;
import org.cef.browser.*;
import org.cef.handler.*;
import javafx.embed.swing.SwingNode;
import javax.swing.*;
import java.awt.*;
import javafx.application.Platform;

boolean useOSR = false;
boolean isTransparent = false;
private CefApp cefApp_;
private CefClient client_;
private CefBrowser browser_;
private Component browserUI_;

public void initBrowser() throws Exception {
    System.out.println("Initializing browser...");
    SwingUtilities.invokeAndWait(() -> {
        CefAppBuilder builder = new CefAppBuilder();
        builder.setAppHandler(new MavenCefAppHandlerAdapter() { });

        // تخصيص مسار مطلق لتجنب التحذيرات
        builder.getCefSettings().root_cache_path = "D:/MyApp/cache";

        try {
            cefApp_ = builder.build();
            System.out.println("CefApp initialized.");
        } catch (Exception e) {
            throw new RuntimeException(e);
        }

        client_ = cefApp_.createClient();

        CefMessageRouter msgRouter = CefMessageRouter.create();
        client_.addMessageRouter(msgRouter);

        browser_ = client_.createBrowser("", useOSR, isTransparent);
        if (browser_ != null) {
            System.out.println("Browser instance created.");
        } else {
            System.out.println("Failed to create browser instance.");
        }
        browserUI_ = browser_.getUIComponent();
        browserUI_.setPreferredSize(new Dimension(800, 600));

        JPanel panel = new JPanel(new BorderLayout());
        panel.add(browserUI_, BorderLayout.CENTER);

        SwingNode swingNode = new SwingNode();
        swingNode.setContent(panel);

        Platform.runLater(() -> {
            panel.repaint();
        });
    });
}


public void loadPageFromURL(String url) {
    if (browser_ != null) {
        System.out.println("Loading page from URL...");
        browser_.loadURL(url);
        System.out.println("Page loaded from URL: " + url);

        // تأكيد تحديث العرض بعد تحميل الصفحة
        Platform.runLater(() -> {
            browserUI_.repaint();
            System.out.println("Browser UI repainted.");
        });
    } else {
        System.out.println("Browser instance is null.");
    }
}
#End If
 
Cookies are required to use this site. You must accept them to continue using the site. Learn more…