UNPKG

harf

Version:

A small library that keeps Arabic letters look the same when seperated through several HTML elements

mrg0lden/harf

70 lines (38 loc) • 2.88 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
# حرف (Harf.js) English README is available below. ## ما هي؟ مكتبة بسيطة تمكّن تحريك الأحرف العربية منفردة ### Example: في المتصفحات الحالية. ـ `<span>` في الأعلى شكل الأحرف العربية عندما يوضع أحدها داخل العنصر أدناه الشكل المفترض (والذي ستحصل عليه عند استخدام هذه المكتبة). ـ [![example-of-the-problem](https://raw.githubusercontent.com/mrg0lden/harf/master/example.jpg)](https://w3c.github.io/i18n-tests/run?base=.&batch=cursive&test=css-text/shaping/shaping-001.html) ## لم؟ تحريك الأحرف العربية منفردة مستحيل حاليًا دون استخدام بعض الحيل. [هنا](http://tobiasahlin.com/moving-letters/) تحريك رائع يعتمد على تحريك كل حرف لوحده والذي لا يمكن تنفيذ مثله على الأحرف العربية دون حيل. مبدع التحريك: [@tobiasahlin](https://github.com/tobiasahlin) ## كيف؟ هذه المكتبة تستبدل الأحرف العربية [بأشكالها](https://unicode.org/charts/nameslist/) حسب موقعها في الكلمة ## ماذا عن "الإتاحة"؟ أفضل حل حاليًا هو استخدام سمة (attribute) `aria-hidden` على العناصر التي تستخدم المكتبة واستخدام كلاس [Bulma](//bulma.io) من `is-sr-only` أو ما شابهة لعنصر آخر يحوي نفس النص حتى تقرأه قارئات الشاشة ## المساهمة أكثر من مرحّب بها! ـ ## What? A utility to improve letter animations for Arabic alphabet. ### Example: Above is how arabic letters look in current browsers when one of them is in a `<span>`. Below is how it should look (and how it can look using this tiny library). [![example-of-the-problem](https://raw.githubusercontent.com/mrg0lden/harf/master/example.jpg)](https://w3c.github.io/i18n-tests/run?base=.&batch=cursive&test=css-text/shaping/shaping-001.html) ## Why? Animating Arabic letters individually is impossible without any work-arounds. [Here](http://tobiasahlin.com/moving-letters/) are brilliant letters animations by [@tobiasahlin](https://github.com/tobiasahlin) that cannot be applied to Arabic letters due to the shown limitation. ## How? Basically, this library replaces the letters with thier [presentaion forms](https://unicode.org/charts/nameslist/) according to their position in the word. ## What about "Accessibility"? The best solution for accessibility is to add `aria-hidden` to elements that use this library while having the same text in an element with `is-sr-only` class (See [Bulma](//bulma.io).) ## Contributing PRs are more than welcome!