Chapterبەش 4 · Lectureوانە 4.5
Kurdish and Bilingual Websites: Right to Leftتۆڕگەکانی کوردی و دووزمانە: ڕاست بۆ چەپ
How to build Kurdish (Sorani) pages that read right to left, and sites in Kurdish and English: lang and dir in the HTML, the right language code (ckb), layouts that flip by themselves with flexbox, grid and logical properties, mixed Kurdish–English text and numbers with <bdi>, dir="auto" and Unicode isolates, the Kurdish letters that must not be replaced by Arabic look-alikes, which icons to mirror and which not, digits and dates, bilingual sites with hreflang and a language switch, and how to test a right-to-left page.
چۆن لاپەڕەی کوردیی (سۆرانی) و بە کوردی و ئینگلیزی دروست بکەیت: lang و dir لە ، دروست (ckb)، کە بە ، grid و خۆی پێچەوانە دەبێتەوە، دەق و ژمارەی تێکەڵی کوردی و ئینگلیزی بە <bdi>، dir="auto" و جیاکەرەوەکانی ، ئەو پیتە کوردییانەی نابێت پیتی عەرەبیی هاوشێوە جێیان بگرێتەوە، کام ئاوێنە دەکرێن و کامیان نا، ژمارە و ڕێکەوت، دووزمانە بە hreflang و گۆڕەری زمان و تاقیکردنەوەی لاپەڕەیەکی .
What you will learnچی فێر دەبیت
- Mark a Kurdish page and its English parts with
langanddirin the HTML, and chooseckb— notar-IQorku— as its language code. - Build layouts that flip by themselves with flexbox, grid and logical properties instead of left and right.
- Keep mixed Kurdish–English text, numbers and visitors' names in order with
<bdi>,dir="auto"and<span dir="ltr">. - Use the Kurdish letters ک ی ە instead of Arabic look-alikes, and decide which icons to mirror.
- Plan a bilingual Kurdish–English site with hreflang links and a language switch, and test a right-to-left page.
- لاپەڕەیەکی کوردی و بەشە ئینگلیزییەکانی بە
langوdirلە نیشانە بکەیت وckb— نەکar-IQیانku— وەک هەڵبژێریت. - دروست بکەیت کە بە ، grid و لەبری چەپ و ڕاست خۆی پێچەوانە دەبێتەوە.
- دەقی تێکەڵی کوردی–ئینگلیزی، ژمارە و ناوی سەردانکەران بە
<bdi>،dir="auto"و<span dir="ltr">بە ڕیزبەندیی دروست بهێڵیتەوە. - پیتە کوردییەکانی ک ی ە لەبری هاوشێوە عەرەبییەکان بەکاربهێنیت و بڕیار بدەیت کام ئاوێنە بکرێن.
- دووزمانەی کوردی–ئینگلیزی بە hreflang و گۆڕەری زمان پلان بکەیت و لاپەڕەیەکی تاقی بکەیتەوە.
Right to left: the whole page turns roundڕاست بۆ چەپ: هەموو لاپەڕەکە هەڵدەگەڕێتەوە
Central Kurdish (Sorani) is written in the Arabic script, from right to left; Kurmanji in Latin letters is written left to right, like English. On a right-to-left page more than the text changes. The reader starts at the top right, so the logo, the menu, the first column and the 'back' arrow move there too: the page turns round as in a mirror. Numbers, English words and code still read left to right inside it.
کوردیی ناوەندی (سۆرانی) بە پیتی عەرەبی و لە ڕاستەوە بۆ چەپ دەنووسرێت؛ کرمانجی بە پیتی لاتینی و وەک ئینگلیزی لە چەپەوە بۆ ڕاست دەنووسرێت. لە لاپەڕەیەکی تەنیا دەقەکە ناگۆڕێت. خوێنەر لە سەرەوەی لای ڕاستەوە دەست پێدەکات، بۆیە لۆگۆ، ، یەکەم ستوون و تیری «گەڕانەوە»ش دەچنە ئەوێ: لاپەڕەکە وەک ئاوێنە هەڵدەگەڕێتەوە. ژمارە، وشەی ئینگلیزی و کۆد لەناویدا هەر لە چەپەوە بۆ ڕاست دەخوێنرێنەوە.
You can watch this on CêIT itself: open any lesson and press کوردی at the top — the menu jumps to the right, the arrows turn round and the code boxes stay left to right (A language switch that keeps the page shows both).
دەتوانیت ئەمە لە خودی CêITـدا ببینیت: هەر وانەیەک بکەرەوە و لە سەرەوە EN دابگرە — باز دەداتە لای چەپ، تیرەکان هەڵدەگەڕێنەوە و سندووقەکانی کۆد هەر دەمێننەوە (گۆڕینی زمان بێ ونکردنی لاپەڕەکە هەردووکیان پیشان دەدات).


