diff --git a/docs/arabic.md b/docs/arabic.md index 7b0df6d..243d87a 100644 --- a/docs/arabic.md +++ b/docs/arabic.md @@ -4,93 +4,62 @@ language: ar direction: rtl --- -«قاهري» هو خط حاسوبي [كوفي] مبني على القاعدة الحديثة لخط كوفي المصاحف التي -وضعها الأستاذ [محمد عبد القادر] رحمه الله. +«قاهري» هو خط حاسوبي [كوفي] مبني على القاعدة الحديثة لخط كوفي المصاحف التي وضعها الأستاذ [محمد عبد القادر] رحمه الله. -يأتى الاسم «قاهري» من مدينة القاهرة بمصر، محاكاة لتسمية الخطوط القديمة على -أسماء المدن التي ظهرت بها. +يأتي الاسم «قاهري» من مدينة القاهرة بمصر، محاكاة لتسمية الخطوط القديمة على أسماء المدن التي ظهرت بها. -«قاهري» مشروع حر مفتوح المصدر، ويرحب بالجميع لاستخدامه وتعديله تحت بنود -[الإصدارة ١٫١ من رخصة الخطوط المفتوحة][5]. +«قاهري» مشروع حر مفتوح المصدر، ويرحب بالجميع لاستخدامه وتعديله تحت بنود [الإصدارة ١٫١ من رخصة الخطوط المفتوحة][5]. ## التطبيق -يحتوي الخط على تنويعات لكثير من حروفه، ويفترض أن يتاح للمستخدم اختيار هذه -التنويعات في أي تطبيق يدعم خطوط أوبن تيب. للأسف تعاني كثير من التطبيقات من ضعف -دعمها لهذه الخصائص (بعضها لا يتيح اختيار التنويعات، والبعض الآخر يتيحه لكن -واجهة الاستخدام سيئة، كما أن بعضها لا يسمح باختيار تنويعة لكل حرف على حدة)، لذا -يوفر خط «قاهري» تطبيق وب يعمل على المتصفحات الحديثة ويتيح الوصول بسهولة إلى -مختلف تنويعات الحروف ومميزات الخط الأخرى. +يحتوي الخط على تنويعات لكثير من حروفه، ويفترض أن يتاح للمستخدم اختيار هذه التنويعات في أي تطبيق يدعم خطوط أوبن تيب. للأسف تعاني كثير من التطبيقات من ضعف دعمها لهذه الخصائص (بعضها لا يتيح اختيار التنويعات، والبعض الآخر يتيحه لكن واجهة الاستخدام سيئة، كما أن بعضها لا يسمح باختيار تنويعة لكل حرف على حدة)، لذا يوفر خط «قاهري» تطبيق وب يعمل على المتصفحات الحديثة ويتيح الوصول بسهولة إلى مختلف تنويعات الحروف ومميزات الخط الأخرى. -يمكن استخدام التطبيق من بزيارة [صفحته][4] والكتابة في المنطقة المخصصة للكتابة. -ستظهر أسفل النص التنويعات المتاحة للحرف الذي يسبق مؤشر النص (المستطيل الرمادي). -النقر على أي تنويعة سيستخدمها بدل الشكل الحالي للحرف: +يمكن استخدام التطبيق من بزيارة [صفحته][4] والكتابة في المنطقة المخصصة للكتابة. ستظهر أسفل النص التنويعات المتاحة للحرف الذي يسبق مؤشر النص (المستطيل الرمادي). النقر على أي تنويعة سيستخدمها بدل الشكل الحالي للحرف: ![لقطة شاشة للتطبيق في الوضع المبدئي](assets/images/screenshot.png) شريط التمرير ومربع الرقم المجاور له يتحكمان في حجم النص. -يوجد زران للتحكم في النقاط، زر ![إزالة -النقاط](app/assets/images/remove-dots.svg) يحول إلى الصورة المهمَلة (غير -المنقوطة) من الحروف، لتحاكي المخطوطات الكوفية القديمة. +يوجد زران للتحكم في النقاط، زر ![إزالة النقاط](app/assets/images/remove-dots.svg){:.زر} يحول إلى الصورة المهمَلة (غير المنقوطة) من الحروف، لتحاكي المخطوطات الكوفية القديمة. ![لقطة شاشة للتطبيق بدون نقاط](assets/images/screenshot-dotless.png) -أما زر ![النقاط المستديرة](app/assets/images/round-dots.svg) فيستبدل بالنقاط +أما زر ![النقاط المستديرة](app/assets/images/round-dots.svg){:.زر} فيستبدل بالنقاط المستطيلة نقاطا مستديرة كما هو الشائع في شكل النقاط اليوم. ![لقطة شاشة للتطبيق بنقاط مستديرة](assets/images/screenshot-rounded-dots.png) -يتيح التطبيق تصدير ملف SVG للنص المكتوب يمكن تعديله في أي من تطبيقات الرسوم -المتجهية. الضغط على زر ![التصدير](app/assets/images/export.svg) سينزّل الملف. +يتيح التطبيق تصدير ملف SVG للنص المكتوب يمكن تعديله في أي من تطبيقات الرسوم المتجهية. الضغط على زر ![التصدير](app/assets/images/export.svg){:.زر} سينزّل الملف. -يمكن حفظ النص الحالي وكل التنويعات المختارة بضغط زر -![الحفظ](app/assets/images/save.svg)، ويمكن تحميل النص مرة أخرى بضغط زر -![الفتح](app/assets/images/open.svg). +يمكن حفظ النص الحالي وكل التنويعات المختارة بضغط زر ![الحفظ](app/assets/images/save.svg){:.زر}، ويمكن تحميل النص مرة أخرى بضغط زر ![الفتح](app/assets/images/open.svg){:.زر}. -ضغط زر ![المسح](app/assets/images/clear.svg) سيمسح كل النص المكتوب. +ضغط زر ![المسح](app/assets/images/clear.svg){:.زر} سيمسح كل النص المكتوب. ### التنصيب على الأجهزة المحمولة -يعمل التطبيق حتى بدون اتصال بالإنترنت، كما يدعم متصفحات الهواتف المحمولة -والشاشات الصغيرة. يمكن أيضا تنصيب التطبيق على الأجهزة المحمولة للوصول له آسرع -دون الحاجة لفتح المتصفح. +يعمل التطبيق حتى بدون اتصال بالإنترنت، كما يدعم متصفحات الهواتف المحمولة والشاشات الصغيرة. يمكن أيضا تنصيب التطبيق على الأجهزة المحمولة للوصول له أسرع دون الحاجة لفتح المتصفح. -على أجهزة أندرويد، افتح [صفحة التطبيق][4] في متصفح «جوجل كروم»، ثم اذهب إلى -القائمة واختر __الإضافة إلى الشاشة الرئيسية__، وستظهر نافذة لإضافة التطبيق إلى -الشاشة الرئيسية: +على أجهزة أندرويد، افتح [صفحة التطبيق][4] في متصفح «جوجل كروم»، ثم اذهب إلى القائمة واختر **الإضافة إلى الشاشة الرئيسية**، وستظهر نافذة لإضافة التطبيق إلى الشاشة الرئيسية: ![التنصيب على أجهزة أندرويد](./assets/images/install-android-1-ar.png#install) ![التنصيب على أجهزة أندرويد](./assets/images/install-android-2-ar.png#install) -على أجهزة أبل المحمولة، افتح [صفحة التطبيق][4] في متصفح «سافاري» ثم انقر على -أيقونة التنزيل، ثم __إضافة إلى الصفحة الرئيسية__، وستظهر نافذة لإضافة التطبيق -إلى الصفحة الرئيسية: +على أجهزة أبل المحمولة، افتح [صفحة التطبيق][4] في متصفح «سافاري» ثم انقر على أيقونة التنزيل، ثم **إضافة إلى الصفحة الرئيسية**، وستظهر نافذة لإضافة التطبيق إلى الصفحة الرئيسية: ![التنصيب على أجهزة أبل](./assets/images/install-ios-1-ar.png#install) ![التنصيب على أجهزة أبل](./assets/images/install-ios-2-ar.png#install) ## خصائص الخط -يسعى الخط إلى الالتزام بالقواعد التي وضعها الأستاذ محمد عبد القادر، ومن هذا أن -المسافات بين الحروف، سواء متصلة أو منفصلة، وكذلك المسافات بين الكلمات حوالي نصف -سمك الجزء الصاعد من حرف الألف. لا يفرِّق الخط إذا كانت المسافات بين الحروف أو بين -الكلمات. إدراج أكثر من مسافة (مسطرة المسافات) يزيد المسافة بين الحروف. +يسعى الخط إلى الالتزام بالقواعد التي وضعها الأستاذ محمد عبد القادر، ومن هذا أن المسافات بين الحروف، سواء متصلة أو منفصلة، وكذلك المسافات بين الكلمات حوالي نصف سمك الجزء الصاعد من حرف الألف. لا يفرِّق الخط إذا كانت المسافات بين الحروف أو بين الكلمات. إدراج أكثر من مسافة (مسطرة المسافات) يزيد المسافة بين الحروف. ![لقطة شاشة توضح المسافات بين الحروف](assets/images/screenshot-spacing.png) -صممت أشكال الحروف المستخدمة مبدئيا في الخط لتتناغم مع بعضها، لكن بعض من تنويعات -الحروف الإضافية تحتاج حرصًا في استخدامها. فمثلا، الياء الراجعة قد تتداخل مع -الحروف السابقة عليها إذا كانت نازلة عن السطر، لذا ينبغي تفادي استخدامها في هذه -الحالة. يحاول الخط التصرف في بعض هذه الحالات، لكن قد لا يكون هذا ممكنا في كل -الحالات. +صممت أشكال الحروف المستخدمة مبدئيا في الخط لتتناغم مع بعضها، لكن بعض من تنويعات الحروف الإضافية تحتاج حرصًا في استخدامها. فمثلا، الياء الراجعة قد تتداخل مع الحروف السابقة عليها إذا كانت نازلة عن السطر، لذا ينبغي تفادي استخدامها في هذه الحالة. يحاول الخط التصرف في بعض هذه الحالات، لكن قد لا يكون هذا ممكنا في كل الحالات. ![لقطة شاشة يظهر فيها تداخل بعض الحروف](assets/images/screenshot-clash.png) ## المشاكل -بُنِي هذا الخط باستخدام بعض من تقنيات أوبن تيب المتقدمة التي قد لا تدعمها كل -البرمجيات بنفس الدرجة، وقد يتسبب هذا في أن يظهر الخط معيبا على بعض التطبيقات. +بُنِي هذا الخط باستخدام بعض من تقنيات أوبن تيب المتقدمة التي قد لا تدعمها كل البرمجيات بنفس الدرجة، وقد يتسبب هذا في أن يظهر الخط معيبا على بعض التطبيقات. -أداء التطبيق يحتاج إلى تحسين، لذا يفضل عدم استخدام نصوص طويلة عليه إذ قد يؤدي -هذا إلى تجمد المتصفح. لا يدعم التطبيق أكثر من سطر في الوقت الحالي، ولا يمكن -كتابة إلا سطر واحد فقط في كل مرة. +أداء التطبيق يحتاج إلى تحسين، لذا يفضل عدم استخدام نصوص طويلة عليه إذ قد يؤدي هذا إلى تجمد المتصفح. لا يدعم التطبيق أكثر من سطر في الوقت الحالي، ولا يمكن كتابة إلا سطر واحد فقط في كل مرة. [كوفي]: https://ar.wikipedia.org/wiki/خط_كوفي [محمد عبد القادر]: https://ar.wikipedia.org/wiki/محمد_عبد_القادر_عبد_الله_(خطاط) diff --git a/docs/assets/css/style.scss b/docs/assets/css/style.scss index 1d5006a..ea05203 100644 --- a/docs/assets/css/style.scss +++ b/docs/assets/css/style.scss @@ -135,6 +135,16 @@ img { max-width: 100%; } +img.button, +img.زر { + max-width: revert; + background-color: #D9D9D9; + border: none; + padding: 6px 8px; + vertical-align: text-bottom; + filter: invert(1); +} + #sitedesigner { font-size: 60%; color: grey; diff --git a/docs/index.md b/docs/index.md index f05d7ea..23ee562 100644 --- a/docs/index.md +++ b/docs/index.md @@ -5,99 +5,61 @@ layout: default language: en-US direction: ltr --- -_Qahiri_ is a [Kufic][1] typeface based on the modernized and regularized old -manuscript Kufic calligraphy style of the late master of Arabic calligraphy -[_Mohammad Abdul Qadir_][2]. +_Qahiri_ is a [Kufic][1] typeface based on the modernized and regularized old manuscript Kufic calligraphy style of the late master of Arabic calligraphy [_Mohammad Abdul Qadir_][2]. -Following the convention of naming Kufic styles after the cities they appeared -in, _Qahiri_ (قاهري) is named after the city of Cairo, Egypt (القاهرة). +Following the convention of naming Kufic styles after the cities they appeared in, _Qahiri_ (قاهري) is named after the city of Cairo, Egypt (القاهرة). -_Qahiri_ is a free and open source project, any one is welcomed to use and -modify it under the terms of the [version 1.1 of SIL Open Font License][5]. +_Qahiri_ is a free and open source project, any one is welcomed to use and modify it under the terms of the [version 1.1 of SIL Open Font License][5]. ## The app -The font provides many alternate shapes for many of its glyphs, which should be -usable in any OpenType-savvy application. But since many apps have poor -OpenType support, or bad UI, or don’t allow controlling features for single -glyphs, _Qahiri_ comes with a web application that provides easy access to glyph -alternates. +The font provides many alternate shapes for many of its glyphs, which should be usable in any OpenType-savvy application. But since many apps have poor OpenType support, or bad UI, or don’t allow controlling features for single glyphs, _Qahiri_ comes with a web application that provides easy access to glyph alternates. -Visit the app [web page][4] and type Arabic in the text area. Below the text -will appear the alternates of the character before the text cursor (the gray -bar). Clicking on an alternate form will cause it to be used instead of the -current form: +Visit the app [web page][4] and type Arabic in the text area. Below the text will appear the alternates of the character before the text cursor (the gray bar). Clicking on an alternate form will cause it to be used instead of the current form: ![Screen shot of the app](assets/images/screenshot.png) The slider and the input box next to it control the text size. -There are two buttons that control the dots, the ![remove -dots](app/assets/images/remove-dots.svg) button will remove all the dots, to -get a dot-less version of the text resembling early Kufic manuscripts. +There are two buttons that control the dots, the ![remove dots](app/assets/images/remove-dots.svg){:.button} button will remove all the dots, to get a dot-less version of the text resembling early Kufic manuscripts. ![Screenshot with no dots](assets/images/screenshot-dotless.png) -The ![rounded dots](app/assets/images/round-dots.svg) button, on the other -hand, replaces the default rectangular dots with more familiar rounded dots. +The ![rounded dots](app/assets/images/round-dots.svg){:.button} button, on the other hand, replaces the default rectangular dots with more familiar rounded dots. ![Screenshot with rounded dots](assets/images/screenshot-rounded-dots.png) -The app allows exporting SVG file that can be further modified in any vector -graphics application. Pressing ![export](app/assets/images/export.svg) button -will download the SVG. +The app allows exporting SVG file that can be further modified in any vector graphics application. Pressing ![export](app/assets/images/export.svg){:.button} button will download the SVG. -The current text with the selected alternates can be saved by pressing the -![save](app/assets/images/save.svg) button, and can be loaded again any time in -the app using the ![open](app/assets/images/open.svg) button. +The current text with the selected alternates can be saved by pressing the ![save](app/assets/images/save.svg) button, and can be loaded again any time in the app using the ![open](app/assets/images/open.svg){:.button} button. -Pressing the ![clear](app/assets/images/clear.svg) button will delete all the -text. +Pressing the ![clear](app/assets/images/clear.svg){:.button} button will delete all the text. ### Installing on mobile devices -The application works also offline, and supports mobile browsers and small -screens. It is also possible to add the application to the home screen for -quick access without opining the browser. +The application works also offline, and supports mobile browsers and small screens. It is also possible to add the application to the home screen for quick access without opining the browser. -On Android devices, open the [application web page][4] in _Google Chrome_ and -go to the menu, click on __Add to Home screen__ and you will be prompted to add -the application to your home screen: +On Android devices, open the [application web page][4] in _Google Chrome_ and go to the menu, click on __Add to Home screen__ and you will be prompted to add the application to your home screen: ![Installing on Android](./assets/images/install-android-1-en.png#install) ![Installing on Android](./assets/images/install-android-2-en.png#install) -On iOS devices, open the [application web page][4] in _Safari_, click on the -download icon, then on __Add to Home Screen__ and you will be prompted to add -the application to your home screen: +On iOS devices, open the [application web page][4] in _Safari_, click on the download icon, then on __Add to Home Screen__ and you will be prompted to add the application to your home screen: ![Installing on iOS](./assets/images/install-ios-1-en.png#install) ![Installing on iOS](./assets/images/install-ios-2-en.png#install) ## Font features -The font tries to remain faithful to the rules laid out by _Mohammad -Abdul Qadir_, and one aspect of that is spacing. The space between letters, -connected or not, as well as between words is always about half the thickness -of vertical stems. There is distinction between inter-word and inter-letter -spacing. Inserting more than one space character will increase the inter-word -spacing. +The font tries to remain faithful to the rules laid out by _Mohammad Abdul Qadir_, and one aspect of that is spacing. The space between letters, connected or not, as well as between words is always about half the thickness of vertical stems. There is distinction between inter-word and inter-letter spacing. Inserting more than one space character will increase the inter-word spacing. ![Screenshot showing spacing](assets/images/screenshot-spacing.png) -The letter-forms used by default are designed to work together in harmony, but -some of the alternate forms should be selected with care. For example, -_returning ya’_ can clash with preceding letters with descenders and should be -avoided in such cases. The font will try to solve clashes in such cases, but -this does not always work. +The letter-forms used by default are designed to work together in harmony, but some of the alternate forms should be selected with care. For example, _returning ya’_ can clash with preceding letters with descenders and should be avoided in such cases. The font will try to solve clashes in such cases, but this does not always work. ![Screenshot showing clashing letters](assets/images/screenshot-clash.png) ## Issues -The font is built using some advanced OpenType techniques that are not equally -supported by software, and this might result in the font being broken in -certain applications. +The font is built using some advanced OpenType techniques that are not equally supported by software, and this might result in the font being broken in certain applications. -Performance of the application is also far from being optimal, so pasting large -amounts of text should be avoided. Also it does not support multiple line, it -works with one line at a time. +Performance of the application is also far from being optimal, so pasting large amounts of text should be avoided. Also it does not support multiple line, it works with one line at a time. [1]: https://en.wikipedia.org/wiki/Kufic [2]: https://ar.wikipedia.org/wiki/محمد_عبد_القادر_عبد_الله_(خطاط)