RTL

Learn how to enable support for right-to-left text in Halfmoon across our layout, components, and utilities.

Overview #

Halfmoon uses the excellent RTLCSS project (opens in new tab) to generate halfmoon.rtl.css from halfmoon.css. The default page direction in CSS is left-to-right (LTR). This is the correct choice for most languages, including English. However, if you want to use a right-to-left language (such as Arabic or Hebrew), you will need to enable RTL on your page.

Required HTML #

There are two strict requirements for enabling RTL in Halfmoon-powered pages:

  1. Set dir="rtl" on the <html> element.
  2. Add an appropriate lang attribute, like lang="ar", on the <html> element.

From there, you'll need to include the RTL version of our CSS. For example, here's the stylesheet for our compiled and minified CSS with RTL enabled:

HTML 
<!-- Halfmoon RTL CSS -->
<link href="https://cdn.jsdelivr.net/npm/halfmoon@2.0.1/css/halfmoon.rtl.min.css" rel="stylesheet" integrity="sha256-tt1NcLyedCLVBjHJhc4FWaaqG1zYPFuumyLYv6dQHOQ=" crossorigin="anonymous">

Required HTML Starter template #

You can see the above requirements reflected in this modified RTL starter template.

HTML 
<!doctype html>
<html dir="rtl" lang="ar">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>قالب المبتدئين - Halfmoon</title>

    <!-- Halfmoon RTL CSS -->
    <link href="https://cdn.jsdelivr.net/npm/halfmoon@2.0.1/css/halfmoon.rtl.min.css" rel="stylesheet" integrity="sha256-tt1NcLyedCLVBjHJhc4FWaaqG1zYPFuumyLYv6dQHOQ=" crossorigin="anonymous">
  </head>
  <body>
    <h1>مرحبا بالعالم</h1>

    <!-- Option 1: Bootstrap JS bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js" integrity="sha384-BBtl+eGJRgqQAUMxJ7pMwbEyER4l1g+O15P+16Ep7Q9Q+zqX6gSbd85u4mG4QzX+" crossorigin="anonymous"></script>
    -->
  </body>
</html>

Additional resources #

The following are links to additional resources that you can use (each link will open in a new tab):

Up next
Color modes

Help us grow

Our main goal is to make Halfmoon the go-to framework for building websites, dashboards and tools. If you believe in our mission, consider becoming a sponsor and help us grow.

You can email us directly if you have any queries. We are always happy to answer.

Subscribe for updates

We will notify you when the framework gets a substantial update. No spam ever.

Follow us on Twitter so that you can stay updated that way.