https://github.com/mapmeld/circular-arabic

Use <canvas> to print Arabic script in a circle
https://github.com/mapmeld/circular-arabic

arabic arabic-language canvas-element

Last synced: 27 days ago
JSON representation

Use <canvas> to print Arabic script in a circle

• Host: GitHub
• URL: https://github.com/mapmeld/circular-arabic
• Owner: mapmeld
• License: mit
• Created: 2017-02-11T14:17:49.000Z (almost 8 years ago)
• Default Branch: gh-pages
• Last Pushed: 2024-07-29T19:54:26.000Z (5 months ago)
• Last Synced: 2024-11-09T18:50:22.663Z (about 1 month ago)
• Topics: arabic, arabic-language, canvas-element
• Language: JavaScript
• Homepage: https://mapmeld.com/circular-arabic/
• Size: 80.1 KB
• Stars: 9
• Watchers: 4
• Forks: 0
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-arabic - circular-arabic - Write Arabic words in a circle or arc using the Canvas element (Programming Languages)
• awesome-arabic - circular-arabic - Write Arabic words in a circle or arc using the Canvas element (Programming Languages)

README

        
# circular-arabic

JavaScript and 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:



```javascript

// 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



```javascript

// 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:

```css

@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.

```javascript

const Canvas = require('canvas');

var canv = new Canvas(400, 400);

var ctx = canv.getContext('2d');

...

```

## License

Open source, MIT license