The experience of rendering Arabic typography and its technical debt

by bookofjoe • 1 month ago

287 81 1 month ago

adam_rida• 1 month ago

very interesting, arabic is a good reminder that text rendering is mostly solved for the scripts that shaped the defaults.

The hard part is that typography, shaping, bidi behavior, font fallback, search, and the editor model all leak into each other.

You cannot fix one layer cleanly when the assumptions are wrong in all of them.

yorwba• 1 month ago

A more academic treatment of justifying Arabic-script text can be found in https://quod.lib.umich.edu/j/jep/3336451.0023.104?view=text;...

mackeye• 1 month ago

awesome article! i appreciated the alternatives and misc. workarounds to OT/unicode typesetting toward the end, very helpful :D (go blue!)

mohamedkoubaa2• 1 month ago

I'd like to see some more mainstream usage of disconnected fonts for Arabic, for example like these: https://www.arabaddigital.com/en/article/2100-Quarantining-o...

amdivia• 1 month ago

This was once attempted, and in a way such that each letter needed only one character no matter it's position in the word

Unfortunately it died

https://worksthatwork.com/6/unified-arabic

mohamedkoubaa2• 1 month ago

I actually like that they depend on position, it even carries semantic information when reading because of how conjugation works so it actually helps you read faster

jansan• 1 month ago

Very interesting. I just implemented a text shaper and renderer from scratch with support for complex scripts like Arabic, Nastaliq and Indic (will soon post about it here on HN). Now that you write about it, the lack of stretching really is a deficiency in the OpenType spec.

If you want a solution for this it has to happen in the rendering step, not the shaping (which is HarfBuzz's main task). The shaper has no information about the available space, but when rendering you could stretch individual glyphs to the desired width, similar to adjusting the width of whitespace in Latin, but more complex, because you actually have to modify the glyphs with a scale transform. I am not an expert on Arabic script by any means, but this should be possible IMO. It would at least be an interesting experiment. Of course the JSTF table would be the right way to do it, but there seems to be a lot of confusion around it. Maybe in the age of LLMs we can give it another shot.

amluto3• 1 month ago

It does seem like a KP-like algorithm ought to be able to optimize the break positions without extreme algorithmic difficulty aside from the inputs being considerably more complex than for Latin block print: the cost function for a proposed line is a straightforward [0] calculable function of the contents of the line, and I think one could make a dynamic programming algorithm that tracks, for each input position, the cost of the optimal layout of all text up to that position with a break at that position. This gives an algorithm that takes cubic time. (For input length n, you need to fill in n values in the table. Each value scans the entire table before that position and does a calculation with complexity linear in the proposed line length.)

As a practical matter, there’s an input length n and there is some upper bound B on a credible line length as measured in code points, so there are only at most n*B credible proposed lines to evaluate, which also limits the useful look back on the table to B positions, so I think the time complexity could be reduced to O(n*B^2) without making the results worse on reasonable inputs, and this is probably quite tolerable.

[0] Straightforward once you’ve implemented the whole Arabic rendering stack, anyway. I am certainly not qualified to calculate this function :)

alfiedotwtf• 1 month ago

but when rendering you could stretch individual glyphs to the desired width

“Individual glyphs” :)

It’s Arabic, so you wouldn’t stretch a single glyph, id would have to e done after shaping so you can work out the next run (either a single Aleph or the joined characters) in order to know what is stretchable (then throw it to your layout step)

amluto3• 1 month ago

Is this a small typo?

The relevant rule, W2 of UAX #9, reclassifies a digit as an ARABIC NUMBER if any of the previous strong characters in the paragraph were Arabic letters, and as a EUROPEAN NUMBER otherwise. Both render their internal digits left-to-right, which is correct: numbers everywhere on Earth are read most-significant-first.

Does the author mean most-significant-on-the-left? The statement as written is a statement about the order in which one reads or perhaps thinks the number, whereas I think the author is discussing how numbers, including collections of numbers delimited by hyphens and such, should be laid out on the page.

slim5• 1 month ago

I think he's talking about the rendering algorithm with regards to the stream of text. essentially saying rendering direction should follow reading convention.

on the other hand, in formal arabic, it's not unusual that numers are read in clusters from least significant to most significant (right to left). 1984 would be read : eighty four and nine hundred and a thousand. not sure if the author is aware of this

