Çavkaniya vekirî · Nivîsîna kurdî · v0.4.0

Klavyeya kurdî

Li her dera webê bi kurdî binivîse

Klavyeyeke virtual a ku dikeve nav her rûpelê, ji bo Soranî (alfabeya erebî) û Kurmancî (alfabeya latînî). Yek widget, bi Unicodeya yekgirtî ya ku ji binî ve rast e.

Klavyeyê test bike Rêberê bixwîne Li GitHubê bibîne

npm install kurdish-keyboard

alfabe: 2
nexşe: 3
girêdanên dema xebatê: 0
codepointên piştrastkirî: 55

Kurmancî, QWERTY + rêz

QWERTY bi rêzeke zêde ji bo ç ê î ş û, çep-ber-rast.

Li vir binivîse

Soranî

Nexşe ji daneyên Unicode CLDRê, rast-ber-çep.

Li vir binivîse

Çima

Yek tîp, gelek kod

Bi dehsalan e ku nivîsa kurdî ya li ser webê bi kodkirinên şaş tê nivîsîn. Tîpên ku wek hev xuya dikin kodên cuda hene: ك û ک, ي û ی, ه û ە. Ev bêdeng lêgerîn, rêzkirin û kontrola rastnivîsê dişkîne. Ev klavye tenê codepointên yekgirtî yên standarda Fermangeha IT ya KRGê dinivîse, ku li hember databaseya tîpên Unicodeyê (UCD) hatine kontrolkirin. Loma hemû nivîsa ku pê tê nivîsîn ji binî ve rast e.

Demoya zindî

Ev ne screenshot e. Ev bi xwe widget e.

Klavyeyên vê rûpelê ne wêne ne. Ew pakêta rastîn in, û tema wan bi taybetmendiyên CSSê hatiye çêkirin. Nexşeyekê hilbijêre û binivîse. ⇧ qata duyem nîşan dide; nexşeyên latînî ⇪ Caps Lockê jî zêde dikin. Bi bişkokên arrowan tu di nav bişkokan de dimeşî, û screen-reader jî dikarin wê bi kar bînin.

Li vir binivîse

Taybetmendî

Her tiştê ku nivîsîneke kurdî pêwîst dike

Unicodeya yekgirtî
Ji binî ve rast.
Widget tenê dikare codepointên ku li hember standarda KRGê û UCDê hatine piştrastkirin binivîse: her tim ک ne ك, her tim ی ne ي, û ە wek dengdêra ku ew e. Nivîsa perçebûyî di rabirdûyê de dimîne.
Du alfabe, sê nexşe
Rast-ber-çep û çep-ber-rast, yek engine.
Nexşeyeke soranî ya ji daneyên Unicode CLDRê hatiye çêkirin, û du nexşeyên kurmancî yên civakê. Bi setLayout() zindî biguherîne; arasteya nivîsê, qat û Caps Lock bi xwe tên.
Ji bo mobîlê hatiye çêkirin
Widget bi xwe klavye ye.
Ji bo her qadê, inputmode="none" klavyeya telefonê vedişêre û panela girêdayî an herikbar nivîsînê dike. Armancên destdanê ji capability queryyekê digihîjin 44px, tu carî bi nasîna user-agent na.
Piştgiriya Rich text
Contenteditable û edîtor.
Qadên sade yên contenteditable yekser dixebitin. Edîtorên frameworkan ên wek Lexical, ProseMirror û Slate bi adaptereke têxistinê ya biçûk ve tên girêdan.
Ji bo her kesî gihîştî
Roving tabindex, navên bideng.
Navîgasyona klavyeyê li gorî WAI-ARIA, fokusa xuya, û labelên screen-readerê bi îngilîzî an kurdî, ku di dema xebatê de (runtime) tên guhertin.
Rastkerê nivîsa kevn
Paqijkirina bi dehsalan ك û ي.
normalizeLegacy() soraniya kevn a perçebûyî vediguherîne codepointên yekgirtî, bi heman dosyeya daneyê ya ku klavye bi kar tîne. Pêwîstiya wê bi DOMê tune, loma di Node û CLIyan de jî dixebite.

Prensîb

Çawa hatiye avakirin

