Arabic and Overlapping when text is justified and Bold (or underline) is used

[iiDeSTRoYeR]

I'm using WeasyPrint along with TinyMCE to generate Arabic text and then convert it to PDF. Everything is fine and dandy until a combination of formatting occurs.

Scenario #1: Arabic Text with bold and underline text decoration. Totally fine and no overlapping occurs.

Scenario #2: Arabic text with no formatting, just a simple justification. Also, fine and justification work as expected.

Scenario #3 (Problematic): Using a combination of both justification and bold (or underline) causes an overlapping issue.

The text in pure HTML should appear as follows:

The problem also persists with underlining

HTML source as a txt for analyzing the issue: IssueFile.txt

Note: The font used here is "Sakkal Majalla", However, I also tried with Times New Roman, and still the problem persists.

[malnajdi]

@liZe I really believe this issue should get some attention to be fixed. Welling to sponsor it as well. It's basic thing that would make a pdf looks much nicer but we don't have them in Arabic sadly.

Please consider prioritizing it.

[liZe]

@liZe I really believe this issue should get some attention to be fixed.

The support of right-to-left text in WeasyPrint is known to be limited, and even if it’s increasingly better there’s still a lot to do.

For this issue, as it’s often the case with right-to-left, it’s hard to know whether it’s a "simple" line to add or a more important problem requiring a lot of deep changes. And even when it’s a "simple" line, it requires some time to investigate where the problem comes exactly from, read the details of the specification, find a fix that doesn’t break anything (#1637 is a perfect example of what can go wrong when we "fix" rtl things 😢) and add tests using a language we don’t master.

That’s why we generally don’t fix right-to-left-text problems as quickly as we would like 😁.

Welling to sponsor it as well. It's basic thing that would make a pdf looks much nicer but we don't have them in Arabic sadly. Please consider prioritizing it.

Sponsoring features is a good way to make things go faster and prioritize what’s important for you. Please send us a mail, we’ll be glad to help you quickly on this issue.

[iiDeSTRoYeR]

After further investigation, the issue appears also with English text (sorry I didn't test it before as my project is AR only).

The culprit is the RTL tag which is necessary to format Arabic text.

Still, no workaround as using LTR with Arabic will not suffice.

Thanks

[RuhsarKaplan]

I am having a similar issue with English. Happens with bold text time to time. Like C and o are overlapping as seen below. I wonder if you figure out a solution for that?

Thank you

[liZe]

If someone has a simple example of overlapping text in an only left-to-right layout, please share your HTML/CSS files. Otherwise, we can assume that it’s one of the many right-to-left layout problems.