<html>؛ ، grid و ئەوەی تر دەکەن.CêITlang and dir: what the page is and which way it runslang و dir: لاپەڕەکە بە چ زمانێکە و بە کام ئاڕاستەدا دەڕوات
Two attributes on the root element tell the browser what it is reading (A page in Kurdish, The same page in Kurdish):
دوو لەسەر ڕەگ بە دەڵێن چی دەخوێنێتەوە (لاپەڕەتۆڕێکی کوردی، هەمان لاپەڕە بە کوردی):
<html lang="ckb" dir="rtl">lang="ckb"— the language. Screen readers choose a Kurdish voice; browsers choose fonts, spell-checking and line breaking for Kurdish; search engines and translation tools know the language ( 3.1.1). Mark English parts inside a Kurdish page too, for example<span lang="en">(3.1.2).dir="rtl"— the base direction: lines start at the right and the layout follows.langnever sets the direction, so you always need both.
lang="ckb"— زمانەکە. دەنگێکی کوردی هەڵدەبژێرن؛ ، پشکنینی ڕێنووس و شکاندنی دێڕ بۆ کوردی هەڵدەبژێرن؛ و ئامرازەکانی وەرگێڕان زمانەکە دەناسن ( 3.1.1). بەشە ئینگلیزییەکانی ناو لاپەڕەیەکی کوردیش نیشانە بکە، بۆ نموونە<span lang="en">(3.1.2).dir="rtl"— ئاڕاستەی بنەڕەت: دێڕەکان لە ڕاستەوە دەست پێدەکەن و شوێنیان دەکەوێت.langهەرگیز ئاڕاستە دیاری ناکات، بۆیە هەمیشە هەردووکیانت پێویستە.
Why in the HTML and not with the CSS direction: rtl? The direction belongs to the content, like the words: it must still be right when the CSS does not load, or when the text is copied, translated or shown in a reader app (W3C). Put dir on <html> once, and on another element only where the direction changes: <blockquote lang="en" dir="ltr">.
بۆچی لە و نەک بە direction: rtlـی ؟ ئاڕاستە بەشێکە لە ناوەڕۆک، وەک وشەکان: دەبێت هەر دروست بێت کاتێک بار نابێت، یان کاتێک دەقەکە کۆپی دەکرێت، وەردەگێڕدرێت یان لە ئەپێکی خوێندنەوەدا پیشان دەدرێت (W3C). dir یەک جار لەسەر <html> دابنێ و لەسەر تر تەنیا لەو شوێنەی ئاڕاستە دەگۆڕێت: <blockquote lang="en" dir="ltr">.
lang and dir: what the page is and which way it runslang و dir: لاپەڕەکە بە چ زمانێکە و بە کام ئاڕاستەدا دەڕوات
ckb, not ar-IQ: choosing the language codeckb، نەک ar-IQ: هەڵبژاردنی کۆدی زمان
follow the standard BCP 47 and are listed in the IANA registry. Kurdish has several:
شوێن ستانداردی BCP 47 دەکەون و لە تۆماری IANAـدا ڕیز کراون. کوردی چەند کۆدێکی هەیە:
| Codeکۆد | Languageزمان | Script and directionپیت و ئاڕاستە |
|---|---|---|
ckb | Central Kurdish (Sorani)کوردیی ناوەندی (سۆرانی) | Arabic script, right to leftپیتی عەرەبی، |
ku (ku-Latn) | Kurdish; most systems use it for Northern Kurdish (Kurmanji)کوردی؛ زۆربەی سیستەمەکان بۆ کوردیی باکووری (کرمانجی) بەکاری دەهێنن | Latin script, left to rightپیتی لاتینی، |
sdh | Southern Kurdishکوردیی باشووری | Arabic script, right to leftپیتی عەرەبی، |
ar-IQ | Arabic as used in Iraq — not Kurdishعەرەبیی عێراق — کوردی نییە | Arabic script, right to leftپیتی عەرەبی، |
Use ckb for Sorani, as Kurdish Wikipedia (ckb.wikipedia.org) does. ar-IQ would make a screen reader read your Kurdish with an Arabic voice and a browser write dates in Arabic. ku alone is too vague: the shared language data of browsers and phones (Unicode CLDR) treats it as Kurmanji, which is why W3C advises ku-Latn for Kurmanji. Add a region only when it matters, and keep the code as short as possible.
بۆ سۆرانی ckb بەکاربهێنە، وەک ویکیپیدیای کوردی (ckb.wikipedia.org). ar-IQ وا دەکات کوردییەکەت بە دەنگی عەرەبی بخوێنێتەوە و ڕێکەوت بە عەرەبی بنووسێت. ku بە تەنیا زۆر گشتییە: داتای زمانی هاوبەشی و مۆبایلەکان (CLDRـی ) ئەم کۆدە بە کرمانجی دادەنێت، بۆیە W3C بۆ کرمانجی ku-Latn پێشنیار دەکات. ناوچە (بۆ نموونە IQ) تەنیا کاتێک زیاد بکە کە گرنگ بێت و کۆدەکە هێندەی دەکرێت کورت بهێڵەوە.
Layouts in Kurdish: what flips by itselfڕێکخستنی لاپەڕە بە کوردی: چی خۆی پێچەوانە دەبێتەوە
In a page with <html lang="ckb" dir="rtl"> flexbox and grid flip by themselves: the first flex item and the first grid column are on the right, because they follow the text direction ("start" is on the right) — see Main axis and cross axis and Lines in a Kurdish page. Floats, left/right offsets and margin-left do not flip. So for Kurdish sites prefer flexbox, grid and the logical properties: margin-inline-start, padding-inline-end, text-align: start, float: inline-start.
لە لاپەڕەیەکدا بە <html lang="ckb" dir="rtl"> و grid خۆیان پێچەوانە دەبنەوە: یەکەم و یەکەم ستوونی grid لە لای ڕاستن، چونکە شوێن ئاڕاستەی دەق دەکەون («سەرەتا» لە لای ڕاستە) — بڕوانە تەوەرەی سەرەکی و تەوەرەی ئاوەڵ و هێڵەکانی grid لە لاپەڕەیەکی کوردیدا. float، شوێندانان بە left/right و margin-left پێچەوانە نابنەوە. بۆیە بۆ کوردی ، grid و باشترن: margin-inline-start، padding-inline-end، text-align: start، float: inline-start.
Layouts in Kurdish: what flips by itselfڕێکخستنی لاپەڕە بە کوردی: چی خۆی پێچەوانە دەبێتەوە
Worked example: a Kurdish page with flex and gridنموونەی کارپێکراو: لاپەڕەیەکی کوردی بە flex و grid
<!DOCTYPE html>
<html lang="ckb" dir="rtl">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>پەڕەی بەش</title>
<style>
* { box-sizing: border-box; }
body { font-family: "Noto Naskh Arabic", "Noto Sans Arabic", Vazirmatn, sans-serif; margin: 8px; }
h1, h2 { margin: 0; }
h2 { font-size: 1rem; }
.menu { display: flex; gap: 6px; margin-bottom: 8px; }
.menu a { padding: 6px 12px; background-color: #1f4e79; color: white; text-decoration: none; }
.page {
display: grid;
grid-template-columns: 160px 1fr;
grid-template-areas:
"header header"
"side main"
"footer footer";
gap: 8px;
}
header { grid-area: header; background-color: #b5dcb3; padding: 8px; }
.side { grid-area: side; background-color: #aaaaaa; padding: 8px; }
main { grid-area: main; background-color: #eeeeee; padding: 8px; min-height: 120px; }
footer { grid-area: footer; background-color: #b5dcb3; text-align: center; }
</style>
</head>
<body>
<nav class="menu">
<a href="index.html">سەرەکی</a>
<a href="courses.html">وانەکان</a>
<a href="contact.html">پەیوەندی</a>
</nav>
<div class="page">
<header><h1>بەشی تەکنەلۆجیای زانیاری</h1></header>
<nav class="side">
<h2>لیستی سەرەکی</h2>
<ul><li>HTML</li><li>CSS</li><li>JavaScript</li></ul>
</nav>
<main><p>بەخێربێن بۆ لاپەڕەی بەشەکەمان.</p></main>
<footer><p>هەموو مافەکان پارێزراون</p></footer>
</div>
</body>
</html>HTML sent to the browserئەو HTMLـەی دەنێردرێت بۆ تۆڕگەڕ
<!DOCTYPE html>
<html lang="ckb" dir="rtl">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>پەڕەی بەش</title>
<style>
* { box-sizing: border-box; }
body { font-family: "Noto Naskh Arabic", "Noto Sans Arabic", Vazirmatn, sans-serif; margin: 8px; }
h1, h2 { margin: 0; }
h2 { font-size: 1rem; }
.menu { display: flex; gap: 6px; margin-bottom: 8px; }
.menu a { padding: 6px 12px; background-color: #1f4e79; color: white; text-decoration: none; }
.page {
display: grid;
grid-template-columns: 160px 1fr;
grid-template-areas:
"header header"
"side main"
"footer footer";
gap: 8px;
}
header { grid-area: header; background-color: #b5dcb3; padding: 8px; }
.side { grid-area: side; background-color: #aaaaaa; padding: 8px; }
main { grid-area: main; background-color: #eeeeee; padding: 8px; min-height: 120px; }
footer { grid-area: footer; background-color: #b5dcb3; text-align: center; }
</style>
</head>
<body>
<nav class="menu">
<a href="index.html">سەرەکی</a>
<a href="courses.html">وانەکان</a>
<a href="contact.html">پەیوەندی</a>
</nav>
<div class="page">
<header><h1>بەشی تەکنەلۆجیای زانیاری</h1></header>
<nav class="side">
<h2>لیستی سەرەکی</h2>
<ul><li>HTML</li><li>CSS</li><li>JavaScript</li></ul>
</nav>
<main><p>بەخێربێن بۆ لاپەڕەی بەشەکەمان.</p></main>
<footer><p>هەموو مافەکان پارێزراون</p></footer>
</div>
</body>
</html>Look at the preview: the menu starts on the right, and the 160 px side column is on the right — the CSS says nothing about right or left.
سەیری پێشبینینەکە بکە: لە ڕاستەوە دەست پێدەکات و ستوونە لاتەنیشتە ١٦٠ لە ڕاستە — CSSـەکە هیچ باسی ڕاست یان چەپ ناکات.
Logical properties: start and end instead of left and rightتایبەتمەندییە لۆجیکییەکان: سەرەتا و کۆتایی لەبری چەپ و ڕاست
A names a side by the direction of the text, not by the compass. margin-inline-start is the margin where a line starts: on the left in English, on the right in Kurdish. Write your CSS once with logical properties and the same file works in both directions.
لایەک بەپێی ئاڕاستەی دەق ناو دەبات، نەک بەپێی قیبلەنما. margin-inline-start ئەو کە دێڕ لێیەوە دەست پێدەکات: لە ئینگلیزیدا لای چەپ، لە کوردیدا لای ڕاست. یەک جار بە بنووسە و هەمان بۆ هەردوو ئاڕاستە کار دەکات.
The runs along a line of text — left to right in English, right to left in Kurdish. The runs the way paragraphs stack — top to bottom in both. inline-start, inline-end, block-start and block-end are the four logical sides.
بە درێژایی دێڕێکی دەق دەڕوات — لە ئینگلیزیدا لە چەپەوە بۆ ڕاست، لە کوردیدا لە ڕاستەوە بۆ چەپ. بەو ئاڕاستەیەدا دەڕوات کە بڕگەکان لەسەر یەک کەڵەکە دەبن — لە هەردووکیاندا لە سەرەوە بۆ خوارەوە. inline-start، inline-end، block-start و block-end چوار لا لۆجیکییەکەن.
Logical properties: start and end instead of left and rightتایبەتمەندییە لۆجیکییەکان: سەرەتا و کۆتایی لەبری چەپ و ڕاست
From left and right to start and endلە چەپ و ڕاستەوە بۆ سەرەتا و کۆتایی
Every physical property has a logical twin. They are all widely available — float: inline-start, the last of them, since April 2026 — so use them in every new style sheet:
هەموو فیزیکی جووتێکی لۆجیکی هەیە. هەموویان بە فراوانی بەردەستن — float: inline-start، دوایینیان، لە نیسانی ٢٠٢٦ەوە — بۆیە لە هەموو نوێدا بەکاریان بهێنە:
| Physicalفیزیکی | Logicalلۆجیکی |
|---|---|
margin-left / margin-right | margin-inline-start / margin-inline-end |
margin-left + margin-right | margin-inline (margin-inline: auto centres a box)margin-inline (margin-inline: auto سندووقێک دەخاتە ناوەڕاست) |
padding-left / padding-right | padding-inline-start / padding-inline-end |
border-left | border-inline-start |
left: 0 / right: 0 | inset-inline-start: 0 / inset-inline-end: 0 |
top: 0 | inset-block-start: 0 |
text-align: left / right | text-align: start / end |
float: left / right | float: inline-start / inline-end |
width / height | inline-size / block-size |
/* one style sheet for English and Kurdish pages */
.note {
border-inline-start: 4px solid #0d6b62;
padding-inline-start: 1rem;
text-align: start;
}Mixed text: English words and numbers in Kurdishدەقی تێکەڵ: وشەی ئینگلیزی و ژمارە لە کوردیدا
Kurdish sentences are often : they hold English words, code, web addresses and numbers. The browser puts them in order with the Unicode Bidirectional Algorithm, which works roughly like this:
ڕستە کوردییەکان زۆرجار : وشەی ئینگلیزی، کۆد، ناونیشانی وێب و ژمارەیان تێدایە. بە دووئاڕاستەی ڕیزیان دەکات، کە نزیکەی بەم شێوەیە کار دەکات:
- Letters have a strong direction: Kurdish letters run right to left, Latin letters left to right.
- A number is always written left to right — the biggest place first, as in 2026 — but as a whole it takes its place in the sentence.
- Spaces and punctuation such as
+ - . , : ( )have no direction of their own: they take the direction of their neighbours. That is where things go wrong.
- پیتەکان ئاڕاستەیەکی بەهێزیان هەیە: پیتی کوردی دەڕوات، پیتی لاتینی .
- ژمارە هەمیشە دەنووسرێت — گەورەترین پلە یەکەم، وەک ٢٠٢٦ — بەڵام وەک یەک پارچە شوێنی خۆی لە ڕستەکەدا دەگرێت.
- بۆشایی و خاڵبەندیی وەک
+ - . , : ( )ئاڕاستەی خۆیان نییە: ئاڕاستەی دراوسێکانیان وەردەگرن. ئێرەیە کە شتەکان تێک دەچن.
Mixed text: English words and numbers in Kurdishدەقی تێکەڵ: وشەی ئینگلیزی و ژمارە لە کوردیدا
Three classic bugs and their fixesسێ هەڵەی باو و چارەسەرەکانیان
When the neighbours disagree, the order breaks. You will meet these three on real sites:
کاتێک دراوسێکان ڕێک ناکەون، ڕیزبەندییەکە تێک دەچێت. ئەم سێیانە لە ڕاستەقینەدا دەبینیت:
C++in a Kurdish sentence shows as++C: the two plus signs take the Kurdish direction. Fix:<bdi>C++</bdi>or<span dir="ltr">C++</span>.- A phone number
+964 750 123 4567comes out as4567 123 750 964+: its groups are reversed. Fix:<span dir="ltr">…</span>, ordir="ltr"on itstel:link (Phone, e-mail and download links). - In an English list, a Kurdish user name followed by
: 3 postspulls the 3 to the wrong side of the name. Fix: wrap the name in<bdi>— this is the example of the HTML standard itself.
C++لە ڕستەیەکی کوردیدا وەک++Cدەردەکەوێت: دوو نیشانەی + ئاڕاستەی کوردی وەردەگرن. چارەسەر:<bdi>C++</bdi>یان<span dir="ltr">C++</span>.- ژمارەی تەلەفۆنی
+964 750 123 4567وەک4567 123 750 964+دەردەچێت: کۆمەڵە ژمارەکانی پێچەوانە دەبنەوە. چارەسەر:<span dir="ltr">…</span>، یانdir="ltr"لەسەرtel:ـەکەی (بەستەری تەلەفۆن، ئیمەیڵ و دابارکردن). - لە لیستێکی ئینگلیزیدا، ناوێکی کوردی کە
: 3 postsـی بەدوادا دێت ژمارە 3 بۆ لای هەڵەی ناوەکە ڕادەکێشێت. چارەسەر: ناوەکە بخەرە ناو<bdi>— ئەمە نموونەکەی خودی ستانداردی .
Mixed text: English words and numbers in Kurdishدەقی تێکەڵ: وشەی ئینگلیزی و ژمارە لە کوردیدا
Text you did not write: bdi, dir="auto" and isolatesئەو دەقەی تۆ نەتنووسیوە: bdi، dir="auto" و جیاکەرەوەکان
Names, comments and search words come from your visitors, so you do not know their direction in advance:
ناو، بۆچوون و لە سەردانکەرەکانتەوە دێن، بۆیە پێشتر ئاڕاستەکەیان نازانیت:
<bdi>isolates a piece of text and finds its direction from its first strong letter (HTML Living Standard). Put it around every inserted name or number.dir="auto"does the same on an element you already have — the paragraph of a comment, an<input>or a<textarea>— so the text turns round as the visitor types. It looks only at the first strong letter: a Kurdish sentence that begins with an English word is treated as left to right.- Where no markup is allowed — inside
<title>or an attribute such asalt— the invisible Unicode isolates do the same job:⁦C++⁩(left to right) or⁨…⁩(first strong letter). W3C advises markup wherever you can use it.
<bdi>پارچەیەک دەق جیا دەکاتەوە و ئاڕاستەکەی لە یەکەم پیتی بەهێزی دەدۆزێتەوە (ستانداردی زیندووی ). لە دەوری هەموو ناو یان ژمارەیەکی تێخراو دایبنێ.dir="auto"هەمان کار لەسەر دەکات کە هەتە — بڕگەی بۆچوونێک،<input>یان<textarea>— بۆیە دەقەکە لە کاتی نووسیندا ئاڕاستەی خۆی دەگرێت. تەنیا سەیری یەکەم پیتی بەهێز دەکات: ڕستەیەکی کوردی کە بە وشەیەکی ئینگلیزی دەست پێدەکات دادەنرێت.- لەو شوێنانەی ڕێگەپێدراو نییە — لەناو
<title>یان وەکalt— جیاکەرەوە نەبینراوەکانی هەمان کار دەکەن:⁦C++⁩() یان⁨…⁩(یەکەم پیتی بەهێز). W3C پێشنیار دەکات لە هەر شوێنێک توانیت بەکاربهێنیت.
<!DOCTYPE html>
<html lang="ckb" dir="rtl">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>دەقی تێکەڵ</title>
<style>
body { margin: 12px; font-family: Vazirmatn, "Noto Sans Arabic", Tahoma, sans-serif; line-height: 1.8; }
.bad { color: #b4530f; }
.good { color: #0d6b62; }
input { font: inherit; padding: 4px 8px; }
</style>
</head>
<body>
<p class="bad">١. من C++ فێر دەبم.</p>
<p class="good">٢. من <bdi>C++</bdi> فێر دەبم.</p>
<p class="bad">٣. تەلەفۆن: +964 750 123 4567</p>
<p class="good">٤. تەلەفۆن: <a href="tel:+9647501234567" dir="ltr">+964 750 123 4567</a></p>
<ul lang="en" dir="ltr">
<li class="bad">User سۆران: 3 posts</li>
<li class="good">User <bdi>سۆران</bdi>: 3 posts</li>
</ul>
<p><label>ناوی تۆ: <input name="name" dir="auto"></label></p>
</body>
</html>HTML sent to the browserئەو HTMLـەی دەنێردرێت بۆ تۆڕگەڕ
<!DOCTYPE html>
<html lang="ckb" dir="rtl">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>دەقی تێکەڵ</title>
<style>
body { margin: 12px; font-family: Vazirmatn, "Noto Sans Arabic", Tahoma, sans-serif; line-height: 1.8; }
.bad { color: #b4530f; }
.good { color: #0d6b62; }
input { font: inherit; padding: 4px 8px; }
</style>
</head>
<body>
<p class="bad">١. من C++ فێر دەبم.</p>
<p class="good">٢. من <bdi>C++</bdi> فێر دەبم.</p>
<p class="bad">٣. تەلەفۆن: +964 750 123 4567</p>
<p class="good">٤. تەلەفۆن: <a href="tel:+9647501234567" dir="ltr">+964 750 123 4567</a></p>
<ul lang="en" dir="ltr">
<li class="bad">User سۆران: 3 posts</li>
<li class="good">User <bdi>سۆران</bdi>: 3 posts</li>
</ul>
<p><label>ناوی تۆ: <input name="name" dir="auto"></label></p>
</body>
</html>The orange lines show the bugs and the green lines the fixes. Type a name in the box, first in English, then in Kurdish: dir="auto" turns it round.
دێڕە پرتەقاڵییەکان هەڵەکان و دێڕە سەوزەکان چارەسەرەکان پیشان دەدەن. ناوێک لە خانەکەدا بنووسە، یەکەم جار بە ئینگلیزی، پاشان بە کوردی: dir="auto" ئاڕاستەکەی دەگۆڕێت.
Kurdish letters, not Arabic look-alikesپیتی کوردی، نەک هاوشێوە عەرەبییەکان
Some Kurdish letters look almost like Arabic ones but are different characters, with different in . Old keyboards, old fonts and text copied from Arabic documents bring in the wrong ones. The page then looks nearly right, but to a computer «كوردي» and «کوردی» are two different words: a search in your site, a sorted list and a spell-checker all fail.
هەندێک پیتی کوردی زۆر لە پیتی عەرەبی دەچن، بەڵام جیاوازن و جیاوازیان لە هەیە. و کۆن و ئەو دەقەی لە بەڵگەنامەی عەرەبییەوە کۆپی کراوە پیتە هەڵەکان دەهێنن. ئینجا لاپەڕەکە نزیکەی دروست دەردەکەوێت، بەڵام بۆ «كوردي» و «کوردی» دوو وشەی جیاوازن: گەڕان لە ، لیستێکی ڕیزکراو و هەموویان تێک دەچن.
| Kurdish (use)کوردی (بەکاری بهێنە) | Arabic look-alike (avoid)هاوشێوەی عەرەبی (خۆتی لێ بپارێزە) | How to tellچۆن جیایان بکەیتەوە |
|---|---|---|
ک U+06A9 | ك U+0643 | at the end of a word ك has a small mark insideلە کۆتایی وشەدا ك نیشانەیەکی بچووکی تێدایە |
ی U+06CC | ي U+064A | ي keeps two dots under it at the end of a word: «كوردي»ي لە کۆتایی وشەدا دوو خاڵی لە ژێرەوە دەمێنێت: «كوردي» |
ە U+06D5 | ه + ZWNJ U+0647 U+200C | the old trick: ه with an invisible “do not join” character after itڕێگە کۆنەکە: ه بە نەبینراوی «مەلکێنە» لە دوایەوە |
Type with a Central Kurdish keyboard layout — Windows, macOS, Android and the iPhone (since iOS 13) all have one — and before publishing, search your files for ك and ي and replace them. For the h sound both ه and ھ are in use; choose one and keep to it, because a search treats them as different letters too. In HTML the invisible ZWNJ can be written ‌; with ە you almost never need it.
بە کوردیی ناوەندی بنووسە — Windows، macOS، Android و iPhone (لە iOS 13ـەوە) هەموویان یەکێکیان هەیە — و پێش بڵاوکردنەوە لە بەدوای ك و ي بگەڕێ و بیانگۆڕە. بۆ دەنگی h هەردوو ه و ھ بەکاردێن؛ یەکێکیان هەڵبژێرە و لەسەری بەردەوام بە، چونکە گەڕانیش بە دوو پیتی جیاوازیان دادەنێت. لە ZWNJـی نەبینراو دەتوانرێت بە ‌ بنووسرێت؛ لەگەڵ ە نزیکەی هەرگیز پێویستت پێی نابێت.
What to mirror and what notچی ئاوێنە بکرێت و چی نا
In a right-to-left interface, pictures that show direction are mirrored — this is — and pictures of things are not (Material Design, Mozilla):
لە ، ئەو وێنانەی ئاڕاستە پیشان دەدەن ئاوێنە دەکرێن — ئەمە — بەڵام وێنەی شتەکان ئاوێنە ناکرێن (Material Design، Mozilla):
- Mirror: back and next arrows, the › between breadcrumb links, progress bars and sliders (they fill from the right), icons that show lines of text, a side-panel icon.
- Do not mirror: logos and brand names, clocks and round “refresh” arrows, the ▶ button and the progress bar of a video (they follow the tape, not the text), check marks ✓, a magnifying glass and other things held in the right hand, numbers, phone numbers and code.
- ئاوێنەی بکە: تیرەکانی گەڕانەوە و دواتر، نیشانەی › لە نێوان ، شریتی پێشکەوتن و سلایدەر (لە ڕاستەوە پڕ دەبن)، ئەو دێڕی دەق پیشان دەدەن، پانێڵی لاتەنیشت.
- ئاوێنەی مەکە: لۆگۆ و ناوی بازرگانی، کاتژمێر و تیری بازنەیی «نوێکردنەوە»، ▶ و شریتی پێشکەوتنی ڤیدیۆ (شوێن شریتی ڤیدیۆکە دەکەون، نەک دەق)، نیشانەی ✓، زەڕەبین و شتی تر کە بە دەستی ڕاست دەگیرێن، ژمارە، ژمارەی تەلەفۆن و کۆد.
/* one arrow picture for both directions */
:dir(rtl) .icon-next { transform: scaleX(-1); }:dir(rtl) matches every element whose direction is right to left ( widely available since June 2026); [dir="rtl"] .icon-next works in older browsers too, and CêIT mirrors its own arrows that way: [dir='rtl'] .arrow { transform: scaleX(-1); }. Maths books follow the same rule: What is mirrored, and what never flips.
:dir(rtl) هەموو دەگرێتەوە کە ئاڕاستەکەی ( لە حوزەیرانی ٢٠٢٦ەوە بە فراوانی بەردەستە)؛ [dir="rtl"] .icon-next لە کۆنتریشدا کار دەکات و CêIT خۆی تیرەکانی بەو شێوەیە ئاوێنە دەکات: [dir='rtl'] .arrow { transform: scaleX(-1); }. کتێبی بیرکاریش هەمان ڕێسا پەیڕەو دەکەن: چی ئاوێنەیی دەبێت و چی هەرگیز ناگۆڕێت.
Digits, dates and phone numbersتاکژمارەکان، ڕێکەوت و ژمارەی تەلەفۆن
Kurdish text may use the ٠١٢٣٤٥٦٧٨٩ or the 0123456789 (Kurdish and English on one page explains the Persian look-alikes ۴ ۵ ۶). Either way a number is written left to right, the biggest place first: ٢٠٢٦ and 2026 are the same number. Choose one style for the whole site, and keep code, URLs and phone numbers in 0–9. Three more habits:
دەقی کوردی دەتوانێت ٠١٢٣٤٥٦٧٨٩ یان 0123456789 بەکاربهێنێت (کوردی و ئینگلیزی لە یەک لاپەڕەدا هاوشێوە فارسییەکانی ۴ ۵ ۶ ڕوون دەکاتەوە). هەرچۆنێک بێت ژمارە دەنووسرێت، گەورەترین پلە یەکەم: ٢٠٢٦ و 2026 هەمان ژمارەن. بۆ هەموو یەک شێوە هەڵبژێرە و کۆد، و ژمارەی تەلەفۆن بە 0–9 بهێڵەوە. سێ خووی تر:
- Number a Kurdish list with
list-style-type: arabic-indic(::marker and Kurdish numbers). - Wrap dates in
<time datetime="2026-10-29">…</time>: people read the Kurdish date between the tags, and programs and search engines read thedatetimevalue. - Keep phone numbers left to right:
<a href="tel:+9647501234567" dir="ltr">+964 750 123 4567</a>(Phone, e-mail and download links).
- لیستێکی کوردی بە
list-style-type: arabic-indicژمارە بکە (::marker و ژمارەی کوردی). - ڕێکەوت بخەرە ناو
<time datetime="2026-10-29">…</time>: مرۆڤ ڕێکەوتە کوردییەکەی نێوان دەخوێنێتەوە و و بەهایdatetimeدەخوێننەوە. - ژمارەی تەلەفۆن بهێڵەوە:
<a href="tel:+9647501234567" dir="ltr">+964 750 123 4567</a>(بەستەری تەلەفۆن، ئیمەیڵ و دابارکردن).
Bilingual sites: one page, two languagesتۆڕگەکانی دووزمانە: یەک لاپەڕە، دوو زمان
A Kurdish–English site keeps every page in both languages and connects the twins:
کوردی–ئینگلیزی هەموو لاپەڕەیەک بە هەردوو زمان دەهێڵێتەوە و جووتەکان بە یەکەوە دەبەستێت:
- One folder per language:
/en/about.htmland/ckb/about.html(or a subdomain such asckb.example.com). Each page has its ownlanganddir, and its own translated<title>, alt texts and description. hreflanglinks in the<head>of both pages tell search engines about the twin. Every version lists all versions, itself included, andx-defaultnames the page for everyone else. If two pages do not point to each other, Google ignores the pair.- Fonts for both scripts: a Latin and a Kurdish font in one stack (Kurdish and English on one page).
- بۆ هەر زمانێک :
/en/about.htmlو/ckb/about.html(یان وەکckb.example.com). هەر لاپەڕەیەکlangوdirـی خۆی هەیە، هەروەها<title>، و وەسفی وەرگێڕدراوی خۆی. -
hreflangلە<head>ـی هەردوو لاپەڕەکەدا باسی جووتەکە بۆ دەکەن. هەموو وەشانێک هەموو وەشانەکان ڕیز دەکات، خۆیشی لەگەڵیاندا.x-defaultئەو لاپەڕەیە دیاری دەکات کە بۆ هەموو کەسانی ترە. ئەگەر دوو لاپەڕە ئاماژە بە یەکتر نەکەن، Google جووتەکە پشتگوێ دەخات. - بۆ هەردوو جۆرە نووسینەکە: لاتینی و کوردی لە یەک لیستدا (کوردی و ئینگلیزی لە یەک لاپەڕەدا).
<head>ـی هەردوو لاپەڕەی لەبارەداHTML<link rel="alternate" hreflang="ckb" href="https://example.com/ckb/about.html">
<link rel="alternate" hreflang="en" href="https://example.com/en/about.html">
<link rel="alternate" hreflang="x-default" href="https://example.com/en/about.html">Bilingual sites: one page, two languagesتۆڕگەکانی دووزمانە: یەک لاپەڕە، دوو زمان
A language switch that keeps the pageگۆڕینی زمان بێ ونکردنی لاپەڕەکە
A language switch goes to the same page in the other language, not to the home page. Write each language in its own language — English, کوردی — never as a flag: a flag is a country, not a language. Mark each link with lang and hreflang, and the current one with aria-current="page":
گۆڕینی زمان دەچێتە هەمان لاپەڕە بە زمانەکەی تر، نەک . هەر زمانێک بە زمانی خۆی بنووسە — English، کوردی — هەرگیز وەک ئاڵا: ئاڵا وڵاتێکە، نەک زمانێک. هەر بە lang و hreflang نیشانە بکە و ئەوەی ئێستا بە aria-current="page":
<!DOCTYPE html>
<html lang="ckb" dir="rtl">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>لەبارەی ئێمە – نانەواخانەی شیلان</title>
<link rel="alternate" hreflang="ckb" href="https://example.com/ckb/about.html">
<link rel="alternate" hreflang="en" href="https://example.com/en/about.html">
<link rel="alternate" hreflang="x-default" href="https://example.com/en/about.html">
<style>
body { margin: 0; font-family: Vazirmatn, "Noto Sans Arabic", Tahoma, sans-serif; line-height: 1.7; }
header {
display: flex; flex-wrap: wrap; gap: 0.5rem 1rem;
align-items: center; justify-content: space-between;
padding: 0.75rem 1rem; background-color: #dcefeb;
}
.site { font-weight: bold; color: #0a5a52; text-decoration: none; }
.lang { display: flex; gap: 0.25rem; margin: 0; padding: 0; list-style: none; }
.lang a { display: inline-block; padding: 0.25rem 0.75rem; border-radius: 1rem; color: #1b1d20; }
.lang a[aria-current] { background-color: #ffffff; font-weight: bold; text-decoration: none; }
main { padding: 1rem; }
</style>
</head>
<body>
<header>
<a class="site" href="index.html">نانەواخانەی شیلان</a>
<nav aria-label="زمان">
<ul class="lang">
<li><a href="/ckb/about.html" hreflang="ckb" lang="ckb" aria-current="page">کوردی</a></li>
<li><a href="/en/about.html" hreflang="en" lang="en">English</a></li>
</ul>
</nav>
</header>
<main>
<h1>لەبارەی ئێمە</h1>
<p>لە ساڵی ٢٠١٨ەوە هەموو بەیانییەک نانی تازە لە هەولێر دەبرژێنین.</p>
</main>
</body>
</html>HTML sent to the browserئەو HTMLـەی دەنێردرێت بۆ تۆڕگەڕ
<!DOCTYPE html>
<html lang="ckb" dir="rtl">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>لەبارەی ئێمە – نانەواخانەی شیلان</title>
<link rel="alternate" hreflang="ckb" href="https://example.com/ckb/about.html">
<link rel="alternate" hreflang="en" href="https://example.com/en/about.html">
<link rel="alternate" hreflang="x-default" href="https://example.com/en/about.html">
<style>
body { margin: 0; font-family: Vazirmatn, "Noto Sans Arabic", Tahoma, sans-serif; line-height: 1.7; }
header {
display: flex; flex-wrap: wrap; gap: 0.5rem 1rem;
align-items: center; justify-content: space-between;
padding: 0.75rem 1rem; background-color: #dcefeb;
}
.site { font-weight: bold; color: #0a5a52; text-decoration: none; }
.lang { display: flex; gap: 0.25rem; margin: 0; padding: 0; list-style: none; }
.lang a { display: inline-block; padding: 0.25rem 0.75rem; border-radius: 1rem; color: #1b1d20; }
.lang a[aria-current] { background-color: #ffffff; font-weight: bold; text-decoration: none; }
main { padding: 1rem; }
</style>
</head>
<body>
<header>
<a class="site" href="index.html">نانەواخانەی شیلان</a>
<nav aria-label="زمان">
<ul class="lang">
<li><a href="/ckb/about.html" hreflang="ckb" lang="ckb" aria-current="page">کوردی</a></li>
<li><a href="/en/about.html" hreflang="en" lang="en">English</a></li>
</ul>
</nav>
</header>
<main>
<h1>لەبارەی ئێمە</h1>
<p>لە ساڵی ٢٠١٨ەوە هەموو بەیانییەک نانی تازە لە هەولێر دەبرژێنین.</p>
</main>
</body>
</html>CêIT itself works a little differently: each lesson has one address, and the buttons EN, کوردی and Both switch the language on the spot. The choice is remembered, and ?lang=ckb at the end of an address opens a page in Kurdish. Before the page is drawn, a small JavaScript sets <html lang="ckb" dir="rtl">, and every Kurdish paragraph carries lang="ckb" dir="rtl" itself — open the developer tools on this page and look.
CêIT خۆی تۆزێک جیاواز کار دەکات: هەر وانەیەک یەک ناونیشانی هەیە و EN، کوردی و هەردووک لە جێی خۆیدا زمانەکە دەگۆڕن. هەڵبژاردنەکە لەبیر دەکرێت و ?lang=ckb لە کۆتایی ناونیشانێکدا لاپەڕەیەک بە کوردی دەکاتەوە. پێش ئەوەی لاپەڕەکە بکێشرێت، کۆدێکی بچووکی <html lang="ckb" dir="rtl"> دادەنێت و هەموو بڕگەیەکی کوردی خۆی lang="ckb" dir="rtl"ـی هەیە — لەسەر ئەم لاپەڕەیە بکەرەوە و سەیر بکە.
Testing a right-to-left pageتاقیکردنەوەی لاپەڕەیەکی ڕاست بۆ چەپ
Before you publish a Kurdish page, check it as a Kurdish reader would:
پێش ئەوەی لاپەڕەیەکی کوردی بڵاو بکەیتەوە، وەک خوێنەرێکی کورد بیپشکنە:
- Flip itهەڵیبگەڕێنەوە
In the developer tools, change
dir="ltr"to"rtl"on<html>(or the other way round). A page built with flex, grid and logical properties turns round by itself; whatever stays behind is a left/right leftover.لە
dir="ltr"بگۆڕە بۆ"rtl"لەسەر<html>(یان بە پێچەوانەوە). لاپەڕەیەک کە بە flex، grid و دروستکرابێت خۆی هەڵدەگەڕێتەوە؛ هەر شتێک لە شوێنی خۆی بمێنێتەوە پاشماوەیەکی چەپ/ڕاستە. - Search the CSSCSS بپشکنە
Look for
left,right,margin-left,padding-right,float: leftandtext-align: left.بەدوای
left،right،margin-left،padding-right،float: leftوtext-align: leftبگەڕێ. - Read the mixed sentencesڕستە تێکەڵەکان بخوێنەرەوە
English words, code, numbers, phone numbers, punctuation at the ends of lines, and names typed by visitors.
وشەی ئینگلیزی، کۆد، ژمارە، ژمارەی تەلەفۆن، خاڵبەندی لە کۆتایی دێڕەکاندا و ئەو ناوانەی سەردانکەران نووسیویانن.
- Check the formsفۆرمەکان بپشکنە
Kurdish fields right to left, e-mail and web-address fields left to right, and
dir="auto"where either can come.خانە کوردییەکان ، خانەکانی و ناونیشانی وێب و
dir="auto"لەو شوێنانەی هەردووکیان دەکرێت بێن. - Check icons, letters and fontsئایکۆنەکان، پیت و فۆنتەکان بپشکنە
Direction arrows mirrored, logos and ▶ not; no ك or ي in Kurdish words; a font that has ڕ ڵ ێ ۆ ە.
تیرەکانی ئاڕاستە ئاوێنە کراون، لۆگۆ و ▶ نا؛ هیچ ك یان ي لە وشە کوردییەکاندا نییە؛ کە ڕ ڵ ێ ۆ ەـی تێدایە.
Common mistakesهەڵە باوەکان
| Mistakeهەڵە | What happensچی ڕوودەدات | Fixچارەسەر |
|---|---|---|
margin-left / float: left in a Kurdish layoutmargin-left / float: left لە کوردیدا | Does not flip for right-to-left.لە پێچەوانە نابێتەوە. | Logical properties, flex or grid.، flex یان grid. |
direction: rtl in the CSS onlyتەنیا direction: rtl لە | Wrong when the CSS does not load, and in copied or translated text.کاتێک بار نابێت و لە دەقی کۆپیکراو یان وەرگێڕدراودا هەڵەیە. | dir="rtl" on <html>.dir="rtl" لەسەر <html>. |
lang="ar" or lang="ar-IQ" on a Kurdish pagelang="ar" یان lang="ar-IQ" لەسەر لاپەڕەیەکی کوردی | An Arabic voice, Arabic dates, the wrong language for search.دەنگی عەرەبی، ڕێکەوتی عەرەبی، زمانی هەڵە بۆ گەڕان. | lang="ckb".lang="ckb". |
text-align: right for Kurdish texttext-align: right بۆ دەقی کوردی | Breaks when the same CSS serves an English page.کاتێک هەمان بۆ لاپەڕەیەکی ئینگلیزی بەکاردێت تێک دەچێت. | text-align: start.text-align: start. |
letter-spacing on Kurdish textletter-spacing لەسەر دەقی کوردی | The joined letters come apart, or the browser ignores it.پیتە لکاوەکان لێک دەبنەوە، یان پشتگوێی دەخات. | Leave it out (Text properties on Kurdish text).لایببە (تایبەتمەندییەکانی دەق لەسەر دەقی کوردی). |
| Arabic ك and ي in Kurdish wordsك و يـی عەرەبی لە وشە کوردییەکاندا | Search, sorting and spell-checking fail.گەڕان، و پشکنینی ڕێنووس تێک دەچن. | ک and ی; a Central Kurdish keyboard layout.ک و ی؛ کوردیی ناوەندی. |
| Mirroring logos, ▶, ✓ or clocksئاوێنەکردنی لۆگۆ، ▶، ✓ یان کاتژمێر | They look wrong or change their meaning.هەڵە دەردەکەون یان واتاکەیان دەگۆڕێت. | Mirror only icons that show direction.تەنیا ئەو ئاوێنە بکە کە ئاڕاستە پیشان دەدەن. |
Names and comments without <bdi> or dir="auto"ناو و بۆچوون بەبێ <bdi> یان dir="auto" | Numbers and punctuation jump to the wrong side.ژمارە و خاڵبەندی بۆ لای هەڵە باز دەدەن. | <bdi> around inserted text, dir="auto" on fields.<bdi> لە دەوری دەقی تێخراو، dir="auto" لەسەر خانەکان. |
| Flags as language buttons, or a switch that always goes to the home pageئاڵا وەک زمان، یان گۆڕەرێک کە هەمیشە دەچێتە | Readers lose their page; a flag is a country, not a language.خوێنەران لاپەڕەکەیان ون دەکەن؛ ئاڵا وڵاتێکە، نەک زمانێک. | Language names, linking to the same page.ناوی زمانەکان، بە بەستەر بۆ هەمان لاپەڕە. |
Exercisesڕاهێنانەکان
This CSS was written for an English page. Rewrite it with logical properties so the same file works for the Kurdish page too, and say what changes in the HTML.
ئەم بۆ لاپەڕەیەکی ئینگلیزی نووسراوە. بە دووپاتە بینووسەوە بۆ ئەوەی هەمان بۆ لاپەڕە کوردییەکەش کار بکات و بڵێ چی لە دەگۆڕێت.
.card {
margin-left: 1rem;
padding-right: 2rem;
border-left: 4px solid #0d6b62;
text-align: left;
}
.badge { position: absolute; top: 0; right: 0; }
.photo { float: left; margin-right: 1rem; }Hintئاماژە
Use the table in From left and right to start and end.
خشتەکەی لە چەپ و ڕاستەوە بۆ سەرەتا و کۆتایی بەکاربهێنە.
Show answerوەڵامەکە پیشان بدە
.card {
margin-inline-start: 1rem;
padding-inline-end: 2rem;
border-inline-start: 4px solid #0d6b62;
text-align: start;
}
.badge { position: absolute; inset-block-start: 0; inset-inline-end: 0; }
.photo { float: inline-start; margin-inline-end: 1rem; }Every left or right became start or end: on the Kurdish page the border, the badge and the photo move to the right by themselves. top could stay as it is — up and down are the same in both languages — but inset-block-start keeps the style consistent. In the HTML, only <html lang="ckb" dir="rtl"> changes.
هەموو چەپ و ڕاستێک بوون بە start یان end: لە لاپەڕە کوردییەکەدا ، نیشانەکە و وێنەکە خۆیان دەچنە لای ڕاست. top دەیتوانی وەک خۆی بمێنێتەوە — سەرەوە و خوارەوە لە هەردوو زمانەکەدا وەک یەکن — بەڵام inset-block-start شێوازەکە یەکدەست دەهێڵێتەوە. لە تەنیا <html lang="ckb" dir="rtl"> دەگۆڕێت.
Write /en/about.html, the English twin of the Kurdish page in A language switch that keeps the page: the right lang, the same three hreflang links, and a switch in which English is the current page.
/en/about.html بنووسە، جووتە ئینگلیزییەکەی ئەو لاپەڕە کوردییەی لە گۆڕینی زمان بێ ونکردنی لاپەڕەکەدا هەیە: langـی دروست، هەمان سێ hreflang و گۆڕەرێک کە English تێیدا لاپەڕەی ئێستایە.
Show answerوەڵامەکە پیشان بدە
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>About us – Shilan's Bakery</title>
<link rel="alternate" hreflang="ckb" href="https://example.com/ckb/about.html">
<link rel="alternate" hreflang="en" href="https://example.com/en/about.html">
<link rel="alternate" hreflang="x-default" href="https://example.com/en/about.html">
<style>
body { margin: 0; font-family: Arial, Vazirmatn, "Noto Sans Arabic", sans-serif; line-height: 1.6; }
header {
display: flex; flex-wrap: wrap; gap: 0.5rem 1rem;
align-items: center; justify-content: space-between;
padding: 0.75rem 1rem; background-color: #dcefeb;
}
.site { font-weight: bold; color: #0a5a52; text-decoration: none; }
.lang { display: flex; gap: 0.25rem; margin: 0; padding: 0; list-style: none; }
.lang a { display: inline-block; padding: 0.25rem 0.75rem; border-radius: 1rem; color: #1b1d20; }
.lang a[aria-current] { background-color: #ffffff; font-weight: bold; text-decoration: none; }
main { padding: 1rem; }
</style>
</head>
<body>
<header>
<a class="site" href="index.html">Shilan's Bakery</a>
<nav aria-label="Language">
<ul class="lang">
<li><a href="/en/about.html" hreflang="en" lang="en" aria-current="page">English</a></li>
<li><a href="/ckb/about.html" hreflang="ckb" lang="ckb" dir="rtl">کوردی</a></li>
</ul>
</nav>
</header>
<main>
<h1>About us</h1>
<p>Since 2018 we have baked fresh bread in Erbil every morning.</p>
</main>
</body>
</html>HTML sent to the browserئەو HTMLـەی دەنێردرێت بۆ تۆڕگەڕ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>About us – Shilan's Bakery</title>
<link rel="alternate" hreflang="ckb" href="https://example.com/ckb/about.html">
<link rel="alternate" hreflang="en" href="https://example.com/en/about.html">
<link rel="alternate" hreflang="x-default" href="https://example.com/en/about.html">
<style>
body { margin: 0; font-family: Arial, Vazirmatn, "Noto Sans Arabic", sans-serif; line-height: 1.6; }
header {
display: flex; flex-wrap: wrap; gap: 0.5rem 1rem;
align-items: center; justify-content: space-between;
padding: 0.75rem 1rem; background-color: #dcefeb;
}
.site { font-weight: bold; color: #0a5a52; text-decoration: none; }
.lang { display: flex; gap: 0.25rem; margin: 0; padding: 0; list-style: none; }
.lang a { display: inline-block; padding: 0.25rem 0.75rem; border-radius: 1rem; color: #1b1d20; }
.lang a[aria-current] { background-color: #ffffff; font-weight: bold; text-decoration: none; }
main { padding: 1rem; }
</style>
</head>
<body>
<header>
<a class="site" href="index.html">Shilan's Bakery</a>
<nav aria-label="Language">
<ul class="lang">
<li><a href="/en/about.html" hreflang="en" lang="en" aria-current="page">English</a></li>
<li><a href="/ckb/about.html" hreflang="ckb" lang="ckb" dir="rtl">کوردی</a></li>
</ul>
</nav>
</header>
<main>
<h1>About us</h1>
<p>Since 2018 we have baked fresh bread in Erbil every morning.</p>
</main>
</body>
</html>The head has exactly the same three link elements as the Kurdish page. The page needs no dir, because left to right is the default; the Kurdish link carries lang="ckb" dir="rtl" so that کوردی is read and shown as Kurdish.
<head>ـەکە ڕێک هەمان سێ <link>ـی لاپەڕە کوردییەکەی تێدایە. لاپەڕەکە پێویستی بە dir نییە، چونکە بنەڕەتە؛ کوردییەکە lang="ckb" dir="rtl"ـی لەسەرە بۆ ئەوەی «کوردی» وەک کوردی بخوێنرێتەوە و پیشان بدرێت.
On a Kurdish page (dir="rtl") these comments come out in the wrong order: the colon jumps away from the English name, and the English comment gets its “!” at the wrong end. Fix them with <bdi> and dir="auto".
لە لاپەڕەیەکی کوردیدا (dir="rtl") ئەم بۆچوونانە بە ڕیزبەندیی هەڵە دەردەکەون: دوو خاڵەکە لە ناوە ئینگلیزییەکە دوور دەکەوێتەوە و نیشانەی «!»ـی بۆچوونە ئینگلیزییەکە دەچێتە سەرەکەی تر. بە <bdi> و dir="auto" چاکیان بکە.
<p class="comment">Aram K.: ٣ بۆچوون</p>
<p class="comment">شیلان: ٥ بۆچوون</p>
<p class="comment">This page helped me a lot!</p>
<p class="comment">زۆر سوودی هەبوو، سوپاس.</p>Show answerوەڵامەکە پیشان بدە
<!DOCTYPE html>
<html lang="ckb" dir="rtl">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>بۆچوونەکان</title>
<style>
body { margin: 12px; font-family: Vazirmatn, "Noto Sans Arabic", Tahoma, sans-serif; line-height: 1.8; }
.comment { margin-block-end: 0.5rem; padding: 0.5rem 0.75rem; border-inline-start: 4px solid #0d6b62; background-color: #f3f1ec; }
.who { font-weight: bold; }
</style>
</head>
<body>
<h1>بۆچوونەکان</h1>
<p class="comment"><bdi class="who">Aram K.</bdi>: ٣ بۆچوون</p>
<p class="comment"><bdi class="who">شیلان</bdi>: ٥ بۆچوون</p>
<p class="comment" dir="auto">This page helped me a lot!</p>
<p class="comment" dir="auto">زۆر سوودی هەبوو، سوپاس.</p>
</body>
</html>HTML sent to the browserئەو HTMLـەی دەنێردرێت بۆ تۆڕگەڕ
<!DOCTYPE html>
<html lang="ckb" dir="rtl">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>بۆچوونەکان</title>
<style>
body { margin: 12px; font-family: Vazirmatn, "Noto Sans Arabic", Tahoma, sans-serif; line-height: 1.8; }
.comment { margin-block-end: 0.5rem; padding: 0.5rem 0.75rem; border-inline-start: 4px solid #0d6b62; background-color: #f3f1ec; }
.who { font-weight: bold; }
</style>
</head>
<body>
<h1>بۆچوونەکان</h1>
<p class="comment"><bdi class="who">Aram K.</bdi>: ٣ بۆچوون</p>
<p class="comment"><bdi class="who">شیلان</bdi>: ٥ بۆچوون</p>
<p class="comment" dir="auto">This page helped me a lot!</p>
<p class="comment" dir="auto">زۆر سوودی هەبوو، سوپاس.</p>
</body>
</html><bdi> isolates each name, so the colon and the count stay where they belong. dir="auto" gives every comment the direction of its first letter: the English one is laid out left to right and even gets its border on the left, because border-inline-start follows the paragraph's own direction.
<bdi> هەر ناوێک جیا دەکاتەوە، بۆیە دوو خاڵەکە و ژمارەکە لە شوێنی خۆیان دەمێننەوە. dir="auto" ئاڕاستەی یەکەم پیتی هەر بۆچوونێک دەداتێ: بۆچوونە ئینگلیزییەکە ڕێکدەخرێت و تەنانەت دەچێتە لای چەپ، چونکە border-inline-start شوێن ئاڕاستەی خودی بڕگەکە دەکەوێت.
This line was copied from an old document. It looks Kurdish, but some letters are Arabic look-alikes. Which ones, and how many?
ئەم دێڕە لە بەڵگەنامەیەکی کۆنەوە کۆپی کراوە. کوردی دەردەکەوێت، بەڵام هەندێک لە پیتەکانی هاوشێوەی عەرەبین. کامانەن و چەندن؟
كتێبخانەی زانكۆ: سەرچاوەی كوردي بۆ خوێندكارانHintئاماژە
Look at every ک and at the last letter of each word.
سەیری هەموو پیتێکی ک و دوایین پیتی هەر وشەیەک بکە.
Show answerوەڵامەکە پیشان بدە
کتێبخانەی زانکۆ: سەرچاوەی کوردی بۆ خوێندکارانFour times ك (U+0643) instead of ک (U+06A9) — in کتێبخانە, زانکۆ, کوردی and خوێندکاران — and once ي (U+064A) instead of ی (U+06CC), at the end of کوردی, where its two dots give it away. A find-and-replace for ك → ک and ي → ی fixes the whole file.
چوار جار ك (U+0643) لەبری ک (U+06A9) — لە کتێبخانە، زانکۆ، کوردی و خوێندکاران — و جارێک ي (U+064A) لەبری ی (U+06CC)، لە کۆتایی کوردی، کە دوو خاڵەکەی ئاشکرای دەکەن. دۆزینەوە و گۆڕینی ك ← ک و ي ← ی هەموو چاک دەکات.
Summaryپوختە
- Kurdish pages:
<html lang="ckb" dir="rtl">— the direction in the HTML, not only in CSS;langanddiron parts in another language. - Sorani is
ckb, neverar-IQ;kuis used for Kurmanji. - Flex and grid follow
dir; floats and left/right do not — use logical properties (margin-inline-start,inset-inline-end,text-align: start). - Mixed text: isolate what you insert —
<bdi>,dir="auto",<span dir="ltr">— and keep phone numbers left to right. - Kurdish letters ک ی ە, not Arabic ك ي ه; one style of digits for the whole site.
- Mirror arrows, progress bars and sliders; never logos, ▶, ✓, clocks or numbers.
- Bilingual sites: twin pages joined by
hreflang, and a switch that keeps the reader on the same page.
- لاپەڕەی کوردی:
<html lang="ckb" dir="rtl">— ئاڕاستە لە ، نەک تەنیا لە ؛langوdirلەسەر ئەو بەشانەی بە زمانێکی ترن. - سۆرانی
ckbـە، هەرگیزar-IQنا؛kuبۆ کرمانجی بەکاردێت. - flex و grid شوێن
dirدەکەون؛ float و left/right نا — بەکاربهێنە (margin-inline-start،inset-inline-end،text-align: start). - دەقی تێکەڵ: ئەوەی تێی دەخەیت جیای بکەرەوە —
<bdi>،dir="auto"،<span dir="ltr">— و ژمارەی تەلەفۆن بهێڵەوە. - پیتە کوردییەکانی ک ی ە، نەک ك ي هـی عەرەبی؛ یەک شێوەی ژمارە بۆ هەموو .
- تیر، شریتی پێشکەوتن و سلایدەر ئاوێنە بکە؛ بەڵام هەرگیز لۆگۆ، ▶، ✓، کاتژمێر یان ژمارە ئاوێنە مەکە.
- دووزمانە: لاپەڕەی جووت کە بە
hreflangبەیەکەوە دەبەسترێن و گۆڕەرێک کە خوێنەر لەسەر هەمان لاپەڕە دەهێڵێتەوە.
Next: Project: Building and Styling Pages puts all of this together in complete practice projects.
دواتر: پڕۆژە: دروستکردن و ڕازاندنەوەی لاپەڕە هەموو ئەمانە لە پڕۆژەی ڕاهێنانی تەواودا بەکار دەهێنێت.
Lesson complete!وانەکە تەواو بوو!
Well done. Review the key terms, then go on to the next lesson.دەستخۆش. سەیرێکی زاراوە سەرەکییەکان بکەرەوە، پاشان بڕۆ بۆ وانەی داهاتوو.
Key termsزاراوە سەرەکییەکان
Project: Building and Styling Pagesپڕۆژە: دروستکردن و ڕازاندنەوەی لاپەڕە
Related lecturesوانە پەیوەندیدارەکان
- HTML Basics: Documents, Links and Tablesبنەماکانی HTML: بەڵگەنامە، بەستەرەکان و خشتەکان
- Semantic HTML: Page Structure and LandmarksHTMLـی واتایی: پێکهاتەی لاپەڕە و ناوچە نیشانەدارەکان
- Styling Text, Backgrounds, Lists and Tablesڕازاندنەوەی دەق، باکگراوند، لیست و خشتەکان
- Typography and Web Fontsتایپۆگرافی و فۆنتەکانی وێب
- Flexbox: Layout in One DirectionFlexbox: ڕێکخستن بە یەک ئاڕاستە
- CSS Grid: Rows and Columns TogetherCSS Grid: ڕیز و ستوون پێکەوە
- Normal Flow, Floats and Positioningڕەوتی ئاسایی، float و شوێندانان
- Links and Navigation Menusبەستەرەکان و لیستە ڕێنیشاندەرەکان
- HTML Formsفۆرمەکانی HTML
- Web Accessibility: WCAG 2.2 in Practiceدەستڕاگەیشتنی وێب: WCAG 2.2 لە کرداردا
- Row and ColumnRow و Column
References and further readingسەرچاوەکان و خوێندنەوەی زیاتر
- W3C Internationalization: Structural markup and right-to-left text in HTML
- W3C Internationalization: Inline markup and bidirectional text in HTML
- W3C Internationalization: Choosing a language tag
- HTML Living Standard: the bdi element
- MDN Learn: Handling different text directions
- MDN: CSS logical properties and values
- MDN: float (incl. inline-start and inline-end)
- web-features: logical properties (Baseline dates)
- web-features: :dir() pseudo-class (Baseline dates)
- W3C WAI: Understanding SC 3.1.2 Language of Parts
- Richard Ishida: Sorani Kurdish orthography notes
- Material Design: Bidirectionality
- Adobe Spectrum: Bi-directionality
- Firefox source docs: RTL guidelines
- Ahmad Shadeed: RTL Styling 101
- Google Search Central: Tell Google about localized versions of your page
- Rudaw (6 June 2019): Apple iOS 13 features Kurdish-language keyboard
This lecture is a first edition. The Kurdish text and terminology are waiting for review by Kurdish IT teachers.ئەم وانەیە چاپی یەکەمە. دەقە کوردییەکە و زاراوەکانی چاوەڕێی پێداچوونەوەی مامۆستایانی کوردی بواری IT ن.