Standard, ne îcad
Codepoint ji standarda klavyeya yekgirtî ya KRGê tên, nexşeya soranî ji Unicode CLDRê. Cihê ku standardek hebe, tu tişt bi destan nayê çêkirin.
Dane, ne kod
Nexşe dosyeyên JSONê ne û li gorî şemayekê tên piştrastkirin. Engine tu carî li navê nexşeyekê nanêre. Nexşeyeke nû daneyên nû ye, ne kodeke nû.
Platform bes e
setRangeText ji bo nivîsînê, inputmode ji bo telefonan, custom property ji bo temayê. Sifir girêdanên dema xebatê, ESM û CJS, nexşeyên tree-shakable.
Piştrastkirî, ne texmînkirî
Her codepoint tîp bi tîp li hember çavkaniyên bingehîn hatiye kontrolkirin. Berî her weşanê, speceke îcrakirî pakêta weşandî îspat dike.

Rêber

Rêbera entegrasyonê

Her tiştê ku ji bo zêdekirina klavyeyê li malpera te pêwîst e. Her mînak li kêleka koda xwe zindî dixebite.

Destpêka bilez

Girê bide, binivîse, veqetîne

Ji bo her nexşeyê importek, yek bang. Panel piştî qadê xuya dibe. Bişkokek li cihê nîşankerê dinivîse, nivîsa hilbijartî diguherîne, û fokusê di qadê de dihêle. kb.detach() panelê radike û hemû side effectan vedigerîne.

import { KurdishKeyboard } from "kurdish-keyboard";
import "kurdish-keyboard/styles.css"; // optional, recommended
import { soraniLayout } from "kurdish-keyboard/layouts/sorani";

const kb = KurdishKeyboard.attachTo(document.querySelector("input"), {
  layout: soraniLayout,
});
// later: kb.detach()

Zindî

Li vir binivîse

Vebijark	Cure	Xwerû	Çi dike
`layout`	`Layout`	panela herî sade	Nexşeya ku tê nîşandan. Ji bo her alfabeyê yekê import bike, an ya xwe bide.
`adapter`	`InsertionAdapter`	ya hundirîn	Têxistina te ya taybet ji bo edîtorên frameworkan. Li “Rich text” li jêr binêre.
`suppressNative`	`boolean`	`false`	`inputmode="none"` datîne, da ku telefon klavyeya xwe veşêrin.
`position`	`'inline' \| 'docked' \| 'floating'`	`'inline'`	Panel diçe ku derê. Li “Mobîl” li jêr binêre.
`labelLanguage`	`'en' \| 'ku'`	`'en'`	Zimanê labelên screen-readerê (Shift, Space, …).

Nexşe

Sê nexşe, guhertina zindî

Ji bo her nexşeyê xaleke ketinê ya cuda heye, loma malpereke ku tenê soranî ye tu carî daneyên kurmancî nagire nav bundleê. setLayout() zindî diguherîne: panel ji nû ve tê xêzkirin, arasteya nivîsê di navbera rast-ber-çep û çep-ber-rast de diguhere, û Shift û Caps Lock vedigerin rewşa destpêkê. Nexşeyên latînî ⇪ Caps Lock distînin; Shift li her derê ji bo yek bişkokê dixebite.

Nexşeya te ya taybet: nexşe daneyên plain in. Cureya Layout tê export kirin, û JSON li gorî şemaya weşandî tê kontrolkirin. Bişkok rêzeyên tîpan dinivîsin, ne tîpên yekane: Shift+و ya CLDRê وو ye. Tabloya codepointên piştrastkirî wek kurdish-keyboard/codepoints.json tê belavkirin. Qadên rast-ber-çep: panel arasteya xwe bi xwe datîne, lê dir ya qadê di destê te de ye. Ji bo qadên soranî dir="rtl" an dir="auto" bi kar bîne; heke tu ji bîr bikî, widget logekê di konsolê de dinivîse.

import { soraniLayout } from "kurdish-keyboard/layouts/sorani";
import { kurmanjiPhonetic } from "kurdish-keyboard/layouts/kurmanji-phonetic";
import { kurmanjiOfficial } from "kurdish-keyboard/layouts/kurmanji-official";

kb.setLayout(kurmanjiPhonetic); // live swap, LTR
kb.setLayout(soraniLayout); // back to RTL

Zindî

Rich text

Contenteditable û adaptera te ya taybet

Panel yekser bi elementên contenteditable ve tê girêdan. Nivîsîn bi commandên guherandinê yên gerokê bi xwe derbas dibe, loma nîşanker, hilbijartin û bûyerên input wek lêxistinên rastîn ên bişkokan tevdigerin. Yek qayde: bişkok tenê dema ku hilbijartin di nav elementa girêdayî de be dixebitin. Heke nîşanker li cihekî din be, bişkok tiştekî nake; ew tu carî di qada şaş de nanivîse.

