Component library
Each component drawn in both directions with its states named; the spec beneath gives markup, tokens, behaviour, RTL notes, accessibility and edge cases. Sizes: the demos render at the current viewport; the acceptance breakpoints are 360 · 768 · 1320.
Utility strap
- Markup
- .strap > .wrap.strap__in > .strap__group × 2; edition control is a <details class="menu">; search is a <details> holding a <form role="search">; theme and text-size are <button hidden> revealed by script (no dead controls).
- Tokens
- --meta-size --muted --rule --panel --brand; min-height 40 px, controls 36 px.
- RTL
- menus open from the start edge; the edition list shows each edition in its own dir and lang.
- Accessibility
- summary carries aria-haspopup; Escape closes; outside click closes; the theme control announces its state through the visible label.
- Edge cases
- an edition name longer than the control truncates at 12 em; on Tier 3 pages the strap is unchanged and the notice sits under the masthead.
Reading header
- Markup
- header.readhead (sticky, --paper, 1 px rule) > .wrap.wrap--read.readhead__in: a.lockup (24 px mark) · a.readhead__sec · .readhead__ctl (edition · share menu · text size · theme · reading mode); below 600 px text size and theme give way to the strap and reading mode (ADR 0030).
- Behaviour
- fits one row at 360 px: control labels hide behind icons (.ctl__text) below 600; the section link truncates with an ellipsis.
- RTL
- controls sit at the end edge; chevrons flip via :dir(rtl).
Rows (three densities) · column row · section-band column
قەیرانی ڕاستگۆیی لە میدیای کوردییدا: لەنێوان سێبەری حیزبیبوون و تەڵەی کلیکدا
لەو دنیایە پڕ لە هەواڵ و خێراییەدا، کە تەکنەلۆجیا و پەنجەرە دیجیتاڵییەکان سنوورەکانیان بەزاندووە و زانیاری وەکوو بریقەی تیشک دەگاتە دەست خوێنەر، پێگەی ڕاگەیاندن وەکوو چاوی کراوەی کۆمەڵگە و ئاوێنەی ڕاس
خوێندنەوەیەکی تیۆری یارییەکان بۆ گوتاری هەڕەشەی ستراتیجی «کوردی بێ چەک» لەسەر «کوردی چەکدار»
لە جیهانی ئاڵۆز و پڕجەنجاڵی ئێستادا، هەوڵدان بۆ خوێندنەوە و پێشبینیکردنی ئایندە، یەکێکە لە کۆڵەگە سەرەکییەکانی دنیای ئەمڕۆمان.
نیشتمانسازی و ئیکۆلۆجیا: جەنگی بوون و ناسنامە و یاسای ژینگە
بۆچی ئاساییە “پرسەی ڕووناکبیران” چۆڵ و هۆڵ بێت؟!
ساڵانێکە، لەگەڵ مەرگی هەر نووسەر و هونەرمەند و ڕووناکبیرێکی گەورەدا، بەدیار دووبارە بوونەوەی دیمەنێکەوە دەتاسێین: “پرسە چۆڵ و مزگەوت چۆڵ و سەرگۆڕ چۆڵ!” ڕووناکبیران تەنها و بێکەس بەرەو دوا ماڵی ژین بەڕێ دەکرێن.
قەیرانی ڕاستگۆیی لە میدیای کوردییدا: لەنێوان سێبەری حیزبیبوون و تەڵەی کلیکدا
لەو دنیایە پڕ لە هەواڵ و خێراییەدا، کە تەکنەلۆجیا و پەنجەرە دیجیتاڵییەکان سنوورەکانیان بەزاندووە و زانیاری وەکوو بریقەی تیشک دەگاتە دەست خوێنەر، پێگەی ڕاگەیاندن وەکوو چاوی کراوەی کۆمەڵگە و ئاوێنەی ڕاس
نیشتمانسازی و ئیکۆلۆجیا: جەنگی بوون و ناسنامە و یاسای ژینگە
گەڕانەوەم بۆ دنیای یاسای ژینگە و مافی مرۆڤ بۆ بەدەستهێنانی بڕوانامەی ماجستێرەکەم، تەنیا وێستگەیەکی ئەکادیمی ڕووت نەبوو، بەڵکوو دەستپێکی گەشەکردنی پرسیارگەلێکی ستراتیجی و فەلسەفی بوو؛ پرسیار لەسەر هاوک
خوێندنەوەیەکی تیۆری یارییەکان بۆ گوتاری هەڕەشەی ستراتیجی «کوردی بێ چەک» لەسەر «کوردی چەکدار»
لە جیهانی ئاڵۆز و پڕجەنجاڵی ئێستادا، هەوڵدان بۆ خوێندنەوە و پێشبینیکردنی ئایندە، یەکێکە لە کۆڵەگە سەرەکییەکانی دنیای ئەمڕۆمان.
The crisis of truthfulness in Kurdish media: between the shadow of party and the trap of the click
In a world full of news and speed, where technology and digital windows have broken every border and information reaches the reader like a flash of light, the media has gained great weight as the open eye of society and the true mirror of events.
خوێندنەوەیەکی تیۆری یارییەکان بۆ گوتاری هەڕەشەی ستراتیجی «کوردی بێ چەک» لەسەر «کوردی چەکدار»
لە جیهانی ئاڵۆز و پڕجەنجاڵی ئێستادا، هەوڵدان بۆ خوێندنەوە و پێشبینیکردنی ئایندە، یەکێکە لە کۆڵەگە سەرەکییەکانی دنیای ئەمڕۆمان.
Nation-building and ecology: the war of being, identity and environmental law
Why is it normal for “the intellectuals’ wake” to be empty?
For years, with the death of every great writer, artist and intellectual, we have been struck by the same scene repeating: “the wake empty, the mosque empty, the graveside empty!” Intellectuals are sent alone and unaccompanied to the last home of life.
The crisis of truthfulness in Kurdish media: between the shadow of party and the trap of the click
In a world full of news and speed, where technology and digital windows have broken every border and information reaches the reader like a flash of light, the media has gained great weight as the open eye of society and the true mirror of events.
Nation-building and ecology: the war of being, identity and environmental law
My return to the world of environmental law and human rights for my master’s degree was not a bare academic stop; it was the beginning of a set of strategic and philosophical questions about the equation of environment, homeland, identity and the future of the nation.
خوێندنەوەیەکی تیۆری یارییەکان بۆ گوتاری هەڕەشەی ستراتیجی «کوردی بێ چەک» لەسەر «کوردی چەکدار»
لە جیهانی ئاڵۆز و پڕجەنجاڵی ئێستادا، هەوڵدان بۆ خوێندنەوە و پێشبینیکردنی ئایندە، یەکێکە لە کۆڵەگە سەرەکییەکانی دنیای ئەمڕۆمان.
- Markup
- a.row[.row--l|.row--s][.row--col] > span.portrait (32 · 48 · 64 · 96 px, the author’s headshot; initials where the source has the generic mark), span.label, h3, p, span.meta; the whole row is the link; --sec set inline from the section. Rows are portrait-led: the corpus has no landscape images (ADR 0016).
- Tokens
- headline --h-band 1.65 / --h-row 1.3 / --h-list 1.1 in the display face; standfirst body face 1 rem; meta --meta-size; rule 1 px --rule.
- States
- hover and :focus-visible recolour the headline to the section colour (200 ms); image scales 1.02 over 600 ms inside .crop; none under reduced motion.
- Edge cases
- no standfirst → the p is omitted; no image → text-only grid; a 150-character headline wraps to four lines at 360 (text-wrap: balance).
Lead article · dossier band · latest list · section blocks
- Lead article
- label with rule, h1 --h-lead (clamp 2–3.4 rem) ≤ 24 ch, standfirst --s4 ≤ 52/60 ch, byline with 32 px portrait, name, date and reading time, then the front-page hero: a 3:2 figure after the text so the headline stays in the first viewport at 360 × 640. The hero is the front page’s own art, never the author’s portrait; the current image is a labelled stand-in until the editors commission art (ADR 0023).
- Dossier band
- section.dband: two columns (title/standfirst · ordered parts), lifted panel on dark (#25272C), gold label and part numbers; collapses to one column below 940.
- Latest list
- twelve small rows across sections (label, headline, author, date, reading time) with the house-promotion strip beneath.
- Empty states
- a section block with no version in the edition shows the sectionEmpty string rather than nothing; a Tier 3 edition shows the tier3 line under the masthead.
Byline · portrait · multi-author · translator credit
- Markup
- .byline > a.byline__who (span.portrait + b) × n, time, [span modified], span, [span.byline__line translator]; portraits are 1:1 circles at 32 · 48 · 64 · 160 px; the fallback draws two initials in the display face on --hair.
- Rule
- portraits are black-and-white at every size, 32 to 160 px (filter: grayscale in the prototype; the pipeline converts them in production); never in colour (ADR 0024). Initials: in Arabic script two isolated letters with a space between them, never joined (adjacent letters would form a word); Latin initials closed.
- RTL
- the portrait precedes the name in reading order in both directions (logical order, no mirroring needed).
Reading apparatus: label · headline · standfirst · lead figure · body blocks
لەو دنیایە پڕ لە هەواڵ و خێراییەدا، کە تەکنەلۆجیا و پەنجەرە دیجیتاڵییەکان سنوورەکانیان بەزاندووە و زانیاری وەکوو بریقەی تیشک دەگاتە دەست خوێنەر، پێگەی ڕاگەیاندن وەکوو چاوی کراوەی کۆمەڵگە و ئاوێنەی ڕاستەقینەی ڕووداوەکان قورساییەکی گەورەی پەیداکردووە. ئاراستەکردنی هۆشیاری و دروستکردنی ڕای گشتیی، دەسەڵاتێکی گەورە پێشکەش بە میدیا دەکات، بەڵام ئەم دەسەڵاتە مەرجی تووندی هەیە، کە خۆی لە پابەندبوون بە ڕاستی و ئەخلاقی پیشەکەدا دەبینێتەوە. لە هەرێمی کوردستانیشدا، وەکوو هەر مەیدانێکی دیکەی پڕ لە گۆڕانکاری، ڕاگەیاندن مێژوویەکی پڕ لە هەوراز و نشێوی هەیە. ئەگەر بە چاوێکی کراوە و بێلایەن سەیری دۆخی ئەمڕۆ بکەین، بۆمان دەردەکەوێت، کە میدیای کوردی لەبەردەم تاقیکردنەوەیەکی قورسدایە، لە لایەکەوە دەبێت پارێزگاری لە پیرۆزی و ڕاستگۆیی پیشەکە بکات، لە لایەکی دیکەشەوە خۆی لەو تەڵە سیاسی و بازرگانییانە ڕزگار بکات، کە بوونەتە بەشێک لە ژینگەی کارکردنی ڕۆژنامەگەری.
کاتێک دەگەڕێینەوە دواوە، ناکرێت چاو داخەین لەو دەستکەوت و فیداکارییە گەورەیەی کە ڕاگەیاندنی کوردی لە پاش ڕاپەڕین و لە بەستێنی کرانەوەی گشتیدا بەدەستی هێنا. لەو سەردەمەدا، ڕاگەیاندن توانی بەربەستە تووندەکانی زیندانی ڕابردوو بشکێنێت و دەرفەت بۆ دەنگی جیاواز و ڕۆژنامەگەریی بوێر و کاری بەدواداچوون بڕەخسێنێت. ئەمەش دەرگایەکی گەورەی کردەوە بۆ خستنەڕووی کەموکوڕییەکان و ئاشکراکردنی گەندەڵییەکان و هۆشیارکردنەوەی تاکەکان لە مافە سەرەتاییەکانیان. چەندین ڕۆژنامەنووسی دڵسۆز و دەزگای بوێر قوربانییاندا، بۆ ئەوەی ڕاستی لەژێر پەردەی تاریکیدا نەمێنێت، ئەمەش ورە و هیوایەکی دیکەی بە کۆمەڵگە بەخشیوە و دیموکراسییەتی کوردی خستە سەر ڕێڕەوێکی تازە.
کولتووری ئیسلامی
ڕاستگۆیی تەنیا ڕستەیەکی جوان نییە لە کتێبەکاندا.
ڕاستگۆیی تەنیا ڕستەیەکی جوان نییە لە کتێبەکاندا، بەڵکوو مەرجی بنەڕەتیی مانەوەی هەر میدیایەکە.کارزان عزیز، ٩٣٧٣
- یەکەم
- دووەم
- سێیەم
| ساڵ | وتار |
|---|---|
| ٢٠٢٣ | ٧٨ |
| ٢٠٢٤ | ٣٢٥ |
| ٢٠٢٥ | ٢٨٠ |
| ٢٠٢٦ | ٣٢٤ |
In a world full of news and speed, where technology and digital windows have broken every border and information reaches the reader like a flash of light, the media has gained great weight as the open eye of society and the true mirror of events. Shaping awareness and forming public opinion gives the media great power, but that power comes with a hard condition, which is fidelity to truth and to the ethics of the profession. In the Kurdistan Region, as in every other field of rapid change, the media has a history of rises and falls. If we look at today with an open and impartial eye, we see that Kurdish media faces a hard test: on one side it must protect the sanctity and truthfulness of the profession; on the other it must free itself from the political and commercial traps that have become part of the working environment of journalism.
Looking back, we cannot close our eyes to the great achievements and sacrifices Kurdish media made after the uprising and in the climate of general opening. In that period the media broke the hard barriers of the prison of the past and made room for different voices, brave journalism and investigative work. This opened a great door to exposing shortcomings, uncovering corruption and making individuals aware of their basic rights. Many devoted journalists and brave organisations paid a price so that the truth would not stay under a curtain of darkness; this gave society new morale and hope and set Kurdish democracy on a new path.
کولتووری ئیسلامی
ڕاستگۆیی تەنیا ڕستەیەکی جوان نییە لە کتێبەکاندا.
ڕاستگۆیی تەنیا ڕستەیەکی جوان نییە لە کتێبەکاندا، بەڵکوو مەرجی بنەڕەتیی مانەوەی هەر میدیایەکە.کارزان عزیز، ٩٣٧٣
- یەکەم
- دووەم
- سێیەم
| ساڵ | وتار |
|---|---|
| ٢٠٢٣ | ٧٨ |
| ٢٠٢٤ | ٣٢٥ |
| ٢٠٢٥ | ٢٨٠ |
| ٢٠٢٦ | ٣٢٤ |
- Markup
- .prose (body face, --body-size/--body-lh, max-width --measure) > p, h2 (display), h3 (UI 700 1.15 rem), blockquote.pull (2 px section rule at the start edge), blockquote (1 px --rule), ul/ol, figure.figure, .table-wrap > table (UI face, tabular numerals, th rule --ink, td rule --rule), sup > a footnote marks + section.footnotes, .attach, section.book (2:3 cover or typographic fallback), dl.qa (dt speaker labels in the UI face in the section colour).
- Bidi
- Latin runs inside Arabic-script paragraphs are wrapped in <bdi class="latin" dir="ltr"> at build in the body sans at .82 em; numerals per edition; no justification, no hyphenation for Arabic script; text-wrap: balance on headlines and pretty on paragraphs.
- Pull quote
- below 1100 px an in-flow block; at ≥ 1100 it floats to the end margin, width 15 em, overlapping the gutter into the aside column below the author card.
- Edge cases
- no lead image: no figure, the default social card is used; credit "missing": the caption prints the alt text only; table wider than the column scrolls inside .table-wrap; footnotes render at the end with return links.
Translation notice · author-opinion note · correction note · withdrawn notice · Tier 3 line
This article expresses the author’s opinion.
Correction · 3 September 2026 · (specimen) An earlier version gave the year of the first map as 1922; 1920 is correct. The correction is to the original.
ئەم بابەتە دەربڕی بۆچوونی نووسەرە.
ڕاستکردنەوە · (نموونە) لە وەشانی یەکەمدا ساڵ بە هەڵە ١٩٢٢ نووسرابوو؛ ١٩٢٠ی ڕاستە.
- Wording
- three variants with the same form (rule, sentence, link): machine — “This article was translated from the Sorani original by a language model and has not yet been reviewed. Read the original.” · post-edited — “Translated by a language model and reviewed by [name]. Read the original.” · human — “Translated by [name]. Read the original.” The machine variant has a muted ground (--hair); the others are a rule and a line. Never “AI”.
- Placement
- top of a translated version, above the lead figure, in the reader’s language; the byline repeats the translator credit on a second line.
Progress bar · reading mode
- Markup
- div.progress (fixed, 3 px, scaleX transform, origin at the start edge via :dir(rtl)) · html[data-reading] hides all furniture via CSS; .rm-bar toolbar with size (five steps 1.1–1.6 rem Naskh, ×.86 Latin), line height (three steps), measure (three steps, ≥ 940 only), theme (system · light · dark · sepia), font (Naskh · sans), exit.
- Behaviour
- position retained on exit (scrollY saved); URL unchanged; sepia tokens defined in the token file; body measure at 360 = full width minus 20 px margins.
- Print / PDF
- @media print produces headline, byline, date, body at 11/16 pt, inline pull quotes, figures with captions, footnotes, citation with URL and short link, page numbers from the browser; read.html is the script-free equivalent (?mode=read in the build).
Search field · pagination · filters · empty states · 404
هیچ وتارێک نەدۆزرایەوە. وشەیەکی کەمتر تایبەت تاقی بکەوە، یان لە بەشەکاندا بگەڕێ.
Nothing found. Try a less specific word, or browse the sections.
- Rule
- “load more” is not used; pagination is links with rel next/prev; search pages are noindex; filters are toggle buttons with aria-pressed.
People: author header · contributor row · author card list
- Markup
- header.author-head (160 px circular portrait, h1, roles, bio at standfirst size, editions line, links, feed) · articles grouped by year under .year rules · “authors in the same sections” unit below the list; index: a.contrib rows under letter rules with editors and translators as a second list.
- Headshots
- one portrait standard: 1:1, face centred, neutral ground, black-and-white at every size (ADR 0024); sizes 480 · 160 · 64 · 32; initials fallback in the display face on --hair in the person’s script.
Editorial: queue row · proposal chip · provenance popover · diff view · batch table · distribution card preview
- Density
- Vazirmatn / Plex throughout at .78–.88 rem, panel surfaces (--panel) with one elevation level, semantic colour for state (--ok --warn --held --brand) with backgrounds for chips.
- Proposal chip
- four states encoded in form and colour: generated (dashed, muted) · accepted (ok) · edited (brand) · held (held, distinct hue, always with a reason string; held items sort first everywhere); confidence is a short bar, the number lives in the popover; hovering a proposal highlights its evidence span in the body.
- Off-switches
- the rules table renders as switches per task per tier (auto · propose · hold); a switched-off agent shows its tasks as held in the queue.