Developer Guide

Building Arabic RTL Sports Forums with APG vNext

 ·  by ASP Playground Dev Team  ·  8 min read

📄 Download this guide as PDF Offline reference — Building Arabic RTL Sports Forums with APG vNext
View PDF

Why Arabic RTL Matters for Sports Sites

Arabic is the 5th most-spoken language online and the dominant language for sports content consumption across MENA — Egypt, Saudi Arabia, Morocco, Algeria, UAE, and more. During the World Cup 2026, Arabic-language sports queries significantly outpace English equivalents in the region. Building a proper RTL experience is not just UX — it directly impacts bounce rate, session time, and ultimately SEO ranking for Arabic keywords.

APG vNext RTL Configuration

APG vNext does not include a built-in RTL language pack, but it's straightforward to add one. The key changes are in the language strings file and a custom CSS override.

Step 1 — Set HTML Direction

In APG vNext's Master Page, add dir="rtl" conditionally based on the active language:

<html lang="ar" dir="rtl">

Or dynamically in code-behind:

if (Thread.CurrentThread.CurrentUICulture.TwoLetterISOLanguageName == "ar") {
    Page.UICulture = "ar";
    htmlTag.Attributes["dir"] = "rtl";
    htmlTag.Attributes["lang"] = "ar";
}

Step 2 — RTL CSS Overrides

Create rtl-override.css and load it only for Arabic pages:

/* Flip all margins and paddings */
[dir="rtl"] .forum-list { text-align: right; }
[dir="rtl"] .post-content { direction: rtl; text-align: right; }
[dir="rtl"] .breadcrumb { flex-direction: row-reverse; }
[dir="rtl"] .sidebar { float: left; margin-left: 0; margin-right: 1.5rem; }
/* Navigation */
[dir="rtl"] .nav-menu { flex-direction: row-reverse; }
[dir="rtl"] .nav-menu li { border-right: none; border-left: 1px solid #eee; }

Step 3 — Arabic Font

System Arabic fonts (Tahoma, Arial) render acceptably, but a web font improves readability significantly. Cairo and Tajawal from Google Fonts are popular choices for sports sites — both are clean, modern, and render well at small sizes on mobile.

<link href="https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700&display=swap" rel="stylesheet">
[dir="rtl"] body { font-family: 'Cairo', Tahoma, Arial, sans-serif; }

Bidirectional Content

Sports forums mix Arabic and Latin text — player names, club names, scores. Use the Unicode bdi element to isolate Latin strings within RTL content:

<p>سجل <bdi>Kylian Mbappé</bdi> في الدقيقة 67</p>

Arabic SEO Basics

  • Use Arabic keywords in <title>, meta description, H1, and first paragraph
  • Add hreflang="ar" pointing to the Arabic URL variant
  • Arabic search queries for sports often include diacritics — test both with and without tashkeel
  • "يلا شوت" (Yalla Shoot) is one of the highest-volume Arabic sports search terms — see the Yalla Shoot technical guide for how this is handled on ASP.NET

Related Guides

See it in practice

We applied these techniques to build the Yalla Shoot streaming app guide — a real-world ASP.NET web application serving live sports content.

View Yalla Shoot Technical Guide →