slim5• 1 month ago

actually : four and eighty and nine hundred and a thousand

amluto3• 1 month ago

rendering direction should follow reading convention.

What does that even mean in this context? In a strictly LTR language, sure, you read left-to-right and the glyphs are rendered left-to-right. But the whole discussion is about bidirectional text, where the text is rendered by a complex algorithm. What is the “rendering direction”?

I know just enough about some RTL languages to know that one can absolutely intersperse RTL text with, say, and English phrase, and you still read the first (leftmost in the group) English sound first and so on :)

somat2• 1 month ago

This is a thing I have wondered about. are arabic numbers little endian when embeded in arabic text? The text is read right to left. But the numbers are the same as we put them in our left to right text where they are big-endian(read big to small). so are numbers in original arabic little-endian? read small to large. with the interesting side effect that numbers are universal.

kqr2• 1 month ago

I think least significant first is the most natural order for written numbers (and it makes addition easier.)

I had always assumed that was what was intended with Arabic numbers, only silly Europeans made a mistake when they borrowed the positional system and forgot Arabic is written the other way. (Or perhaps intentionally avoided mirroring the digits for ease of communication?)

But the author of this article makes it sound like even in Arabic, numbers are read out loud most significant first.

petesergeant• 1 month ago

My understanding is that It Depends, but also feast your eyes on this photo I took, which was very confusing to me:

https://imgur.com/a/jL8lfZ1

throw-the-towel• 1 month ago

This article is wonderful. It's interesting, it's captivating, full with detail, and to think I never gave much thought about Arabic rendering before.

This part nearly had me chuckle audibly:

He says yes. The result is "Simplified Arabic": initial fused into medial, final into isolated, ligatures dropped. It conquers the Arab newsroom in a generation. Mrowa is assassinated at his desk eight years later, by an unrelated faction, in an unrelated dispute.

Also, it's depressing how hundreds of millions of people couldn't even get their language typeset on a computer, and our industry meanwhile was busy building AI-native AI for your groceries (have we mentioned it has AI btw?) and similar performative bullshit.

slim5• 1 month ago

maybe AI will solve this ?

kg• 1 month ago

AI can probably solve "how do we get good shaper implementations into software", provided a good enough spec and test suite are available, but it won't solve "how do we convince stakeholders to value supporting languages spoken by massive numbers of people", most likely

gwern3• 1 month ago

Also, it's depressing how hundreds of millions of people couldn't even get their language typeset on a computer, and our industry meanwhile was busy building AI-native AI for your groceries (have we mentioned it has AI btw?) and similar performative bullshit.

AI also brought you this "wonderful" article, I would note.

dboon2• 1 month ago

What? This is one of the most clearly human written articles I could imagine. Can you explain what you mean?

evmar• 1 month ago

One thing I sometimes think about when I think about text layout problems is how the text we use also has a bunch of complexities that we can take for granted.

Think of variable width characters and kerning and ligatures and hyphenation and justification. Imagine computers had been won by a CJK language, which have none of these problems. You could imagine a similar article about how exotic and difficult English layout is.

retrac• 1 month ago

Both Latin and Chinese have been modified by the technology used to write them.

When carved in stone the lines are much straighter. When written with brush or pen they became semi-cursive. When printing was introduced, they became grid-like and regular.

What westerners who are passingly familiar would think of as the standard Chinese typeface - the strict square grid with straight-line characters - arises in part from printing technology. Easy to carve that into wood blocks, and easy to line up the slots into a grid.

Latin was similarly morphed to fit into the realities of printing in the 1500s. And is still being morphed. Notice how numbers 123... are in-line and at the same height as the letters. That's a very modern convention, typewriter and computer influence on our orthography. Traditionally digits were more likely to appear as subscript, off-centre.

nagaiaida• 1 month ago

what selective pressures against oldstyle numerals with ascenders/descenders existed that wouldn't have equally applied to letterforms with those same features?

(aha i have found the answer to my own question: miniaturization for fractions in phototypesetting)

somat2• 1 month ago

Conversely, English has a joined form(cursive) that is nearly dead because mechanical text assistance devices (first typewriters, now computers) work much better with the block form. While sad in a cultural loss sort of way the joined form only really makes sense when the text is hand written.

