Faith Forge LabsDigital work / Lebanon

Keep a product reference intact inside Arabic text

A Latin product reference can be correct in the database and still be difficult to interpret inside an Arabic sentence. Changing the stored reference to make one screen look better would damage the record that the catalogue and receiving team rely on. The investigation needs to separate logical text, visual presentation and the value actually copied or submitted.

This guide uses a fictional catalogue review. Its narrow task is to show reference AB-12/34 beside a quantity in an Arabic summary, while preserving the exact reference throughout the enquiry. It does not assume that every mixed-direction sentence fails or that a particular rendering is identical across all browsers.

Fix the source and intended meaning

The approved item record contains the eight ASCII characters AB-12/34. A contrasting item has reference AB-34/12. The customer has requested two pieces of the first item. These are distinct product identities; their slash-separated numbers must not be reversed, normalised into another code or translated.

The Arabic reviewer approves the summary's logical content: المرجع AB-12/34 - 2 قطع. The phrase identifies the reference followed by the requested quantity. The page's paragraph direction is right to left. Initially, the reference, separator and quantity are inserted into the same unisolated text run.

The database, enquiry value and approved product association are all correct. The defect under investigation is how the neighbouring reference and quantity group visually, not a missing product or a mistranslated description.

Inspect the direction boundary

In the worked display, the Latin reference and following number are treated as part of a left-to-right sequence within the Arabic paragraph. The quantity appears to the right of the reference rather than following it in the surrounding right-to-left reading sequence. The content is present, but the boundary between the item identifier and the separate quantity is unclear to the reviewer.

A local Unicode bidirectional model reproduces that distinction for this exact string. Without isolation, its left-to-right visual order places the reference before the separate quantity. With the reference isolated as a left-to-right phrase, the quantity moves to the other side of that bounded phrase, consistent with the surrounding Arabic sequence. That model is evidence about character ordering; it is not a browser, screen-reader or Arabic usability test.

The W3C guidance on inline bidirectional markup explains why opposite-direction phrases, surrounding punctuation and following numbers need attention. For a phrase whose direction is known, it recommends tightly wrapping the phrase and setting its direction. Markup can isolate that phrase from the surrounding text.

Correct the presentation without editing identity

The selected HTML treatment keeps the Arabic paragraph and wraps only the reference:

<p lang="ar" dir="rtl">المرجع <span dir="ltr">AB-12/34</span> - 2 قطع</p>

The reference element contains exactly the reference. It does not include the quantity or the following Arabic word. Its text direction is left to right, while the paragraph remains right to left.

The implementation does not reverse the string, replace the slash or insert invisible directional controls into the product identifier. The model used isolate characters to examine ordering, but those are modelling boundaries around the phrase, not characters added to the business record. In the HTML implementation, that responsibility belongs to the markup.

A separate, clearly labelled quantity field may improve the design further. If the page uses a compact inline summary, however, it still needs the correct direction boundary. Moving the same unisolated sentence into a different visual box would not address that boundary by itself.

Check identity and presentation independently

The fictional review records these accepted outcomes for the bounded component:

Check Required and accepted result
Arabic summary for AB-12/34, quantity 2 Reference is one left-to-right phrase within the Arabic reading sequence; quantity is distinct
Copy the reference element Exactly AB-12/34, without added direction-control characters
Enquiry received for that selection Reference remains AB-12/34; quantity remains the separate value 2
Contrasting item AB-34/12 Its own reference is displayed and received; the first item is not substituted
French and English summaries Reference and quantity remain distinguishable within their left-to-right context
Arabic surrounding text Paragraph direction and wording remain Arabic; the entire page is not forced left to right

The values can be checked mechanically. The intended reading order and clarity also need suitable Arabic review on the supported browsers and layouts. A correct screenshot at one width does not establish keyboard, copying, zoom or assistive-technology behaviour across the agreed environment.

Do not let the fix spread into unrelated assumptions

The item is now easier to identify in the summary. That does not establish whether it fits an installation, whether stock is available or whether the requested quantity is commercially accepted. Those decisions remain with the product and sales owners.

Nor does this one component establish complete Arabic support. Names, addresses, unknown user-entered phrases and other mixed-direction content may need different treatment. The direction of a known catalogue code is a narrower fact than the direction of arbitrary text supplied by a visitor.

Keep the component rule and the exact reference controls in the implementation notes. A future editor should be able to change the surrounding explanation without accidentally extending the isolated phrase to include unrelated content. A future developer should know why the identifier remains untouched in storage.

For a catalogue project, bring the actual approved reference, its sentence context and the receiving record. Review all three together. That makes the decision more useful than asking whether the site “supports Arabic” in the abstract.