RTL Layout Test Toggle

WHAT IT DOES

RTL Layout Test Toggle scans the current page for layout structure and applies a temporary RTL (Right-to-Left) transformation to test the page's internationalization readiness. It inverts the page's direction using CSS transforms and direction properties, toggling between LTR and RTL modes. The floating panel shows a toggle button to switch between LTR and RTL, visual indicators of layout issues (overflow, misalignment, overlapping), and a list of elements that may need RTL-specific styling. A summary of RTL compatibility issues includes missing dir attributes, hardcoded left/right positioning, and text alignment problems. One-click export of RTL test results as JSON or text is provided for developers. Elements that break or overflow in RTL mode are highlighted for easy identification.

WHERE IT RUNS

Works on any web page, including dashboards, content-heavy sites, forms, and complex UI layouts. The script applies RTL transformation and detects layout issues in real-time. It works best on pages with structured layouts and can help identify internationalization issues in any web application.

HOW TO USE

The panel displays a toggle button to switch between LTR and RTL modes. Click "Switch to RTL" to apply the transformation and automatically scan for layout issues. The summary shows total issues, critical issues, and warnings. The issues list displays each problem with the element selector and issue description. Suggestions for fixing common RTL issues are provided below the summary. Use "Rescan Issues" to re-run the detection after manual fixes. Export the report as text for documentation or as JSON for developer handoff. Customize the highlight color and ignore specific selectors in the settings section.

MECHANISM — CSS DIRECTION TRANSFORMATION WITH LAYOUT ANALYSIS

The script applies RTL transformation by setting direction: rtl on the html and body elements, and adding a style that enforces RTL direction on all child elements. It then scans the page for common RTL compatibility issues. The issue detection engine checks for hardcoded left/right positioning, text-align: left, margin-left/right with fixed values, float properties, and elements that overflow their containers. It also checks for missing dir attributes on form inputs and interactive elements. Each issue is categorized by type (positioning, alignment, overflow, spacing, missing_attr, float) and severity (critical or warning). The analysis provides actionable suggestions for each issue type, helping developers fix problems efficiently.

THE PANEL

The floating panel is fully draggable and remembers its position per domain. Click the minimize button to collapse it to a small bubble, or press Escape to hide it. The panel automatically adjusts to different screen sizes and can be resized to show more content. All settings, including highlight color and ignore selectors, are saved per domain. The panel integrates smoothly with any page layout using the BGPanel framework, maintaining clean separation from page content.

PLEASE NOTE

This script requires the free BotGentz extension to run. It does not send any data to external servers; all test results and settings remain entirely local to your browser using GM_setValue. The script never reads password fields, hidden inputs, or file inputs. It stores only layout analysis data and configuration settings. The script applies temporary CSS transformations to the page for testing purposes and does not permanently modify the page. RTL transformation may affect page functionality; use the toggle to restore LTR mode. Data persists across browser sessions and is isolated per browser profile.