We now support mobile devices and small screens

README.md

@@ -9,9 +9,7 @@ _Qahiri_ is a free and open source project, any one is welcomed to use and
 modify it under the terms of the [version 3 of GNU Affero General Public
 License][5].
 
-The app
--------
-
+## 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
@@ -49,9 +47,25 @@ the app using the ![open](app/assets/images/open.svg) button.
 Pressing the ![clear](app/assets/images/clear.svg) button will delete all the
 text.
 
-Font features
--------------
+### Installing on mobile devices
+The application works also offline, and supports mobile browsers and small
+screens. It is also possioble 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:
+
+![Installing on Android](./assets/images/install-android-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:
 
+![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
@@ -69,22 +83,15 @@ this does not always work.
 
 ![Screenshot showing clashing letters](assets/images/screenshot-clash.png)
 
-Issues
-------
-
+## 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 application does not currently work well on small screens, and also needs a
-physical keyboard as on-screen keyboard on mobile devices does not trigger due
-to the way it is built.
-
 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/محمد_عبد_القادر_عبد_الله_(خطاط)
 [3]: https://github.com/alif-type/qahiri/releases/latest

arabic.md

@@ -12,9 +12,7 @@ title: قاهري
 «قاهري» مشروع حر مفتوح المصدر، ويرحب بالجميع لاستخدامه وتعديله تحت بنود
 [الإصدارة الثالثة من رخصة أفيرو جنو العمومية العامة][5].
 
-التطبيق
--------
-
+## التطبيق
 يحتوي الخط على تنويعات لكثير من حروفه، ويفترض أن يتاح للمستخدم اختيار هذه
 التنويعات في أي تطبيق يدعم خطوط أوبن تيب. للأسف تعاني كثير من التطبيقات من ضعف
 دعمها لهذه الخصائص (بعضها لا يتيح اختيار التنويعات، والبعض الآخر يتيحه لكن
@@ -50,9 +48,25 @@ title: قاهري
 
 ضغط زر ![المسح](app/assets/images/clear.svg) سيمسح كل النص المكتوب.
 
-خصائص الخط
-----------
+### التنصيب على الأجهزة المحمولة
+يعمل التطبيق حتى بدون اتصال بالإنترنت، كما يدعم متصفحات الهواتف المحمولة
+والشاشات الصغيرة. يمكن أيضا تنصيب التطبيق على الأجهزة المحمولة للوصول له آسرع
+دون الحاجة لفتح المتصفح.
+
+على أجهزة أندرويد، افتح [صفحة التطبيق][4] في متصفح «جوجل كروم»، ثم اذهب إلى
+القائمة واختر __الإضافة إلى الشاشة الرئيسية__، وستظهر نافذة لإضافة التطبيق إلى
+الشاشة الرئيسية:
+
+![التنصيب على أجهزة أندرويد](./assets/images/install-android-ar.png#install)
+
+على أجهزة أبل المحمولة، افتح [صفحة التطبيق][4] في متصفح «سافاري» ثم انقر على
+أيقونة التنزيل، ثم __إضافة إلى الصفحة الرئيسية__، وستظهر نافذة لإضافة التطبيق
+إلى الصفحة الرئيسية:
 
+![التنصيب على أجهزة أبل](./assets/images/install-ios-1-ar.png#install)
+![التنصيب على أجهزة أبل](./assets/images/install-ios-2-ar.png#install)
+
+## خصائص الخط
 يسعى الخط إلى الالتزام بالقواعد التي وضعها الأستاذ محمد عبد القادر، ومن هذا أن
 المسافات بين الحروف، سواء متصلة أو منفصلة، وكذلك المسافات بين الكلمات حوالي نصف
 سمك الجزء الصاعد من حرف الألف. لا يفرِّق الخط إذا كانت المسافات بين الحروف أو بين
@@ -68,17 +82,10 @@ title: قاهري
 
 ![لقطة شاشة يظهر فيها تداخل بعض الحروف](assets/images/screenshot-clash.png)
 
-المشاكل
--------
-
+## المشاكل
 بُنِي هذا الخط باستخدام بعض من تقنيات أوبن تيب المتقدمة التي قد لا تدعمها كل
 البرمجيات بنفس الدرجة، وقد يتسبب هذا في أن يظهر الخط معيبا على بعض التطبيقات.
 
-
-لا يعمل التطبيق حاليا بصورة مناسبة على الشاشات الصغيرة، كما أنه يتطلب لوحة
-مفاتيح حقيقية لأن لوحة المفاتيح داخل الشاشة في الأجهزة المحمولة لا تظهر بسبب
-الطريقة التي بُني بها التطبيق.
-
 أداء التطبيق يحتاج إلى تحسين، لذا يفضل عدم استخدام نصوص طويلة عليه إذ قد يؤدي
 هذا إلى تجمد المتصفح. لا يدعم التطبيق أكثر من سطر في الوقت الحالي، ولا يمكن
 كتابة إلا سطر واحد فقط في كل مرة.

assets/css/style.scss

@@ -68,6 +68,10 @@ section img {
  vertical-align: text-bottom;
 }
 
+section img[src*="#install"] {
+ width: 220px;
+}
+
 @media print, screen and (max-width: 960px) {
  header {
   padding-inline-end: 320px;
@@ -85,6 +89,12 @@ section img {
  }
 }
 
+@media print, screen and (max-width: 700px) {
+ section img[src*="#install"] {
+  width: 45%;
+ }
+}
+
 @media print, screen and (max-width: 480px) {
  p {
   text-align: start;