Edîtorên frameworkan ên wek Lexical, ProseMirror û Slate bi sêwirana xwe guhertinên ji derve vedigerînin. Ji bo wan, vebijarka adapter bide. insertChar û deleteBack mecbûrî ne; insertLineBreak û insertParagraph vebijarkî ne. Panel tenê ji bo karên ku adapter dikare bike bişkokê nîşan dide: bê insertParagraph, bişkoka ¶ tune. Adapterên hundirîn jî tên export kirin (valueAdapter, contentEditableAdapter), heke tu bixwazî yekê bipêçî.

// Plain contenteditable: nothing new to learn
KurdishKeyboard.attachTo(document.querySelector("[contenteditable]"), {
  layout: soraniLayout,
});

// Lexical (e.g. Payload CMS): supply an editor-native adapter
import {
  $getSelection,
  DELETE_CHARACTER_COMMAND,
  INSERT_LINE_BREAK_COMMAND,
  INSERT_PARAGRAPH_COMMAND,
} from "lexical";

KurdishKeyboard.attachTo(editorRootElement, {
  layout: soraniLayout,
  adapter: {
    insertChar: (text) =>
      editor.update(() => $getSelection()?.insertText(text)),
    deleteBack: () => editor.dispatchCommand(DELETE_CHARACTER_COMMAND, true),
    insertLineBreak: () =>
      editor.dispatchCommand(INSERT_LINE_BREAK_COMMAND, false),
    insertParagraph: () =>
      editor.dispatchCommand(INSERT_PARAGRAPH_COMMAND, undefined),
  },
});

Zindî

Qada guherbar (Soranî)

Mobîl

Bibe klavye

suppressNative inputmode="none" datîne. Ev awayê standard e ku tu ji telefonê re bibêjî “klavyeya vê rûpelê bi xwe heye”. Bihayê wê rastkirina xweber a telefonê ye ji bo wê qadê, loma ji bo her qadê tu bi xwe vê vedikî. docked panelê li binê ekranê sabit dike û qadê xuya dihêle; floating wê li nêzî goşeyê dihêle. Li ser screenên destdanê armancên destdanê digihîjin 44px.

KurdishKeyboard.attachTo(field, {
  layout: soraniLayout,
  suppressNative: true,
  position: "docked", // or "floating"
});

Zindî

Qada bi şêweya telefonê (Soranî)

Li ser komputerê tu panela sabit dibînî. Li ser telefonê, inputmode="none" klavyeya telefonê jî dûr dihêle.

Tema

Custom properties, bê CSS-in-JS

Pelê CSSê carekê import bike, paşê taybetmendiyên --kkb-* li ser panelê an li ser her hêmaneke jortir saz bike. Pelê CSSê vebijarkî ye; widget bê wî jî dixebite. Du klavyeyên li jêr tenê bi custom propertiesan ji hev cuda ne.

Taybetmendiyên hundirîn ên --_* ji yên din tên hesabkirin. Tenê yên giştî biguherîne.

.theme-night {
  --kkb-key-bg: #1e293b;
  --kkb-key-color: #e2e8f0;
  --kkb-key-border: #334155;
  --kkb-pressed-bg: #334155;
  --kkb-focus-color: #38bdf8;
  --kkb-surface-bg: #1e293b;
}

Xwerû

Tema tarî, tenê bi --kkb-*

Taybetmendî	Xwerû	Çi diguherîne
`--kkb-gap`	`4px`	Valahiya navbera bişkok û rêzan
`--kkb-key-size`	`2.2rem` · `44px` li ser ekranên destdanê	Kêmtirîn firehî û bilindahiya bişkokê
`--kkb-key-font-size`	`1.1rem` · `1.3rem` li ser ekranên destdanê	Mezinahiya etîketa bişkokê
`--kkb-key-bg`	`ButtonFace`	Paşxaneya bişkokê
`--kkb-key-color`	`ButtonText`	Rengê etîketa bişkokê
`--kkb-key-border`	`ButtonText 40%`	Rengê sînorê bişkokê
`--kkb-key-radius`	`4px`	Girovera goşeyên bişkokê
`--kkb-pressed-bg`	`#cbdcee`	Paşxaneya Shift û Caps Lockê dema ku çalak in
`--kkb-focus-color`	`#1a56a0`	Xeleka fokusa klavyeyê
`--kkb-surface-bg`	`Canvas`	Paşxaneya panela girêdayî an herikbar

