How can I make the content in my index.md file right-to-left (RTL)?

Question

I want to change the content direction to RTL to accommodate Arabic text. How can I achieve this?

I have a Markdown file named index.md that contains content for a webpage. This content includes titles, descriptions, and other textual elements in both Arabic and English. I would like to change the direction of this content to be right-to-left (RTL) to properly display the Arabic text.

I've already included some CSS within the Markdown file to attempt this, but it doesn't seem to be working as expected. The CSS includes setting the direction property to rtl and the text-align property to right. However, I'm encountering issues with this approach, and I'm seeking guidance on how to effectively make the entire content RTL.

Additionally, I've provided the code from my index.md file for reference. The file contains front matter with metadata, including titles and descriptions, and the content itself with various sections.

I appreciate any assistance in ensuring that the Arabic content in my Markdown file is displayed correctly in RTL format.

Here's the code in my index.md:

---
layout: home
title: توثيق الانظمة
titleTemplate: قسم الانظمة والدعم الفني
    
hero:
  name:  توثيق الانظمة
  text:  قسم الانظمة والدعم الفني

  tagline: تجد هنا كل ما تحتاجه لحل مشاكلك في القسم
  actions:
    - theme: brand
      text: ابدأ من هنا
      link: /home
    - theme: alt
      text: رابط المشروع
      link: https://github.com/RoqaiaRF/docs
  # image:
  #   src: /images/logo.png

features:
  - icon: 
    title: انغمس في دروس أنظمة تكنولوجيا المعلومات
    details: امتحن نفسك في دليل شامل لأنظمة مختلفة داخل قسم تكنولوجيا المعلومات. قم بإنشاء وثائق مفصلة بسهولة تبسط المفاهيم المعقدة.
    
  - icon: 
    title: استكشف مزايا تكنولوجيا المعلومات
    details: اكتشف تجربة تكنولوجيا المعلومات الاستثنائية مع إطلاق الأنظمة السريعة والتحديثات السريعة والتكامل السلس للوحدات الإضافية المتقدمة.

  - icon: ☑️
    title: تخصيص بالابتكار
    details: أضف الابتكار إلى وثائقك. ادمج بنية ومكونات Vue مباشرة أو قم بإنشاء سمات فريدة باستخدام Vue لعرض الأنظمة بأسلوبك الخاص.

  - icon: 
    title: استمتع بفهم سريع
    details: سهل فهم المعقدات. حقق فهمًا سريعًا من خلال شروحات مباشرة، مما يضمن فهمًا سهلاً لأنظمة تكنولوجيا المعلومات المعقدة.
---
<style>
:root {
  --vp-home-hero-name-color: transparent;
  --vp-home-hero-name-background: -webkit-linear-gradient(120deg, #BDBDBD 30%, #6699cc);

  --vp-home-hero-image-background-image: linear-gradient(-45deg, #BDBDBD 50%, #ebedf3 50%);
  --vp-home-hero-image-filter: blur(40px);
}

@media (min-width: 640px) {
  :root {
    --vp-home-hero-image-filter: blur(56px);
  }
}

@media (min-width: 960px) {
  :root {
    --vp-home-hero-image-filter: blur(72px);
  }
}
</style>

How can I make the content in my index.md file right-to-left (RTL)?

0 Answers0