Fix buttons on the website

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/محمد_عبد_القادر_عبد_الله_(خطاط)

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;