Getting started

Right-to-Left (RTL)

Right-to-Left (RTL) language support is a crucial feature for websites targeting audiences in regions where languages like Arabic, Hebrew, Urdu, or Persian are used. The Cartzilla includes built-in RTL support that can be easily enabled or disabled based on your requirements.

Enabling RTL support

Enabling RTL support in the Cartzilla template is straightforward and can be done through the environment variables. Follow these steps:

  1. Locate the root directory of your Cartzilla project
  2. Create and modify the .env file:
    echo NEXT_PUBLIC_ENABLE_RTL=true >> .env
npm run dev
  3. Restart your development server:
    npm run dev

Once the server restarts, your application will render in RTL mode, with all content aligned from right to left.

Disabling RTL support

If you want to revert to the default Left-to-Right (LTR) layout:

  1. Open the .env file in the root directory
  2. Set the NEXT_PUBLIC_ENABLE_RTL value to false:
    NEXT_PUBLIC_ENABLE_RTL=false
  3. Restart your development server:
    npm run dev

How RTL support works

The Cartzilla template implements RTL support through:

  1. Environment variables: The NEXT_PUBLIC_ENABLE_RTL environment variable controls whether RTL mode is active.
  2. Dynamic HTML direction: When RTL is enabled, the <html> element receives a dir="rtl" attribute that instructs browsers to render content from right to left.
  3. RTL stylesheets: The template's Sass (SCSS) source files are first compiled to CSS in LTR format. Then, using the RTLCSS PostCSS tool, these compiled CSS files are automatically converted from Left-to-Right (LTR) to Right-to-Left (RTL) format, properly handling alignment, padding, margins, and other directional properties.
  4. Component awareness: UI components are designed to respect the current text direction and adjust their layouts accordingly.

Tips for working with RTL

When developing or customizing your Cartzilla template with RTL support, keep these tips in mind:

  1. Test thoroughly: Always test your site in both RTL and LTR modes to ensure layouts render correctly in both directions.
  2. Use logical properties: When adding custom CSS, prefer logical properties (like margin-inline-start) over directional ones (like margin-left) to ensure your styles work well in both directions.
  3. Icon mirroring: Some icons may need to be mirrored in RTL mode (like arrows).
  4. Text alignment: Remember that text-align: left in LTR becomes text-align: right in RTL. The template's RTL stylesheets handle this automatically.
  5. Production builds: For production, decide which direction you want to support and set the environment variable accordingly before building:
    # For RTL
NEXT_PUBLIC_ENABLE_RTL=true npm run build

# For LTR
NEXT_PUBLIC_ENABLE_RTL=false npm run build
Top