Gihîştinbarî

Rêveçûna bi klavyeyê, navên bideng

Panel komeke bi etîket a bişkokên default ye (role="group"), bi şêweya roving tabindex a WAI-ARIA. Ew yek rawestgeha Tabê ye. Bişkokên tîran li gorî arasteya dîtbarî di navbera bişkokan de dimeşin, loma di panelên rast-ber-çep de berevajî ne. Home û End di rêzekê de baz didin; Enter û Space bişkokê pêl dikin. Bişkokên ku tu nabînî nav distînin (Space, ZWNJ, ⇧ Shift, ⇪ Caps Lock). Fokus piştî renderkirina nû dimîne, û :focus-visible outlineyekê bi kontrasta herî kêm 3:1 nîşan dide.

// at attach time…
KurdishKeyboard.attachTo(field, {
  layout: soraniLayout,
  labelLanguage: "ku",
});

// …or live
kb.setLabelLanguage("en");

Zindî

Bişkoka ⇧ dibêje:

Tabê pêl bike da ku bikevî nav panelê, paşê bişkokên tîran an arrowan bi kar bîne.

Nivîsa kevn

Nivîsa kevn paqij bike

normalizeLegacy() soraniya kevn a perçebûyî (ك û ي yên erebî, ه li şûna ە) vediguherîne codepointên yekgirtî. Ev method heman dosyeya daneyê ya klavyeyê bi kar tîne. Pêwîstiya wê bi DOMê tune, loma di Node, workeran û CLIyan de dixebite.

Pêşî vê bixwîne: tê hesibandin ku nivîsa ku tê dayîn kurdî ye. ك→ک û ي→ی her tim tên sepandin, loma jêgirtinên erebî yên rastîn jî diguherin; zimanên din bi xwe veqetîne. Qaydeya ه→ە tenê li cihê tîpê dinêre: ه ya li dawiya peyvê diguhere (berî ZWNJ jî); ه ya berî tîpeke din a erebî, tatweel an diakrîtîkekê naguhere. Dengdêrên kevn ên di nava peyvê de nayên dîtin, û ferheng tune. Nivîsa latînî naguhere.

import { normalizeLegacy } from "kurdish-keyboard/normalize";

normalizeLegacy("كوردي"); // → "کوردی"
normalizeLegacy("ئێمه"); // → "ئێمە"

Zindî

Nivîsa soranî ya kevn li vir bizeliqîne

Encam

CDN

Bê gava avakirinê

Bundleya skrîptê guherbareke global a KurdishKeyboard dide. attachTo ya wê navên nexşeyan ('sorani', 'kurmanji-phonetic', 'kurmanji-official') an objektên Layout werdigire; navekî nenas çewtiyekê bi lîsteya navan derdixe. Lîsteya layouts û normalizeLegacy jî tê de hene. Ev bundle hemû nexşeyan dihewîne; bi bundlerekê re, ketinên modulan (module) bi kar bîne.

<script src="https://unpkg.com/kurdish-keyboard"></script>
<script>
  KurdishKeyboard.attachTo(document.querySelector("input"), {
    layout: "sorani",
  });
</script>

Framework

React, Vue, Svelte: wrapper ne pêwîst in

Her têxistin li ser qadê bûyereke input a bubbling (inputType: 'insertText') dişîne. Loma girêdanên frameworkan guhertinê dibînin, wek ku bikarhêner bi xwe nivîsandibe. Di mountê de girê bide, di unmountê de veqetîne.

function KurdishInput() {
  const [value, setValue] = useState("");
  const ref = useRef(null);

  useEffect(() => {
    const kb = KurdishKeyboard.attachTo(ref.current, { layout: soraniLayout });
    return () => kb.detach();
  }, []);

  return (
    <input
      dir="rtl"
      ref={ref}
      value={value}
      onChange={(e) => setValue(e.target.value)}
    />
  );
}

<script setup>
const text = ref("");
const field = ref(null);
let kb;

onMounted(() => {
  kb = KurdishKeyboard.attachTo(field.value, { layout: soraniLayout });
});
onUnmounted(() => kb?.detach());
</script>

<template>
  <input dir="rtl" ref="field" v-model="text" />
</template>