I am not familiar with the history of Arabic typography, but I sort of assume there was an archaic block form and their current joined form is the result of many centuries of encoding hand writing practice. advanced enough that falling back to a block form is impossible with the side effect of making simple mechanical text formatting also impossible.

As for Chinese derived characters. we currently are able to jam them awkwardly into our alphabet optimized structures(one code per character) but I wonder if a Chinese native encoding would look different. Would it make sense to try and represent the sub-characters present in each Chinese character in the encoding? I suspect not, Chinese works, but it also does not appear amiable to simple mechanical assistance.

slibhb3• 1 month ago

Another wrinkle with Arabic is linguistic conservatism. Due to Islamism and the idea that Arabic is the language of of God (the Quran was written in Arabic by the supposedly illiterate prophet), Arabic has lagged behind other languages in terms of innovation.

Hebrew is a closely related semitic language that simply adopted a block and cursive form. It has also been greatly simplified and friendlier towards loanwords, which has made it far easier to learn.

mook• 1 month ago

There's the https://en.wikipedia.org/wiki/Ideographic_Description_Charac... that kind of does that. The problem is that there's character divergence (see all the brouhaha about Unicode Han unification), so there needs to be something else to select variants too.

As a reference, I don't believe any of the pre-Unicode CJK&c encodings attempted that.

khaled2• 1 month ago

There is no unjoined form of Arabic. The Arabic script became Arabic when Nabataean script started developing joined letter forms. Unjoined Nabatean is as foreign to Arabic as Phoenician is to Greek.

wodenokoto• 1 month ago

Looking at dictionaries and printing presses from China before the invention of computers reveals that they probably would have done something similar to ascii, just with more bits to encompass all the characters.

qingcharles7• 1 month ago

CJK languages can include vertical and RtL stretches too, to complicate matters. Here's some lyrics I made as a test:

https://codepen.io/kingcharlesone/pen/GgRXLoM

Japanese magazines usually mix three different script types on a majority of the pages like this:

https://imgur.com/a/x61XbIV

(In another quirk some Japanese mags open right-bound, others open left-bound)

jrdres2• 1 month ago

Chinese apparently was originally always written vertically top-to-bottom. (And then columns would be right-to-left.) Modern Chinese just rotates everything except the characters themselves 90 degrees to the Latin order.

I also read that a few Chinese texts only make sense in vertical order: one had a pun where the characters read one way as separated characters, but as stacked was also a single character pun for something like a "crumbly cookie".

VeninVidiaVicii• 1 month ago

Disclaimer: I’m not fluent in Arabic by any means, but the stretched out to both margins style looks very Quranic to me. I don’t think it looks appropriate for say, a message about my DoorDasher.

ramblurr• 1 month ago

But a message about your Door dasher also likely wouldn't be justified.

slim5• 1 month ago

  Internet Explorer 5.5 implements text-justify: kashida. For one brief, weird browser-quarter Microsoft is the only software vendor on earth that can justify Arabic correctly on a screen.

evilturnip• 1 month ago

Arabic script is a great test to see if your terminal/renderer/UI can handle anything: contexual shaping, cursive connectivity, bidirectional text layout, diacritics and vertical displacement.

I went down this rabbit-hole awhile back and it made me really appreciate the complexity of the script.

kqr2• 1 month ago

This explains a lot of why I think Arabic looks so beautiful on the page. I also love the way it can sound when spoken. Shame I don't have reason good enough to take the years I would need to learn it.

jazzyb• 1 month ago

Learning language is like learning poetry. Your appreciation of the thing grows proportionally with the practice. Which means you don't need to learn to fluency to appreciate Arabic. Even modest practice, just learning to write the alphabet, will increase your appreciation for the language if that's what you'd like to do.

Obscurity4340• 1 month ago

Have experienced this with a bilingual relative whos language i have learned bits and pieces of both of us enjoy it. They give you little challenges from time to time too which is fun

qingcharles7• 1 month ago

It's funny -- I hate the way Arabic sounds when spoken, even though I agree it looks pretty. To my ears French and Japanese sound the nicest.

samat• 1 month ago

