DEV Community

loading...
Cover image for Add Amharic keyboard to your website using Type Ethiopic

Add Amharic keyboard to your website using Type Ethiopic

eyuelberga profile image Eyuel Berga Woldemichael ・3 min read

Type Ethiopic is a javascript library that will allow you to type in Ethiopic(Ge'ez) scripts on text inputs. 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 
Enter fullscreen mode Exit fullscreen mode

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");
Enter fullscreen mode Exit fullscreen mode

We have created two components for the name and bio inputs,these are the nameInput and bioInput functions. We also create a new instance of TypeEthiopicWeb with the HTMLInputElement or HTMLTextareaElement. Using the on property we 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>
Enter fullscreen mode Exit fullscreen mode

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.

GitHub logo eyuelberga / type-ethiopic

Typing Ethiopic scripts made easy

Type Ethiopic logo

⌨️ Typing Ethiopic scripts made easy


GitHub license build Rate on Openbase CONTRIBUTING


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
Enter fullscreen mode Exit fullscreen mode

Contributing

Feel like contributing? That's awesome! We have a contributing guide to help guide you.

License

MIT © Eyuel Berga

Discussion (0)

pic
Editor guide