DEV Community

How to Handle Arabic Unicode Text in HTML and CSS

Introduction Arabic text can be challenging to display correctly on websites, especially when it contains decorative symbols, diacritics, or a mixture of Arabic and English characters. Fortunately, HTML, CSS, and Unicode provide the tools developers need to handle Arabic typography properly. In this tutorial, we'll explore practical examples of displaying Arabic text, managing right-to-left layouts, and avoiding common Unicode mistakes. 1. Understanding Arabic Unicode Unicode assigns code points to characters from writing systems around the world. Some Arabic examples include: ا — U+0627 (Arabic Letter Alef) ب — U+0628 (Arabic Letter Beh) م — U+0645 (Arabic Letter Meem) َ — U+064E (Arabic Fatha) Unicode characters are not images. They are text that browsers render using available fonts. 2. Setting Up HTML for Arabic Start with a basic HTML document: <!DOCTYPE html>

Arabic Text Example

مرحبا بالعالم

هذا مثال على نص عربي.

Three important settings are used here: charset="UTF-8" enables proper interpretation of Unicode text. lang="ar" identifies the document language. dir="rtl" specifies right-to-left text direction. Without correct direction settings, mixed-language content may appear confusing. 3. Styling Arabic Text With CSS Arabic typography benefits from readable fonts and comfortable line spacing. .arabic-content {
font-family: "Noto Naskh Arabic", Tahoma, sans-serif;
font-size: 20px;
line-height: 1.9;
direction: rtl;
text-align: start;
}
This example provides a font fallback and allows the text to follow its natural reading direction. Remember that a font must actually be available or loaded for the browser to use it. 4. Mixing Arabic and English Text Mixing left-to-right and right-to-left languages can cause punctuation and numbers to appear in unexpected positions. HTML provides the element to isolate text whose direction may differ from surrounding content.

Username: محمد ★

The element is particularly useful when displaying user-generated names. Developers can also use dir="auto" when the direction of text is unknown. 5. Working With Decorative Arabic Symbols Arabic names can be decorated using Unicode characters. Examples: Normal text: محمد Decorated text: ★ محمد ★ 『محمد』 مُحَمَّد These examples combine ordinary Arabic letters with symbols or diacritics. Developers should remember that visual appearance depends on font support and platform compatibility. If you want to experiment with copy-ready examples, the ZakhrafAsmaHub Arabic Decoration Tool provides Arabic text decoration options that can be tested in different applications. 6. Handling Invisible Unicode Characters Some Unicode characters are not visibly rendered. Examples include: U+200B — Zero Width Space U+200C — Zero Width Non-Joiner U+200D — Zero Width Joiner These characters serve different text-processing purposes. For example, the Zero Width Non-Joiner can prevent joining between characters in certain writing systems. However, inserting invisible characters unnecessarily may create accessibility and debugging 7. JavaScript Unicode Example JavaScript supports Unicode strings directly. const arabicName = "محمد";

console.log(arabicName);
console.log([...arabicName].length);
The spread operator counts Unicode code points, but not necessarily user-perceived characters. For more accurate character segmentation, developers can use Intl.Segmenter. 8. Common Mistakes to Avoid Incorrect encoding: Always use UTF-8. Missing RTL direction: Use dir="rtl" for Arabic content. Unsupported symbols: Test decorative text across platforms. Excessive invisible characters: Avoid unnecessary characters that may cause display issues. Poor accessibility: Keep Arabic text readable. Conclusion Unicode plays an important role in modern Ar...

Powered by Readybot.io