Artificial intelligence
An AI writing in Arabic: what breaks in your interface
The Arabic a model produces is correct and your screen no longer is. Here are the eight places it breaks, and the check that finds them in an hour.
A shop in Bab Ezzouar puts its catalogue into Arabic. A model writes the descriptions, they are clean, and nobody on the team reads a word out of place. On the first customer’s phone, the price line starts from the wrong side, the delivery date shows a day that does not exist, and the brand name has pushed the whole title the other way round.
The text is right. What broke is the screen. An artificial intelligence system produces Arabic that does not have the properties of the text your developers were looking at the day they designed the page: it mixes scripts, it writes its digits in Latin characters, and it adds none of the invisible marks a bidirectional layout uses to decide.
This article names the eight places it breaks, in the order you will meet them, and gives the one-hour check that finds all of them. It does not re-argue that an Arabic interface is not a mirrored French one: that is the prerequisite, it is covered elsewhere, and everything below happens even once it has been respected.
What arrives is not Arabic, it is a mixture
Ask a model for a product description in Arabic and look at the string it returns, not at the screen. You will almost always find four scripts in one sentence: Arabic, a brand name in Latin characters, Western digits, and a unit or abbreviation carried over from French.
Each of those pieces has its own direction. Arabic reads right to left, digits read left to right even inside an Arabic sentence, and so does a Latin name. A browser knows how to resolve all of it — it applies a standard bidirectional algorithm — but it resolves it from cues the model has no reason to have supplied.
That is the difference from text written by somebody who works in Arabic. That person puts a reference between two Arabic words without thinking about it, and their keyboard, word processor or messaging app inserts the direction marks for them. A model returns a bare string.
The consequence is a design one, not a translation one: your interface has to treat Arabic text as mixed text, always, including when it looks entirely Arabic to you. The eight sections below are where the mixture shows, measured on our own screens between May and August 2026.
The date: the error nobody sees because it is plausible
The Arabic date format browsers provide is not only digits and slashes. It carries an invisible right-to-left mark after each separator, because the date already carries the instruction for its own reading direction.
Wrap that string in a container you force left-to-right — the correct reflex for a bare number — and you are fighting instructions that are already there. Measured on 20 August 2026 in a browser, one and the same date in three containers gave three results: forced left-to-right it renders 202026/08/; left on automatic detection, 2026/08/20; stripped of its marks and then forced, 20/08/2026.
The first form was live on both of our Arabic dashboards, and it survived for weeks for one reason: it is plausible. The day and the year swapped places and a separator was left stranded, which does not look like a fault. A quick glance reads an oddly formatted date, not a wrong one.
The rule that comes out of it goes beyond dates: a string that already carries its direction is left on automatic detection, and forcing is reserved for values that have no direction of their own. A formatted date is not a bare number, even when it is made only of digits.
Digits have no direction, the sentence around them does
A price, a phone number, a percentage, a quantity: those values read left to right in every language, Arabic included. Dropped as they are into a right-to-left sentence they sit correctly most of the time, and move to the wrong place the moment a sign accompanies them.
The case that breaks is the attached sign: a minus in front of a number, a percent behind it, a currency, a change arrow. The sign is directionally neutral, so it takes the direction of its surroundings, and it ends up on the opposite side from the one it should occupy. A fall renders as a rise with its sign trailing at the end of the line.
The answer is one rule and one trap. The rule: isolate the value in a bidirectional isolation element forced left-to-right, never the whole sentence. The trap: putting that direction on the block rather than on the value also recomputes the block’s alignment, which was inherited, and pushes the figure against the wrong edge of the section.
We fixed exactly that in four places on one site — a proof bar, an offers grid, a featured result and the footer — and every one of them had been written by somebody who knew figures must be isolated. Knowing the rule is not enough if you apply it one level too high.
The first word decides the whole line
A bidirectional paragraph takes its direction from the first strong character it meets. A digit is not a strong character; an Arabic letter is, and so is a Latin one. So an Arabic sentence that opens on a brand name written in Latin aligns as a Latin sentence, entirely, to the full stop.
It is the most visible defect and the easiest to produce with a model, because a model happily puts the product name first. A card title, a message subject, a button label: anything opening on a Latin word flips, and the rest of the Arabic page stays correct around it, which makes the fault look random.
We took the decision the other way on our own page title: in Arabic the company’s Latin name goes last, never first, precisely so the line resolves in the direction of the language carrying it. That is not an aesthetic preference, it is the only way to get a stable rendering without adding markup to every title.
For text you do not write yourself, the instruction given to the model is part of the interface: ask for the sentence to open on an Arabic word. It is a writing constraint, it is checked at a glance, and it costs less than marking up every string produced.
Neutral tokens turn around
Some strings contain no letter at all: a technical identifier, an order reference made of digits and hyphens, a cookie name, a postcode. They are neutral, so they adopt the sentence’s direction, and in an Arabic paragraph they read backwards.
The case we measured is a tracker name beginning with an underscore. In an Arabic paragraph it renders with its underscore moved to the end — the reader sees a string that does not exist, and if they copy it into a search they find nothing. It was in our own cookie policy, in Arabic, on a page whose whole purpose is to name things exactly.
The fix is a left-to-right mark inserted before the token. It is invisible in the file, which makes it the most fragile correction on this list: the next line somebody writes will not carry it, and nothing will say so. That is why the comment belongs beside it, in the translation file, not in a document.
The general rule: any reference a reader might copy — order, invoice, identifier, code — is isolated in its own element, in Arabic as anywhere else. A reference is a value, not a piece of a sentence.
Adding an Arabic font is not enough: it has to replace
The usual way to handle two scripts is to stack the fonts: the Latin font first, an Arabic font behind it, and the browser walks down the stack character by character until it finds a face that can draw the glyph. That is what we did, and it is wrong.
The reason is that a modern webfont often ships with a local fallback face, adjusted to occupy the same space. That fallback sometimes has enough Arabic coverage to intercept the character before the Arabic font is reached. The browser finds a face that accepts the glyph, it stops there, and the bold is then manufactured by geometric distortion rather than drawn.
To the eye this gives slightly thickened Arabic with clogged joins, which nobody describes as a bug. It is nevertheless the difference between a page that looks finished and one that looks approximate, and on a phone screen it shows on every heading. We measured the case, tried the stack, and replaced the whole stack under Arabic direction.
Two practical consequences. A professional Arabic font often stops at a normal bold: asking for a weight heavier than it contains restarts the geometric manufacture. And an Arabic sentence inserted into a French page does not inherit the right stack, because the stack is chosen on the document’s direction: it is the element itself that has to carry its language.
Letter-spacing breaks the joins
A Latin design system almost always sets letter-spacing: slightly tightened on large headings, widened on small caps, adjusted on labels. Those settings are invisible one by one and they make half of a brand’s visual identity.
Arabic is a joined script. Letters attach to one another inside a word, and letter-spacing pulls apart what was meant to touch. The result is not airier typography: it is a word whose joins have been broken, which the eye has to reassemble, and which slows reading without the reader knowing why.
The correction is blunt and has to be: under Arabic direction every letter-spacing goes to zero, at every heading level and on every label, with no exception to negotiate. We raised the line height at the same time, because Arabic carries marks above and below the baseline and a leading set on Latin makes them touch.
This is the part of the work that is lost fastest. A new component arrives with its own letter-spacing, it looks right in French, and nobody opens the Arabic version. The only defence that holds is for the typography values to be named once and redefined once for Arabic, rather than set component by component.
Line width: a unit that is not a character
Stylesheets offer a convenient width unit, often used to cap the length of text lines. It is the width of the zero digit in the current font. It gets used as though it were an average character, and it is not.
Measured on our own corpus in August 2026, the average character of the French text occupies 0.451 of the font size, the Arabic 0.388, and the zero 0.6. A cap written at 70 of those units was therefore delivering 93 French characters a line and 109 in Arabic, against an accepted comfort band of 45 to 75 and a target around 66.
In other words the cap meant to protect reading comfort was protecting nothing, and it was more wrong in Arabic than in French. Twenty different width values had been written into the site, each by somebody thinking of the number of characters they were typing.
Two transferable lessons. One: measure a line width by measuring real text with the browser’s own tools, never by counting the lines on screen — a partial last line biases the count, and the bias grows as the paragraph gets shorter. Two: one value per role, not one per direction. Ours puts French and English between 42 and 67 characters and Arabic between 74 and 78, which sits inside the band with no exception to maintain.
Truncation cuts a letter in the middle of a word
Card titles, table columns and breadcrumbs truncate. In Latin, a cut inside a word leaves a readable fragment followed by an ellipsis. In Arabic the cut falls between two joined letters and breaks the join: the letter left on screen changes shape, because its shape depended on the letter after it.
The fragment produced is not an abbreviated Arabic word, it is a run of glyphs that reads badly, and a reader does not reconstruct the original as easily as in Latin. The ellipsis itself is neutral: it lands on whichever side the sentence’s direction gives it, and if that direction was resolved wrongly further up, it appears at the beginning.
What to take from this is not to ban truncation, but to make it visible to the people who sign off the page. A product card whose title comes from a model will receive longer titles than a copywriter used to write, because a model has no screen constraint in mind.
The useful constraint is given at writing time: a maximum length asked of the model, checked in characters rather than in words — Arabic writes the same content 25 to 30 % shorter, so a word count says nothing about the space taken.
What the model does not write, and you have to
Three things are missing from the produced text almost systematically, and none of them is a translation matter. The direction marks first, discussed above. Then Arabic punctuation: the comma and the question mark have their own glyphs, and a model often returns the Latin ones, which shows on screen immediately and is corrected by a filter.
Spaces before punctuation, last. French puts one in front of certain marks, Arabic does not, and a model that has seen a lot of French slips them in. It is the detail that makes an Arabic reader say the text was translated, before they judge its content at all.
There is also what the model adds and your processing does not know about: the vocalisation marks. They are combining marks, they attach to a letter without occupying space of their own, and a naive split cuts a word in half inside a vocalised letter. We met exactly that case in our own internal search engine and in our assistant’s indexing: the word was there, and it could not be found.
The consequence goes beyond display. If the same text feeds a search, a duplicate filter or an index, the normalisation has to strip those marks rather than replace them with a space, or the word becomes two fragments matching nothing.
The one-hour check, on your own screen
Take your phone, open the Arabic version of your site, and do six things in this order. One: read a price line and a date line on a product card, and check that the day, the month and the year are where they belong. Two: find a negative value or a percentage and look at which side the sign landed on.
Three: find a title that opens on a Latin brand name and see whether the whole line flipped. Four: pick out an order reference or an identifier inside an Arabic paragraph, copy it by hand into your own site’s search field, and see whether it finds anything.
Five: compare an Arabic heading and the same heading in French on screen; if the Arabic looks heavier and its joins are clogged, the weight is manufactured, not drawn. Six: count the words in a full line of a paragraph — if you read noticeably more than in the French version, your line width is set on a unit that does not measure what you think.
The check needs no tooling and takes an hour, including on a site you did not build. Its result, most of the time, is that there is nothing to buy: the six points are corrected in the stylesheet and in the instruction given to the model, and none of them justifies a rebuild. It is also the only list you can hand to a supplier as it stands, before signing.
What we do, and what we refuse
We do three things on this subject. We run the check above on your screen, with you there, and we leave you the list. We correct what belongs to the stylesheet and the template — direction, isolation of values, fonts, letter-spacing, line width — and we write the drafting instruction the model will receive. We then wire in a control that refuses text carrying a Latin punctuation mark in an Arabic field.
We refuse to have the Arabic corrected by the model that produced it. It is the proposal that comes up most often and it does not hold: the system has no representation of your screen, it does not know that a line flipped, and it will produce a different variant with nobody knowing which of the two went live.
We do not take on editorial proofreading of the produced Arabic either. Style, register and accuracy are a trade of their own, they are handled with texts reread by somebody who genuinely writes in that language, and a technical supplier claiming to judge both will cost you the quality of one of them.
What you can do without us is most of the work: the six points show to the naked eye, and the fourth — copying a reference and searching for it — needs nothing but your own search field. If they all pass, your problem is elsewhere, and the next question is rather the one the vocabulary these systems do not know raises.
Frequently asked questions
Do we have to rebuild the site to fix these defects?
Almost never. Seven of the eight points are settled in the stylesheet and the template, without touching the content or the structure of the pages. The eighth, the length of produced text, is settled in the instruction given to the model, which requires no intervention on the site at all.
Would a human translation avoid the problem?
It would avoid part of it, not all. Somebody writing in Arabic places the direction marks without thinking and uses Arabic punctuation, so sections 2, 5 and 10 get lighter. Fonts, letter-spacing, line width and truncation are template defects: they are there whoever wrote the text.
How do we know our Arabic font is really loading?
Compare an Arabic heading and a French one on screen, then, if you have developer tools, read the font actually applied to the Arabic element. A weight manufactured by the browser shows in thickened joins and in outlines that get dirty when you enlarge them.
Do these defects also hit automatic messages and invoices?
Yes, and often harder, because nobody rereads them after go-live. A confirmation message contains by construction a date, an amount and a reference, which are the three cases on this list that break most. It is the first place to check after the public pages.
Is the problem the same in written darija?
It moves. Darija written in Arabic script raises the same display questions; written in Latin characters with digits it raises different ones, particularly for search, since the same word then exists in several spellings. The display-language decision is taken before the tooling one.
Who should own this check internally?
Whoever signs off the pages, not the developer. The six points are observed by eye and passed on as they are; that is exactly their value. The developer comes in afterwards, on a precise list, which shortens the exchange and makes the result verifiable by the person who asked for it.
Where we come in
If your six points pass, the fault is not in the display, and that is an answer in itself: nothing to order on this side.
- We open your Arabic version on your phone and leave the session with a written list of the screens concerned.
- Direction, font and line-width settings are placed once in the template, not repeated component by component.
- The writing instruction handed to the model fixes length in characters and the punctuation expected, and it belongs to you.
We do not judge the editorial quality of your Arabic: that trade belongs to somebody who writes in the language, and claiming it on top of this would mean doing both badly.
Read next
UI/UX: an interface is judged on a task completed
Not on how it looks. Name the five things people come to do, watch five people do them, and fix what blocks them.Repairing an interface without rebuilding it: where to start
A redesign is the most expensive answer and rarely the right one. How to find the layer the fault is actually in, and fix it there.A small business’s visual identity: what works and what decorates
A logo is not an identity. What is almost always missing is what happens the day after it is delivered.
Let us talk about your project
A free audit, no commitment: we look at your online presence and tell you what is holding it back.