mapmeld / circular-arabic Goto Github PK

View Code? Open in Web Editor NEW

7.0 4.0 0.0 80 KB

Use <canvas> to print Arabic script in a circle

Home Page: https://mapmeld.github.io/circular-arabic

License: MIT License

JavaScript 88.79% HTML 11.21%

arabic arabic-language canvas-element

circular-arabic's Introduction

circular-arabic

JavaScript and a web font to print Arabic script text in a circle.

This is somewhat more difficult than you'd expect... when printing Arabic characters one-by-one, you need appropriate text-shaping (selecting the right glyph) to show the letters joining to each other.

'Outie' style

Arabic printed with up = away from center.

Here's 'Australia' printed twice:

// the 'outie' style on a canvas element
var canv = document.getElementById('outie');
var ctx = canv.getContext('2d');

// set color and circle centroid
ctx.fillStyle = '#000';
ctx.translate(200, 200);

ArabicCircle(ctx, 'أستراليا أستراليا', 300, -1);

'Innie' style

Arabic printed with up = toward center

Here's 'Arabic alphabet' showing tashkil marks

// the 'innie' style on a canvas element
var innie = document.getElementById('innie');
var ctx2 = innie.getContext('2d');

// set color and circle centroid
ctx2.fillStyle = '#000';
ctx2.translate(200, 200);

ArabicCircle(ctx2, 'الأَبْجَدِيَّة العَرَبِيَّة‎‎', 300, 1);

Client and server recommendations

If you are running this in the browser, include an Arabic web font for consistently-sized letters and arcs:

@import url(//fonts.googleapis.com/earlyaccess/notonaskharabic.css);
canvas {
  font-family: 'Noto Naskh Arabic';
}

If you are running this on a NodeJS server, install the Noto Naskh Arabic font. You will also need to install node-canvas, which has installation instructions for several operating systems and cloud providers.

const Canvas = require('canvas');
var canv = new Canvas(400, 400);
var ctx = canv.getContext('2d');
...

License

Open source, MIT license

circular-arabic's People

Contributors

Stargazers

Watchers

circular-arabic's Issues

inky 'Arrival' texture

idea that I got at launch last year

more generic / node module

currently using some fixed numbers for width of baseline, diameter, canvas width and height

need to clean up for general use

Action required: Greenkeeper could not be activated 🚨

🚨 You need to enable Continuous Integration on all branches of this repository. 🚨

To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because we are using your CI build statuses to figure out when to notify you about breaking changes.

Since we did not receive a CI status on the greenkeeper/initial branch, we assume that you still need to configure it.

If you have already set up a CI for this repository, you might need to check your configuration. Make sure it will run on all new branches. If you don’t want it to run on every branch, you can whitelist branches starting with greenkeeper/.

We recommend using Travis CI, but Greenkeeper will work with every other CI service as well.

Once you have installed CI on this repository, you’ll need to re-trigger Greenkeeper’s initial Pull Request. To do this, please delete the greenkeeper/initial branch in this repository, and then remove and re-add this repository to the Greenkeeper integration’s white list on Github. You'll find this list on your repo or organiszation’s settings page, under Installed GitHub Apps.