This content originally appeared on DEV Community and was authored by Eyuel Berga Woldemichael
Type Ethiopic is a javascript library that will allow you to type in (Ge'ez)Ethiopic scripts on text input. You can use it to type in Amharic, Tigrinya, Ge'ez and any other language using the Ge'ez script.
In this post, I will show you how you can add Type Ethiopic to a web app and type in Amharic on HTML textinput and textarea.
We will create a simple webpack project. Lets start by initializing our project:
$ mkdir type-ethiopic-demo
$ cd type-ethiopic-demo
$ yarn init
$ yarn add webpack webpack-cli @type-ethiopic/web
If you already have a project, you can just add the @type-ethiopic/web library to your project.
Now create an index.js file in the src folder and add the following code:
import { TypeEthiopicWeb } from "@type-ethiopic/web";
const nameInput = () => {
const element = document.createElement("div");
element.classList = "row";
element.innerHTML = `
<div class="col-6">
<label for="inputName" class="visually-hidden">Name</label>
<input type="text" class="form-control" id="inputName" placeholder="Name">
</div>
<div class="col-2">
<button id="btnName" class="btn btn-success mb-3">ON</button>
</div>`;
return element;
};
const bioInput = () => {
const element = document.createElement("div");
element.classList = "row";
element.innerHTML = `
<div class="col-6">
<div>
<label for="exampleFormControlTextarea1" class="visually-hidden">Example textarea</label>
<textarea class="form-control" id="inputBio" rows="3" placeholder="Bio"></textarea>
</div>
</div>
<div class="col-2">
<button id="btnBio" class="btn btn-success mb-3">ON</button>
</div>`;
return element;
};
const formContainer = () => {
const container = document.createElement("div");
container.classList = "container mt-4";
container.appendChild(nameInput());
container.appendChild(bioInput());
return container;
};
const navbar = () => {
const nav = document.createElement("nav");
nav.classList = "navbar navbar-light bg-light";
nav.innerHTML = `<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="https://github.com/eyuelberga/type-ethiopic/raw/master/logo/logo.png" alt="" height="35" class="d-inline-block align-text-top">
simple demo for @type-ethiopic/web
</a>
</div>`;
return nav;
};
const addToggle = (instance, btnId) => {
const id = `#${btnId}`;
const btn = document.querySelector(id);
btn.addEventListener("click", () => {
instance.on = !instance.on;
btn.classList = `btn mb-3 ${instance.on ? "btn-success" : "btn-danger"}`;
btn.innerHTML = `${instance.on ? "ON" : "OFF"}`;
});
};
const app = document.getElementById("app");
app.appendChild(navbar());
app.appendChild(formContainer());
const inputInstance = new TypeEthiopicWeb(app.querySelector("input"));
const textareaInstance = new TypeEthiopicWeb(app.querySelector("textarea"));
addToggle(inputInstance, "btnName");
addToggle(textareaInstance, "btnBio");
We have created two components for the name and bio input. We create a new instance of TypeEthiopicWeb with the HTMLInputElement or HTMLTextareaElement. Using the on property we can toggle the keyboard on and off. This is what the AddToggle function does.
Also update the index.html file in the dist folder to look like this:
<!DOCTYPE html>
<html>
<head>
<title>Type Ethiopic Demo</title>
<meta charset="UTF-8" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
</head>
<body>
<div id="app"></div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
<script src="main.js">
</script>
</body>
</html>
The finished app looks like this:
That's it! Now you should have a working Amharic keyboard in your web app. Hope you like the post, please share your comments and suggestions in the discussion below.
eyuelberga
/
type-ethiopic
Typing Ethiopic scripts made easy
⌨️ Typing Ethiopic scripts made easy
This project intends to solve problems that developers face when trying to add support for typing Ge'ez based texts on web and hybrid applications using standard keyboard.
Features ?
- Ease of Use: Type Ethiopic can be integrated to most modern web frameworks with ease.
- Flexible Keyboard Layouts: You can configure Type Ethiopic with different keyboard layouts and also use multiple layouts in one instance.
- Extendable: Type Ethiopic can also be extended easily to support different use-cases.
Installing Type Ethiopic
To use Type Ethiopic on web projects, all you need to do is install the
@type-ethiopic/web package:
$ yarn add @type-ethiopic/web
# or
$ npm install @type-ethiopic/web
Contributing
Feel like contributing? That's awesome! We have a contributing guide to help guide you.
License
MIT © Eyuel Berga
This content originally appeared on DEV Community and was authored by Eyuel Berga Woldemichael
Eyuel Berga Woldemichael | Sciencx (2021-04-08T17:47:21+00:00) Add Amharic keyboard to your website using Type Ethiopic. Retrieved from https://www.scien.cx/2021/04/08/add-amharic-keyboard-to-your-website-using-type-ethiopic/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.