eng-rtl-and-bidi-layout

Apply RTL and Bidi text handling to Hifz Companion app UI components.

Updated Jun 17, 2026
One-click install
npx skills add https://github.com/zakariaf/Hifz-Companion --skill eng-rtl-and-bidi-layout
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: eng-rtl-and-bidi-layout
Source: https://github.com/zakariaf/Hifz-Companion/tree/main/.claude/skills/eng-rtl-and-bidi-layout
Command: npx skills add https://github.com/zakariaf/Hifz-Companion --skill eng-rtl-and-bidi-layout

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill addresses the complexities of building RTL and Bidi-aware layouts in the Hifz Companion app, ensuring proper text direction, mirroring, and formatting across various languages.

Core Features & Use Cases

  • RTL/Bidi Support: Correctly handles right-to-left and bidirectional text for languages like Arabic, Persian, and Kurdish.
  • Directional Icon Mirroring: Automatically mirrors directional icons based on text direction.
  • Bidi Isolation: Isolates mixed-script runs to prevent layout errors.
  • Locale-Specific Formatting: Handles numerals and dates according to the locale.
  • Use Case: When designing the user interface for the Hifz Companion app, use this Skill to ensure that text, icons, and other UI elements are correctly displayed for languages with different text directions.

Quick Start

Activate the eng-rtl-and-bidi-layout skill in the context of the Hifz Companion app's UI design.

Frequently Asked Questions about eng-rtl-and-bidi-layout

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I handle RTL layout and Bidi text direction in a mobile app UI?

To handle RTL layout and Bidi text direction, you need to manage UI component mirroring, isolate mixed-script text runs, and apply locale-specific formatting. This ensures right-to-left languages like Arabic and Persian display correctly.

What is Bidi isolation and when do I need it for RTL localization?

Bidi isolation prevents layout errors by separating mixed-script text runs within a bidirectional string. You need Bidi isolation during UI localization when right-to-left text is mixed with left-to-right scripts to maintain proper rendering.

How do I mirror directional icons based on text direction?

Mirroring directional icons based on text direction requires checking the active locale settings and automatically flipping UI elements. This ensures directional icons align correctly with the right-to-left text flow.

Does this RTL layout approach support locale-specific formatting for numerals and dates?

Yes, this RTL layout approach supports locale-specific formatting for numerals and dates. It adjusts formatting based on active locale settings to ensure right-to-left text direction and UI components display accurately.

What is the best way to apply RTL and Bidi text handling across multiple languages?

The best way to apply RTL and Bidi text handling across multiple languages is to manage layout, icon mirroring, and formatting centrally based on locale settings. This ensures UI elements display correctly for languages with different text directions.

Why does my mixed Arabic and English text break my UI layout?

Mixed Arabic and English text breaks UI layouts due to improper Bidi isolation of mixed-script runs. Applying correct RTL and Bidi text handling based on locale settings isolates these runs to prevent layout errors.