Add Amharic keyboard to your website using Keywrite

Keywrite a Javascript library that allows you to type non-latin scripts in any web based application using a standard keyboard. See the Docs for more info.

In this post, I will show you how you can add Keywrite along with pre-made input-methods for Ethiopic scripts to a web application and start typing in Amharic.

We will create a simple webpack project. Lets start by initializing our project:

$ mkdir keywrite-amharic-demo
$ cd keywrite-amharic-demo
$ yarn init
$ yarn add webpack webpack-cli @keywrite/web @keywrite/ethiopic-input-methods

If you already have a project, you can just add the @keywrite/web and @keywrite/ethiopic-input-methods libraries to your project.

Now create an index.js file in the src folder and add the following code:

import KeywriteWeb from "@keywrite/web";
import { Amharic } from "@keywrite/ethiopic-input-methods";
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/keywrite/raw/master/logo/logo.png" alt="" height="35" class="d-inline-block align-text-top">
      simple demo for @keywrite/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 KeywriteWeb(app.querySelector("input"), {
  Amharic: Amharic.inputMethod
});
const textareaInstance = new KeywriteWeb(app.querySelector("textarea"), {
  Amharic: Amharic.inputMethod
});
addToggle(inputInstance, "btnName");
addToggle(textareaInstance, "btnBio");

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 KeywriteWeb 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>Keywrite 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 / keywrite

JavaScript Input Method Editor (IME) library for adding configurable input methods to web inputs

Keywrite is a JavaScript Input Method Editor (IME) library for adding configurable input methods to the web. It enables users to input text in a language that can't be represented easily on a standard QWERTY keyboard. See the Docs for more info.

Features 🚀

Ease of Use: Keywrite can be integrated to most modern web frameworks with ease.
Flexible: You can configure Keywrite with multiple Input-methods, change between them at runtime.
Custom Input Method: You can easily define your own Input-methods and add them to Keywrite
Fully Extendable: You can extend the Keywrite core API easily to support different use-cases.
Typescript Support: The codebase is completely written in typescript

Installing Keywrite

To use Keywrite on web projects, all you need to do is install the @keywrite/web package:

$ yarn add @keywrite/web

# or

$ npm install @keywrite/web

Contributing

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

View on GitHub

Blog

Add Amharic keyboard to your website using Keywrite

Eyuel Berga Woldemichael

eyuelberga / keywrite

JavaScript Input Method Editor (IME) library for adding configurable input methods to web inputs

Features 🚀

Installing Keywrite

Contributing

Join Our Newsletter. No Spam, Only the good stuff.

Related