Thursday, November 30, 2023

On-Screen Keyboard Urdu/Arabic/Sindhi

 On-Screen Keyboard


Urdu Keyboard


1. Urdu: Koha > Administration > System Preferences > OpacCustomSearch

Paste the following code here:

<script type="text/javascript">

function WriteLetter(Letter) {

textfield = document.getElementById("translControl1");

textfield.value = textfield.value + Letter;

}

function DisplayUrduKeyboardFunction () {

x = document.getElementById("UrduKeyboard");

if (x.style.display == "none") {

x.style.display = "block";

}

else if (x.style.display == "block") {

x.style.display = "none";

}

}

</script>

<style type="text/css">

#divUrduKeyboardcontainer {

}


#DisplayUrduKeyboard {

color: white;

cursor: pointer;

margin-left:2px;

}


#UrduKeyboard {

height: 130px;

}


#FirstLine, #SecondLine, #ThirdLine, #FourthLine {

text-align: center;

height: 30px;

}


.UrduKey {

font-size: 16px;

font-weight: bold;

color: #ffffff;

background: #3498db;

background-image: -webkit-linear-gradient(top, #3498db, #2980b9);

background-image: -moz-linear-gradient(top, #3498db, #2980b9);

background-image: -ms-linear-gradient(top, #3498db, #2980b9);

background-image: -o-linear-gradient(top, #3498db, #2980b9);

background-image: linear-gradient(to bottom, #3498db, #2980b9);

-webkit-border-radius: 2;

-moz-border-radius: 2;

border-radius: 2px;

width: 20px;

height: 20px;

cursor:pointer;

display: inline-block;

text-align: center;

margin-top: 10px;

padding: 2px;

}


.UrduKey:hover {

background: white;

color: black;

}



.UrduKey:active {

background: white;

color: gray;

position:relative;

top:2px;

}


.UrduKeySpace {

font-size: 20px;

color: white;

background: #3498db;

background-image: -webkit-linear-gradient(top, #3498db, #2980b9);

background-image: -moz-linear-gradient(top, #3498db, #2980b9);

background-image: -ms-linear-gradient(top, #3498db, #2980b9);

background-image: -o-linear-gradient(top, #3498db, #2980b9);

background-image: linear-gradient(to bottom, #3498db, #2980b9);

border:0px solid #4a3a00;

border-radius: 2px;

-moz-border-radius: 2px;

-webkit-border-radius: 2px;

width: 200px;

height: 20px;

cursor:pointer;

display: inline-block;

text-align: center;

margin-top: 10px;

}


.UrduKeySpace:hover {

background: white;

color: black;

}


.UrduKeySpace:active {

background: white;

color: yellow;

position:relative;

top:2px;

}


#translControl1 {


}


/* End of CSS for Koha CoverFlow Plugin */


.mastheadsearch {

    

   color:#FFF;


    -webkit-border-radius: 7px;

    -moz-border-radius: 7px;

    border-radius: 7px;

    padding: .8em;

    margin: .5em 0;

    background: #c7c7c1;

    background: -moz-linear-gradient(top, #c7c7c1 38%, #a7a7a2 100%);

    background: -webkit-gradient(linear, left top, left bottom, color-stop(38%, #c7c7c1), color-stop(100%, #a7a7a2));

    background: -webkit-linear-gradient(top, #c7c7c1 38%, #a7a7a2 100%);

    background: -o-linear-gradient(top, #c7c7c1 38%, #a7a7a2 100%);

    background: -ms-linear-gradient(top, #c7c7c1 38%, #a7a7a2 100%);

    background: linear-gradient(to bottom, #0B0B23, rgb(70, 71, 113) 100%);

    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#c7c7c1', endColorstr='#a7a7a2', GradientType=0);

}


    </style>


    <form name="searchform" method="get" action="/cgi-bin/koha/opac-search.pl" id="searchform" class="form-inline">

        <label for="masthead_search">

            Search

        </label>

        <select name="idx" id="masthead_search">

            <option value="">Library catalog</option>

            <option value="ti">Title</option>

            <option value="au">Author</option>

            <option value="su">Subject</option>

            <option value="nb">ISBN</option>

            <option value="se">Series</option>

            <option value="bc">Accession No.</option>

            <option value="callnum">Call number</option>

        </select>

        <input type="text" title="Type search term" class="transl1" id="translControl1" name="q"><span id="translControl"></span>

        <div class="input-append">

            <button type="submit" id="searchsubmit" class="btn btn-primary">Go</button> 

            <span id="DisplayUrduKeyboard" onclick="DisplayUrduKeyboardFunction();" class="btn btn-primary">اردو</span>

      

  </div>

    </form>



<div id="divUrduKeyboardcontainer">

<center>

<!-- <span id="DisplayUrduKeyboard" onclick="DisplayUrduKeyboardFunction();">اردو</span> -->

<div id="UrduKeyboard" style="display: none;">

<div id="FirstLine">

<div class="UrduKey" onclick="WriteLetter(this.innerHTML);">ذ</div>

<div class="UrduKey" onclick="WriteLetter(this.innerHTML);">ڈ</div>

<div class="UrduKey" onclick="WriteLetter(this.innerHTML);">د</div>

<div class="UrduKey" onclick="WriteLetter(this.innerHTML);">خ</div>

<div class="UrduKey" onclick="WriteLetter(this.innerHTML);">ح</div>

<div class="UrduKey" onclick="WriteLetter(this.innerHTML);">چ</div>

<div class="UrduKey" onclick="WriteLetter(this.innerHTML);">ج</div>

<div class="UrduKey" onclick="WriteLetter(this.innerHTML);">ث</div>

<div class="UrduKey" onclick="WriteLetter(this.innerHTML);">ٹ</div>

<div class="UrduKey" onclick="WriteLetter(this.innerHTML);">ت</div>

<div class="UrduKey" onclick="WriteLetter(this.innerHTML);">پ</div>

<div class="UrduKey" onclick="WriteLetter(this.innerHTML);">ب</div>

<div class="UrduKey" onclick="WriteLetter(this.innerHTML);">آ</div>

<div class="UrduKey" onclick="WriteLetter(this.innerHTML);">أ</div>

<div class="UrduKey" onclick="WriteLetter(this.innerHTML);">ا</div>

<div class="UrduKey" onclick="WriteLetter2(this.innerHTML);">ّ</div>

</div>

<div id="SecondLine">

<div class="UrduKey" onclick="WriteLetter(this.innerHTML);">ق</div>

<div class="UrduKey" onclick="WriteLetter(this.innerHTML);">ف</div>

<div class="UrduKey" onclick="WriteLetter(this.innerHTML);">غ</div>

<div class="UrduKey" onclick="WriteLetter(this.innerHTML);">ع</div>

<div class="UrduKey" onclick="WriteLetter(this.innerHTML);">ظ</div>

<div class="UrduKey" onclick="WriteLetter(this.innerHTML);">ط</div>

<div class="UrduKey" onclick="WriteLetter(this.innerHTML);">ض</div>

<div class="UrduKey" onclick="WriteLetter(this.innerHTML);">ص</div>

<div class="UrduKey" onclick="WriteLetter(this.innerHTML);">ش</div>

<div class="UrduKey" onclick="WriteLetter(this.innerHTML);">س</div>

<div class="UrduKey" onclick="WriteLetter(this.innerHTML);">ژ</div>

<div class="UrduKey" onclick="WriteLetter(this.innerHTML);">ز</div>

<div class="UrduKey" onclick="WriteLetter(this.innerHTML);">ڑ</div>

<div class="UrduKey" onclick="WriteLetter(this.innerHTML);">ر</div>

</div>

<div id="ThirdLine">

<div class="UrduKey" onclick="WriteLetter(this.innerHTML);">ے</div>

<div class="UrduKey" onclick="WriteLetter(this.innerHTML);">ي</div>

<div class="UrduKey" onclick="WriteLetter(this.innerHTML);">ى</div>

<div class="UrduKey" onclick="WriteLetter(this.innerHTML);">ء</div>

<div class="UrduKey" onclick="WriteLetter(this.innerHTML);">ھ</div>

<div class="UrduKey" onclick="WriteLetter(this.innerHTML);">ه</div>

<div class="UrduKey" onclick="WriteLetter(this.innerHTML);">ؤ</div>

<div class="UrduKey" onclick="WriteLetter(this.innerHTML);">و</div>

<div class="UrduKey" onclick="WriteLetter(this.innerHTML);">ن</div>

<div class="UrduKey" onclick="WriteLetter(this.innerHTML);">م</div>

<div class="UrduKey" onclick="WriteLetter(this.innerHTML);">ل</div>

<div class="UrduKey" onclick="WriteLetter(this.innerHTML);">گ</div>

<div class="UrduKey" onclick="WriteLetter(this.innerHTML);">ک</div>

</div>

<div id="FourthLine">

<div class="UrduKeySpace" onclick="WriteLetter(this.innerHTML);"> </div>


</div>

</div>

</center>

</div>


Sindhi Keyboard


2. Sindhi: Koha > Administration > System Preferences > OpacCustomSearch


<script type="text/javascript">

function WriteLetter(Letter) {

textfield = document.getElementById("translControl1");

textfield.value = textfield.value + Letter;

}

function DisplaySindhiKeyboardFunction () {

x = document.getElementById("SindhiKeyboard");

if (x.style.display == "none") {

x.style.display = "block";

}

else if (x.style.display == "block") {

x.style.display = "none";

}

}

</script>

    <style type="text/css">

#divSindhiKeyboardcontainer {

}

 

#DisplaySindhiKeyboard {

color: white;

cursor: pointer;

margin-left:2px;

}

 

#SindhiKeyboard {

height: 150px;

}

 

#FirstLine, #SecondLine, #ThirdLine, #FourthLine, #FifthLine {

text-align: center;

height: 30px;

}

 

.SindhiKey {

font-size: 16px;

font-weight: bold;

color: #ffffff;

background: #3498db;

background-image: -webkit-linear-gradient(top, #3498db, #2980b9);

background-image: -moz-linear-gradient(top, #3498db, #2980b9);

background-image: -ms-linear-gradient(top, #3498db, #2980b9);

background-image: -o-linear-gradient(top, #3498db, #2980b9);

background-image: linear-gradient(to bottom, #3498db, #2980b9);

-webkit-border-radius: 2;

-moz-border-radius: 2;

border-radius: 2px;

width: 20px;

height: 20px;

cursor:pointer;

display: inline-block;

text-align: center;

margin-top: 10px;

padding: 2px;

}

 

.SindhiKey:hover {

background: white;

color: black;

}

 

 

.SindhiKey:active {

background: white;

color: gray;

position:relative;

top:2px;

}

 

.SindhiKeySpace {

font-size: 20px;

color: white;

background: #3498db;

background-image: -webkit-linear-gradient(top, #3498db, #2980b9);

background-image: -moz-linear-gradient(top, #3498db, #2980b9);

background-image: -ms-linear-gradient(top, #3498db, #2980b9);

background-image: -o-linear-gradient(top, #3498db, #2980b9);

background-image: linear-gradient(to bottom, #3498db, #2980b9);

border:0px solid #4a3a00;

border-radius: 8px;

-moz-border-radius: 2px;

-webkit-border-radius: 2px;

width: 200px;

height: 20px;

cursor:pointer;

display: inline-block;

text-align: center;

margin-top: 10px;

}

 

.SindhiKeySpace:hover {

background: white;

color: black;

}

 

.SindhiKeySpace:active {

background: white;

color: yellow;

position:relative;

top:2px;

}

 

#translControl1 {

 

}

 

/* End of CSS for Koha CoverFlow Plugin */

 

.mastheadsearch {

   

   color:#FFF;

 

    -webkit-border-radius: 7px;

    -moz-border-radius: 7px;

    border-radius: 7px;

    padding: .8em;

    margin: .5em 0;

    background: #c7c7c1;

    background: -moz-linear-gradient(top, #c7c7c1 38%, #a7a7a2 100%);

    background: -webkit-gradient(linear, left top, left bottom, color-stop(38%, #c7c7c1), color-stop(100%, #a7a7a2));

    background: -webkit-linear-gradient(top, #c7c7c1 38%, #a7a7a2 100%);

    background: -o-linear-gradient(top, #c7c7c1 38%, #a7a7a2 100%);

    background: -ms-linear-gradient(top, #c7c7c1 38%, #a7a7a2 100%);

    background: linear-gradient(to bottom, #0B0B23, rgb(70, 71, 113) 100%);

    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#c7c7c1', endColorstr='#a7a7a2', GradientType=0);

}

 

    </style>

 

    <form name="searchform" method="get" action="/cgi-bin/koha/opac-search.pl" id="searchform" class="form-inline">

        <label for="masthead_search">

            Search

        </label>

        <select name="idx" id="masthead_search">

            <option value="">Library catalog</option>

            <option value="ti">Title</option>

            <option value="au">Author</option>

            <option value="su">Subject</option>

            <option value="nb">ISBN</option>

            <option value="se">Series</option>

            <option value="bc">Accession No.</option>

            <option value="callnum">Call number</option>

        </select>

        <input type="text" title="Type search term" class="transl1" id="translControl1" name="q"><span id="translControl"></span>

        <div class="input-append">

            <button type="submit" id="searchsubmit" class="btn btn-primary">Go</button>

            <span id="DisplaySindhiKeyboard" onclick="DisplaySindhiKeyboardFunction();" class="btn btn-primary">سنڌي</span>

     

  </div>

    </form>

 

 

<div id="divSindhiKeyboardcontainer">

<center>

<!-- <span id="DisplaySindhiKeyboard" onclick="DisplaySindhiKeyboardFunction();">سنڌي</span> -->

<div id="SindhiKeyboard" style="display: none;">

<div id="FirstLine">

<div class="SindhiKey" onclick="WriteLetter(this.innerHTML);">چ</div>

<div class="SindhiKey" onclick="WriteLetter(this.innerHTML);">ڃ</div>

<div class="SindhiKey" onclick="WriteLetter(this.innerHTML);">جھ</div>

<div class="SindhiKey" onclick="WriteLetter(this.innerHTML);">ڄ</div>

<div class="SindhiKey" onclick="WriteLetter(this.innerHTML);">ج</div>

<div class="SindhiKey" onclick="WriteLetter(this.innerHTML);">ث</div>

<div class="SindhiKey" onclick="WriteLetter(this.innerHTML);">ٺ</div>

<div class="SindhiKey" onclick="WriteLetter(this.innerHTML);">ٽ</div>

<div class="SindhiKey" onclick="WriteLetter(this.innerHTML);">ٿ</div>

<div class="SindhiKey" onclick="WriteLetter(this.innerHTML);">ت</div>

<div class="SindhiKey" onclick="WriteLetter(this.innerHTML);">ڀ</div>

<div class="SindhiKey" onclick="WriteLetter(this.innerHTML);">پ</div>

<div class="SindhiKey" onclick="WriteLetter(this.innerHTML);">ٻ</div>

<div class="SindhiKey" onclick="WriteLetter(this.innerHTML);">ب</div>

<div class="SindhiKey" onclick="WriteLetter(this.innerHTML);">ا</div>

<div class="SindhiKey" onclick="WriteLetter(this.innerHTML);">آ</div>

</div>

<div id="SecondLine">

<div class="SindhiKey" onclick="WriteLetter(this.innerHTML);">ص</div>

<div class="SindhiKey" onclick="WriteLetter(this.innerHTML);">ش</div>

<div class="SindhiKey" onclick="WriteLetter(this.innerHTML);">س</div>

<div class="SindhiKey" onclick="WriteLetter(this.innerHTML);">ز</div>

<div class="SindhiKey" onclick="WriteLetter(this.innerHTML);">ڙ</div>

<div class="SindhiKey" onclick="WriteLetter(this.innerHTML);">ر</div>

<div class="SindhiKey" onclick="WriteLetter(this.innerHTML);">ذ</div>

<div class="SindhiKey" onclick="WriteLetter(this.innerHTML);">ڍ</div>

<div class="SindhiKey" onclick="WriteLetter(this.innerHTML);">ڊ</div>

<div class="SindhiKey" onclick="WriteLetter(this.innerHTML);">ڏ</div>

<div class="SindhiKey" onclick="WriteLetter(this.innerHTML);">ڌ</div>

<div class="SindhiKey" onclick="WriteLetter(this.innerHTML);">د</div>

<div class="SindhiKey" onclick="WriteLetter(this.innerHTML);">خ</div>

<div class="SindhiKey" onclick="WriteLetter(this.innerHTML);">ح</div>

<div class="SindhiKey" onclick="WriteLetter(this.innerHTML);">ڇ</div>

</div>

<div id="ThirdLine">

<div class="SindhiKey" onclick="WriteLetter(this.innerHTML);">ڱ</div>

<div class="SindhiKey" onclick="WriteLetter(this.innerHTML);">گھ</div>

<div class="SindhiKey" onclick="WriteLetter(this.innerHTML);">ڳ</div>

<div class="SindhiKey" onclick="WriteLetter(this.innerHTML);">گ</div>

<div class="SindhiKey" onclick="WriteLetter(this.innerHTML);">ک</div>

<div class="SindhiKey" onclick="WriteLetter(this.innerHTML);">ڪ</div>

<div class="SindhiKey" onclick="WriteLetter(this.innerHTML);">ق</div>

<div class="SindhiKey" onclick="WriteLetter(this.innerHTML);">ڦ</div>

<div class="SindhiKey" onclick="WriteLetter(this.innerHTML);">ف</div>

<div class="SindhiKey" onclick="WriteLetter(this.innerHTML);">غ</div>

<div class="SindhiKey" onclick="WriteLetter(this.innerHTML);">ع</div>

<div class="SindhiKey" onclick="WriteLetter(this.innerHTML);">ظ</div>

<div class="SindhiKey" onclick="WriteLetter(this.innerHTML);">ط</div>

<div class="SindhiKey" onclick="WriteLetter(this.innerHTML);">ض</div>

</div>

<div id="FourthLine">

<div class="SindhiKey" onclick="WriteLetter(this.innerHTML);">ي</div>

<div class="SindhiKey" onclick="WriteLetter(this.innerHTML);">ء</div>

<div class="SindhiKey" onclick="WriteLetter(this.innerHTML);">ھ</div>

<div class="SindhiKey" onclick="WriteLetter(this.innerHTML);">و</div>

<div class="SindhiKey" onclick="WriteLetter(this.innerHTML);">ڻ</div>

<div class="SindhiKey" onclick="WriteLetter(this.innerHTML);">ن</div>

<div class="SindhiKey" onclick="WriteLetter(this.innerHTML);">م</div>

<div class="SindhiKey" onclick="WriteLetter(this.innerHTML);">ل</div>

<div id="FifthLine">

<div class="SindhiKeySpace" onclick="WriteLetter(this.innerHTML);"> </div>

</div> 

</div>

</div>

</center>

</div>




Arabic Keyboard


3. Arabic: Koha > Administration > System Preferences > OpacCustomSearch



<script type="text/javascript">

function WriteLetter(Letter) {

textfield = document.getElementById("translControl1");

textfield.value = textfield.value + Letter;

}

function DisplayArabicKeyboardFunction () {

x = document.getElementById("ArabicKeyboard");

if (x.style.display == "none") {

x.style.display = "block";

}

else if (x.style.display == "block") {

x.style.display = "none";

}

}

</script>

<style type="text/css">

#divArabicKeyboardcontainer {

}


#DisplayArabicKeyboard {

color: white;

cursor: pointer;

margin-left:2px;

}


#ArabicKeyboard {

height: 160px;

}


#FirstLine, #SecondLine, #ThirdLine, #FourthLine #FifthLine{

text-align: center;

height: 30px;

}


.ArabicKey {

font-size: 16px;

font-weight: bold;

color: #ffffff;

background: #3498db;

background-image: -webkit-linear-gradient(top, #3498db, #2980b9);

background-image: -moz-linear-gradient(top, #3498db, #2980b9);

background-image: -ms-linear-gradient(top, #3498db, #2980b9);

background-image: -o-linear-gradient(top, #3498db, #2980b9);

background-image: linear-gradient(to bottom, #3498db, #2980b9);

-webkit-border-radius: 2;

-moz-border-radius: 2;

border-radius: 2px;

width: 20px;

height: 20px;

cursor:pointer;

display: inline-block;

text-align: center;

margin-top: 10px;

padding: 2px;

}


.ArabicKey:hover {

background: white;

color: black;

}



.ArabicKey:active {

background: white;

color: gray;

position:relative;

top:2px;

}


.ArabicKeySpace {

font-size: 20px;

color: white;

background: #3498db;

background-image: -webkit-linear-gradient(top, #3498db, #2980b9);

background-image: -moz-linear-gradient(top, #3498db, #2980b9);

background-image: -ms-linear-gradient(top, #3498db, #2980b9);

background-image: -o-linear-gradient(top, #3498db, #2980b9);

background-image: linear-gradient(to bottom, #3498db, #2980b9);

border:0px solid #4a3a00;

border-radius: 2px;

-moz-border-radius: 2px;

-webkit-border-radius: 2px;

width: 200px;

height: 20px;

cursor:pointer;

display: inline-block;

text-align: center;

margin-top: 10px;

}


.ArabicKeySpace:hover {

background: white;

color: black;

}


.ArabicKeySpace:active {

background: white;

color: yellow;

position:relative;

top:2px;

}


#translControl1 {


}


/* End of CSS for Koha CoverFlow Plugin */


.mastheadsearch {

    

   color:#FFF;


    -webkit-border-radius: 7px;

    -moz-border-radius: 7px;

    border-radius: 7px;

    padding: .8em;

    margin: .5em 0;

    background: #c7c7c1;

    background: -moz-linear-gradient(top, #c7c7c1 38%, #a7a7a2 100%);

    background: -webkit-gradient(linear, left top, left bottom, color-stop(38%, #c7c7c1), color-stop(100%, #a7a7a2));

    background: -webkit-linear-gradient(top, #c7c7c1 38%, #a7a7a2 100%);

    background: -o-linear-gradient(top, #c7c7c1 38%, #a7a7a2 100%);

    background: -ms-linear-gradient(top, #c7c7c1 38%, #a7a7a2 100%);

    background: linear-gradient(to bottom, #0B0B23, rgb(70, 71, 113) 100%);

    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#c7c7c1', endColorstr='#a7a7a2', GradientType=0);

}


    </style>


    <form name="searchform" method="get" action="/cgi-bin/koha/opac-search.pl" id="searchform" class="form-inline">

        <label for="masthead_search">

            Search

        </label>

        <select name="idx" id="masthead_search">

            <option value="">Library catalog</option>

            <option value="ti">Title</option>

            <option value="au">Author</option>

            <option value="su">Subject</option>

            <option value="nb">ISBN</option>

            <option value="se">Series</option>

            <option value="bc">Accession No.</option>

            <option value="callnum">Call number</option>

        </select>

        <input type="text" title="Type search term" class="transl1" id="translControl1" name="q"><span id="translControl"></span>

        <div class="input-append">

            <button type="submit" id="searchsubmit" class="btn btn-primary">Go</button> 

            <span id="DisplayArabicKeyboard" onclick="DisplayArabicKeyboardFunction();" class="btn btn-primary">عربی</span>

      

  </div>

    </form>



<div id="divArabicKeyboardcontainer">

<center>

<!--<span id="DisplayArabicKeyboard" onclick="DisplayArabicKeyboardFunction();">عربی</span> -->

<div id="ArabicKeyboard" style="display: none;">

<div id="FirstLine">

<div class="ArabicKey" onclick="WriteLetter(this.innerHTML);">د</div>

<div class="ArabicKey" onclick="WriteLetter(this.innerHTML);">ج</div>

<div class="ArabicKey" onclick="WriteLetter(this.innerHTML);">ح</div>

<div class="ArabicKey" onclick="WriteLetter(this.innerHTML);">خ</div>

<div class="ArabicKey" onclick="WriteLetter(this.innerHTML);">ه</div>

<div class="ArabicKey" onclick="WriteLetter(this.innerHTML);">ع</div>

<div class="ArabicKey" onclick="WriteLetter(this.innerHTML);">غ</div>

<div class="ArabicKey" onclick="WriteLetter(this.innerHTML);">ف</div>

<div class="ArabicKey" onclick="WriteLetter(this.innerHTML);">ق</div>

<div class="ArabicKey" onclick="WriteLetter(this.innerHTML);">ث</div>

<div class="ArabicKey" onclick="WriteLetter(this.innerHTML);">ص</div>

<div class="ArabicKey" onclick="WriteLetter(this.innerHTML);">ض</div>

</div>

<div id="SecondLine">

<div class="ArabicKey" onclick="WriteLetter(this.innerHTML);">ط</div>

<div class="ArabicKey" onclick="WriteLetter(this.innerHTML);">ك</div>

<div class="ArabicKey" onclick="WriteLetter(this.innerHTML);">م</div>

<div class="ArabicKey" onclick="WriteLetter(this.innerHTML);">ت</div>

<div class="ArabicKey" onclick="WriteLetter(this.innerHTML);">ا</div>

<div class="ArabicKey" onclick="WriteLetter(this.innerHTML);">ل</div>

<div class="ArabicKey" onclick="WriteLetter(this.innerHTML);">ب</div>

<div class="ArabicKey" onclick="WriteLetter(this.innerHTML);">ي</div>

<div class="ArabicKey" onclick="WriteLetter(this.innerHTML);">س</div>

<div class="ArabicKey" onclick="WriteLetter(this.innerHTML);">ش</div>

<div class="ArabicKey" onclick="WriteLetter(this.innerHTML);">ذ</div>

</div>

<div id="ThirdLine">

<div class="ArabicKey" onclick="WriteLetter(this.innerHTML);">ظ</div>

<div class="ArabicKey" onclick="WriteLetter(this.innerHTML);">ز</div>

<div class="ArabicKey" onclick="WriteLetter(this.innerHTML);">و</div>

<div class="ArabicKey" onclick="WriteLetter(this.innerHTML);">ة</div>

<div class="ArabicKey" onclick="WriteLetter(this.innerHTML);">ى</div>

<div class="ArabicKey" onclick="WriteLetter(this.innerHTML);">ل</div>

<div class="ArabicKey" onclick="WriteLetter(this.innerHTML);">ر</div>

<div class="ArabicKey" onclick="WriteLetter(this.innerHTML);">ؤ</div>

<div class="ArabicKey" onclick="WriteLetter(this.innerHTML);">ء</div>

<div class="ArabicKey" onclick="WriteLetter(this.innerHTML);">ئ</div>

</div>

<div id="FourthLine">

<div class="ArabicKey" onclick="WriteLetter(this.innerHTML);">إ</div>

<div class="ArabicKey" onclick="WriteLetter(this.innerHTML);">أ</div>

<div class="ArabicKey" onclick="WriteLetter(this.innerHTML);">آ</div>

<div class="ArabicKey" onclick="WriteLetter(this.innerHTML);">ئ</div>

</div>

<div id="FifthLine">

<div class="ArabicKeySpace" onclick="WriteLetter(this.innerHTML);"> </div>


</div>


</div>

</center>


</div>

Credits

  1. Mr. M. Ibrahim & Abid Hussain (Urdu Keyboard)

  2. Mr. Iftikhar Ali Shah (Sindhi Keyboard)

  3. Abdul Rauf (Arabic Keyboard)