Arabic Virtual Keyboard

Arabic Virtual Keyboard is a tool for English speakers to learn to write Arabic.

#About

Arabic Virtual Keyboard is a tool that helps english speakers write in Arabic without having a dedicated arabic keyboard

The keyboard is fully featured and contains support for all letters, numbers, special characters, diacritical marks, and text to speech.

Letters

More Info

Most letters in the arabic alphabet have a corresponding letter in english, for example ا roughly corresponds to the letter a in english.

Arabic has emphatic letters. ص and ض are emphatic versions of س and د respectively. The emphatic letters are represented by capital letters in english, S and D respectively.

There are some letters that have no corresponding letter in english such as ش and ث. These letters can be generated by typing the closest corresponding english letter followed by an apostrophe '. For example s' and t' respectively.

English Arabic
a ا
b ب
t ت
t + ' ث
j ج
H ح
x خ
d د
d + ' ذ
r ر
z ز
s س
s + ' ش
S ص
D ض
T ط
Z ظ
g ع
g + ' غ
f ف
q ق
k ك
l ل
m م
n ن
h ه
w و
y ي

Special Characters

More info

Hamza (ء‎) is a letter in the Arabic alphabet, which represents the glottal stop

To achieve this character, type - in english, and to achieve the hamza below alif (إ) type a-- in english.

English Arabic
- ء
a-- إ
A-- أ
A آ
u-- ؤ
y-- ئ
Y ى

Diacritics

More Info

In Arabic, diacritic marks are symbols used to indicate the pronunciation of letters and to clarify the correct reading of words. These marks are called "harakat" (حركات) or "tashkil" (تشكيل). Arabic script is an abjad, which means it primarily represents consonants, and diacritic marks help convey the appropriate vowel sounds.

  • بَ - Ba with Fatha - Pronounced "ba" as in "bat."
  • بُ - Ba with Damma - Pronounced "bu" as in "but."
  • بِ - Ba with Kasra - Pronounced "bi" as in "bit."
  • بّ - Ba with Shadda - Indicates a doubled or emphasized "b" sound.
  • بْ - Ba with Sukun - Indicates that the letter is a consonant with no associated vowel sound.
  • بٌ - Ba with Dammatan - Indicates the sound "bun."
  • بٍ - Ba with Kasratan - Indicates the sound "bin."
  • بً - Ba with Fatahan - Indicates the sound "ban."
English Arabic
a + = َ
an + = ً
u + = ُ
un + = ٌ
i + = ِ
in + = ٍ
s + = ّ
h + = ْ

Numbers

English Arabic
1 ١
2 ٢
3 ٣
4 ٤
5 ٥
6 ٦
7 ٧
8 ٨
9 ٩
0 ٠

#Documentation

This keyboard was built as a web component and is fully compatiable with your JS, React, Angular or Vue projects.

You can use arabic-virtual-keyboard as a <script> tag from a CDN, or install it from npm.

Installation Via NPM

npm i arabic-virtual-keyboard

Installation Via CDN

<script type="module" src="https://cdn.jsdelivr.net/npm/arabic-virtual-keyboard/+esm"></script>

Usage

<arabic-keyboard></arabic-keyboard>

Usage In React

This requires use of the 

@lit/react package
npm install @lit/react
            

import React from 'react';
        
import { 
  ArabicKeyboard as ArabicKeyboardWC 
} from 'arabic-virtual-keyboard';

import { createComponent } from '@lit/react';
        
const ArabicKeyboard = createComponent({
  tagName: 'arabic-keyboard',
  elementClass: ArabicKeyboardWC,
  react: React,
});
        
function App() {
  return (
    <div>
      <ArabicKeyboard 
        showEnglishValue="true" 
        showShiftedValue="true">
      </ArabicKeyboard>
    </div>
  )
}
        
export default App

Attributes

Attribute Default
showEnglishValue

Shows the english value of the key pressed

 false
showShiftedValue

Shows the shifted value of the key pressed

 false

Usage with Attributes

<arabic-keyboard showEnglishValue="true" showShiftedValue="true" > </arabic-keyboard>

Styling

Restyle the keyboard by utilizing css custom properties

Property Default
--keyboard-row-gap

The gap between rows

 4px
--font-size

The font size of the keys

 18px
--max-keyboard-width

The maximum width of the keyboard

 800px
--row-height

The height of each row

 50px
--border-radius

The border radius of the keys

 4px
--button-background-color

The background color of the keys

 #ececec
--border

The border of the keys

 1px solid #999999
--button-active-background-color

The background color of the keys when active

 #d6d6d6
--button-active-border

The border of the keys when active

 1px solid #8f8f8f
--button-padding

The padding of the keys

 4px
--button-color

The color of the keys

 #000000
--button-shifted-color

The color of the keys when shifted

 #ff0000
--button-eng-color

The color of the keys when english

 #0000ff
--button-hover-background-color

The background color of the keys when hovered

 #e0e0e0
--textarea-background-color

The background color of the textarea

 #ffffff
--font-family

The font family of the keys

 "Arial", sans-serif