I feel so sorry for Arabs now, just read that paragraph about everyday experience of trying to write English-Arabic text in the mail or any other editor.

I have watched senior engineers, fluent in both Arabic and English, give up on writing a long email in Outlook on a Wednesday afternoon because the cursor would not behave, and switch to Arabic-only or English-only because the cognitive cost of fighting the editor exceeded the cost of monolingual phrasing. Actually I remember very well suffering this while using Facebook for the first time in my life, and I could not register; I was very slow typer that when I reached the moment the cursor does this weird thing, I would just stare at it and never progress.
This is the ordinary experience of writing mixed Arabic-English text in 2026, in every major editor, email client, and chat application I know of. The pettier cousins are everywhere too, and I collect them: a range like 10–20 silently reading as twenty-to-ten, because digits are weak and the dash is neutral; a trailing exclamation mark teleporting to the far end of the line; a password, toggled visible, displaying in an order that does not match what was typed. None of these are anyone's bug, exactly.

My own Cyrillic struggles are nothing in comparison.

khoirul• 1 month ago

Monday's editor does this even for English text!

dhosek4• 1 month ago

The complexities of mixed LR and RL text are quite astonishing since it’s not really even a case of just switching modes when switching scripts since double-nested (or more) texts can change the semantics of line breaks. This article provides a good overview: https://tug.org/TUGboat/tb08-1/tb17knutmix.pdf [1]

In college [2], when I wanted to quote some texts from Exodus in Hebrew in a paper that I wrote, I ended up avoiding the issue by hand-reversing the letter order and manually breaking lines. 8 bits is insufficient to cover all the possible combinations of letters and vowel markings so the font didn’t include any vowel markings and only did dageshim for בּ and פּ if I recall correctly.

⸻

1. As an aside, it would have been really nice if Unicode provided a R-L mirrored Latin alphabet to make it easier for monolingual developers to grasp the complexities surrounding mixed directional typesetting. I suppose it could still be added, although Unicode tends towards conservatism on adding additional characters.

2. This was 1990, well before Unicode in the era of a hundred or so 8-bit character encodings, most of which were not implemented widely. I also had to type the text using the arbitrary ASCII-Hebrew mapping of the font I was using which, among other things, led me to discover that letter frequency in Hebrew is much more uniform than it is in English.

kstrauser• 1 month ago

That link’s a 404.

teddyh• 1 month ago

RFC 3986 (STD 66) recommends (in appendix C) delimiting URLs in angle brackets to avoid the problem which your link now has. I.e. if you’d written <https://tug.org/TUGboat/tb08-1/tb17knutmix.pdf>¹ there would have been no problem.

qingcharles7• 1 month ago

I was lucky enough to date someone from the Gulf, so I forced myself to understand and read Arabic scripts (but not understand the text), which is a huge bonus when creating multi-lingual designs.

I already had a good understand of CJK scripts, and you'll come across RtL there, with things like tategaki which is both vertical and RtL at the same time (and can include quotes in other languages such as English and Arabic). Here's some lyrics I made in that format for reference:

https://codepen.io/kingcharlesone/pen/GgRXLoM

What peculiarities does Cyrillic text have? I've never learned to convert Cyrillic to Latin.

raphlinus2• 1 month ago

I love this question. Basically all scripts have things that make them challenging to render, sometimes little things, sometimes bigger ones.

Cyrillic for Russian is reasonably straightforward, but it's also used for many other languages. The variation in style is particularly notable for Bulgarian[1]. A sophisticated font might have a "loca" table with locale-specific adjustments, but this is not universal yet, for example the issue to add it to Open Sans is still open[2]. To see the differences, try [3] and use the Language dropdown to select Bulgarian.

[1] https://en.wikipedia.org/wiki/Bulgarian_alphabet

[2] https://github.com/googlefonts/opensans/issues/114

[3] https://localfonts.eu/freefonts/traditional-cyrillic-free-fo...

cyberrock• 1 month ago

I recently learned how messed up URLs are in RtL and I'm also eternally grateful to not have to deal with that. Simulated example:

    https://example.com/[Arabic or Hebrew start of sentence]
                                            wrapped_url_part

It seems like there are probably some phishing attacks based on this.

Georgelemental2• 1 month ago

The experience of rendering Arabic typography and its technical debt

Related Stories