Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. CSS
Webdesign

إنشاء جانبية النص باستخدام "وضع الكتابة" خاصية CSS بسهولة

by
Difficulty:IntermediateLength:ShortLanguages:

Arabic (العربية/عربي) translation by Syarah Amelia Khairil (you can also view the original English article)

في هذا تلميح سريع أنا ذاهب لتظهر لك كيفية عرض النص على صفحة ويب قيد التشغيل من أعلى إلى أسفل، بدلاً من اليسار إلى اليمين (أو اليسار إلى اليمين). هناك نهج اثنين، أحدهما أفضل من الآخر، لذلك دعونا القفز في ونلقي نظرة!

كيفية استخدام المغلق "وضع كتابة"

نهج #1: التحويلات CSS

إذا كنت معتادًا على CSS ، فربما تعتقد بشكل غريزي أن التحويل سيكون أفضل طريقة للتعامل مع هذه المشكلة ، ولكن دعني أوضح لك سبب عدم كونها مثالية. سنبدأ ببعض المحتويات (بعض العناوين والفقرات) ، ثم سنطبق تحويلًا ، مع تحويل أصل ، بحيث يتم تدويره من النقطة الصحيحة ، ثم إزاحة لإبقائه على الشاشة:

يعمل هذا الأسلوب من حيث تناوب على النص، ولكن لا يتأثر تدفق المستندات، حيث يجلس h2 في حالتنا الآن على رأس المحتوى الموجود أدناه. لا يزال، فإنه يعطينا نتيجة مجردة باردة جداً.

نهج #2: الوضع-كتابة CSS

وسيبقي نهجنا الثاني تدفق الوثيقة حتى يظل وفيا لإبعاد h2، بغض النظر عن اتجاه النص. سنستخدم الخاصية وضع الكتابة، مثل هذا:

في هذه الحالة لقد أعطينا أنها قيمة عمودي-rl، الذي ينطبق على اتجاه عرض العمودي، واتجاه نص من اليمين إلى اليسار. ألق نظرة:

أفضل بكثير. عليك أيضا أن نلاحظ أن المؤشر يتغير أيضا، الذي لا يحدث مع CSS تحويل.

css cursor

اتجاه تدفق كتلة

ربما لاحظتم أن استخدمنا قيمة rl (اليمين إلى اليسار) بينما اعتدنا على قراءة اللاتينية البرنامج النصي من اليسار إلى اليمين. ولكن هذا سبب أننا لقد تغير "اتجاه تدفق كتلة". إذا نعطي لدينا h2 قيمة ارتفاع محدد، سوف تشاهد النص التفاف وعليك أن تدرك أن في هذه الحالة فعلا نحتاج خطوط لقراءة من يمين الصفحة إلى اليسار:

هذا يؤدي إلى لنا الحاجة إلى تعريف من جميع هذه المحاذاة التي بت بحاجة إلى تدفق وفي أي من الاتجاهين. البرامج النصية المستندة إلى اللاتينية تتدفق من أعلى إلى أسفل (وهذا هو اتجاه تدفق كتلة). فيما يلي نص على اليسار إلى اليمين (وهذا هو اتجاه تدفق مضمنة). وشخصياتهم وقد خط أساس في الجزء السفلي مع الإشارة إلى الأعلى (وهذا هو اتجاه الحرف). أحب هذا:

مخطوطات أخرى، مثل المستندة إلى اللغة العربية، وعلى أساس هان (مثل الصينية واليابانية)، والمستندة إلى المنغولية، يمكن عرض النص باستخدام هذه التدفقات الثلاثة في أي خليط من الاتجاهات.

البرامج النصية وأسلوب الكتابة

مواصفات "وضع كتابة" صممت لدعم جميع البرامج النصية المختلفة وأنظمة الكتابة في العالم. نحن ذكرنا الأنظمة المستندة إلى منغوليا، على سبيل المثال، أي أنها يتم عرضها عمودياً، لكن تدفق من اليسار إلى اليمين.

وضع كتابة القيم الأخرى، التي يمكنك استخدامها اليوم، وتشمل:

  • عمودي-lr فيها النص يمتد عمودياً ولكن يبدأ إلى يسار الحاوية قيد التشغيل الصحيح.
  • أفقي-السل التي لا يزال فيها النص الأفقي، ولكن التدفقات من أعلى إلى أسفل. (سيكون لديك لاحظ) وهذا هو السلوك الافتراضي.

اتجاه النص

هنا واحد أكثر شيء نلقي نظرة على: قصيدة صينية، استخدام وضع الكتابة الرأسية-rl. هو طرح محتواه الحق، وبذلك يمكنك البدء في يمين الصفحة وقراءة نحو اليسار. ولكن ما ربما ستلاحظ أن الأحرف التي لا تزال موجهة نحو تستقيم. الأحرف اللاتينية سيكون موجها بشكل مختلف مع هذه القواعد نفس الدقيق. هذا متعمد:

'يقوم Unicode Standard بتعيين خاصية لكل حرف ويمكن للمتصفحات استخدام هذا لتحديد الاتجاه الافتراضي لحرف معين.'' –  W3C

يمكنك مواصلة تكييف اتجاه الأحرف باستخدام خاصية اتجاه النص.

الاستنتاج

يحتوي وضع كتابة CSS على دعم ممتاز للمتصفح في وقت كتابة هذا التقرير ، على الرغم من أن بعض جوانبه لا تزال قيد التطوير. يمكن استخدام كل ما تراه في هذا البرنامج التعليمي في الإنتاج الآن.

سواء أكنت تستخدم هذا للحصول على نتائج عملية أو جمالية ، فدعنا نرى ما فعلت في التعليقات!

روابط مفيدة

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.