<!-- Svelte: bind:value works the same way -->

Sînor

Çi nikare bike, û çima

Ev ruleyên gerokê ne, ne taybetmendiyên miss bûyî.

Nikare di iframeyên malperên din de binivîse: Siyaseta same-origin hemû gihîştina rûpelên ku ji originekî din hatine bicihkirin asteng dike.
Nikare lêxistinên rastîn ên bişkokan çêke: Bûyerên klavyeyê yên ku skrîptek çêdike isTrusted: false in, û gerok tiştê ku ew dixwazin bikin paşguh dikin. Loma widget nirxa qadê rasterast bi setRangeText() diguherîne. Ev li her derê dixebite, di qadên şîfreyê de jî.
suppressNative rastkirina xweber digire: inputmode="none" tevahiya klavyeya telefonê ji bo wê qadê radike, rastkirina xweber jî. Mekanîzma bi vî awayî dixebite, loma ji bo her qadê tu bi xwe vê vedikî.
Edîtorên frameworkan adapterekê dixwazin: Lexical, ProseMirror û Slate xwediyê DOMa xwe ne û guhertinên ji derve vedigerînin. Têxistineke di asta gerokê de nikare wan bi ewlehî bi rê ve bibe; vebijarka adapter ji bo wan e. Contenteditable a sade yekser dixebite.
Piştgiriya gerokan: Gerokên evergreen ên ji nêzîkî sê salên dawî, û Safari 15.4+. Kêmasiyeke biçûk: sînorê xwerû yê bişkokê color-mix() bi kar tîne (Safari 16.2+). Gerokên kevntir bişkokan bê wê nîşan didin, an tu --kkb-key-border saz dikî. Tu polyfill nayê şandin.

Bistîne

Belaş, wek ku klavyeyek divê be

Belaş

Lîsansa MIT · bê ast, bê şopandin, bê girêdan

npm install kurdish-keyboard

Guhertoya 0.4.0 li ser npm, an ji depoya GitHubê saz bike.

Li GitHubê bibîne

Pirs

Bersiv, berî ku tu bipirsî

Kîjan gerok dixebitin?: Gerokên evergreen ên sê salên dawî, û Safari 15.4+. Her APIya gerokê ya ku widget bi kar tîne bi berfirehî heye, loma tu polyfill nayê şandin.
Bi React, Vue an Svelte re dixebite?: Erê. Widget piştî her têxistinê bûyereke input a bubbling dişîne, loma girêdanên frameworkan bê wrapper guhertinê dibînin.
Dikare di her qadê de binivîse?: Her input, textarea an hêmaneke contenteditable di heman rûpelê de, û edîtorên Rich text bi adapterekê. iframeyên malperên din ji ber ewlehiya gerokê asteng in.
Çima kafa erebî nanivîse?: Di nivîsa kurdî de ك tenê dişibe ک, û bêdeng lêgerîn û rêzkirinê dişkîne. Loma widget her tim ک dinivîse. Tîpên erebî yên rastîn ji bo nivîsîna navên erebî li ser qata Shiftê ya soranî ne.
Dikarim nexşeya xwe çêbikim?: Erê. Nexşe JSONên sade ne û li gorî şemayeke weşandî tên piştrastkirin. Engine her nexşeya derbasdar wek xwe nîşan dide, loma nexşeyeke community zêdekirinek e, ne fork.

Klavyeya kurdî

Yek tîp, gelek kod

Ev ne screenshot e. Ev bi xwe widget e.

Her tiştê ku nivîsîneke kurdî pêwîst dike

Unicodeya yekgirtî

Du alfabe, sê nexşe

Ji bo mobîlê hatiye çêkirin

Piştgiriya Rich text

Ji bo her kesî gihîştî

Rastkerê nivîsa kevn

Çawa hatiye avakirin

Standard, ne îcad

Dane, ne kod

Platform bes e

Piştrastkirî, ne texmînkirî

Rêbera entegrasyonê

Girê bide, binivîse, veqetîne

Sê nexşe, guhertina zindî

Contenteditable û adaptera te ya taybet

Bibe klavye

Custom properties, bê CSS-in-JS

Rêveçûna bi klavyeyê, navên bideng

Nivîsa kevn paqij bike

Bê gava avakirinê

React, Vue, Svelte: wrapper ne pêwîst in

Çi nikare bike, û çima

Belaş, wek ku klavyeyek divê be

Bersiv, berî ku tu bipirsî