Repository navigation
Bidi text rendering issue with inline bold spans in RTL content #7288
Description
Summary
Bidirectional text with inline <span> elements (especially with bold styling) doesn't render correctly in RTL (right-to-left) contexts.
Steps to reproduce
- Open
bidi-css-reproduction.htmlin Ladybird - Compare with Chrome/Firefox/Safari
Expected behavior
Arabic text with bold spans should maintain proper RTL flow. Bold text should not break word order or text direction.
Actual behavior
Text direction and word order appear incorrect when bold spans are used within RTL content.
Example
<div dir="rtl" lang="ar">
نشارك معك تقييمك الدوري مقدماً من مديرك المباشر
<span class="bold">خالد المطيري</span>.
لأدائك كـ<span class="bold">مصممة تجربة مستخدم</span>
في <span class="bold">فريق التصميم</span> خلال الربع الأول 2025
</div>Test file
See bidi-css-reproduction.html for multiple test cases.
Browser versions
- Ladybird: built from source-code | commit hash is 865b2b8
- Chrome: [works correctly]
- Firefox: [works correctly]
- Safari: [works correctly]
Operating system
macOS
Steps to reproduce
- Open
bidi-css-reproduction.htmlin Ladybird - Compare with Chrome/Firefox/Safari
Expected behavior
Arabic text with bold spans should maintain proper RTL flow. Bold text should not break word order or text direction.
Actual behavior
Text direction and word order appear incorrect when bold spans are used within RTL content.
URL for a reduced test case
https://jsfiddle.net/s2t56u0g/
HTML/SVG/etc. source for a reduced test case
<div dir="rtl" lang="ar">
نشارك معك تقييمك الدوري مقدماً من مديرك المباشر
<span class="bold">خالد المطيري</span>.
لأدائك كـ<span class="bold">مصممة تجربة مستخدم</span>
في <span class="bold">فريق التصميم</span> خلال الربع الأول 2025
</div>Log output and (if possible) backtrace
N/AScreenshots or screen recordings
Build flags or config settings
No response
Contribute a patch?
- I’ll contribute a patch for this myself.
Activity
ahmedrowaihi commentedon Jan 3, 2026
Hey @Calme1709 @Gingeh ,
I would love to give it a shot and DIY patch, just curious was there any plan for this ?
any strategies you are recommending ? specific files that I should focus on?
Gingeh commentedon Jan 3, 2026
here's the specification for bidirectional text: https://drafts.csswg.org/css-writing-modes/#bidi-algo
unfortunately it is quite complex and doesn't actually describe how to implement it :(
ahmedrowaihi commentedon Jun 12, 2026
@AtkinsSJ hey, can u allow me to open a PR ?
I want to open a PR for this 41b7b07
gmta commentedon Jun 12, 2026
@ahmedrowaihi
No, we've changed our contribution policy unfortunately.
Psychpsyo commentedon Jun 12, 2026
How to implement it would be in UAX#9.
ahmedrowaihi commentedon Jun 12, 2026
@Psychpsyo yes I did implemented that, it's on my own fork and it's working, but the repo ladybird is not allowing PR opening
ahmedrowaihi commentedon Jun 12, 2026
@gmta this is sad
gmta commentedon Jun 12, 2026
@ahmedrowaihi okay