getLTRStyles

⚠️ Version Recommendation: Always install and use the latest version of rtl-text-tools (npm install rtl-text-tools@latest). While this specific feature was introduced in an earlier version, the latest release includes crucial bug fixes, better edge-case handling, and improved legacy browser compatibility. Avoid pinning your project to an old version just to use this function.

Returns a ready-to-use CSS style object to trigger proper LTR (Left-to-Right) rendering on any container element. This is incredibly useful when you need to isolate LTR content such as URLs, code snippets, or English text inside a larger RTL layout, ensuring that punctuation and text flow don't visually break.

📝 Syntax

getLTRStyles(): { direction: string; unicodeBidi: string }

Parameters

None.

Returns

• object : An object containing the CSS properties required for LTR layout:

  {
    direction: 'ltr',
    unicodeBidi: 'embed'
  }

💡 Examples

React Inline Styles

Apply it directly to a React component's style prop to force LTR rendering for specific elements inside an RTL page:

import { getLTRStyles } from 'rtl-text-tools';

function TrackingNumber({ code }) {
  return (
    <span style={getLTRStyles()}>
      {code} {/* e.g., "TRK-12345-XYZ" */}
    </span>
  );
}

Vanilla JavaScript

You can easily apply these styles to any DOM element using Object.assign or by setting properties individually:

import { getLTRStyles } from 'rtl-text-tools';

const urlElement = document.getElementById('website-link');

// Using Object.assign
Object.assign(urlElement.style, getLTRStyles());

// Or setting manually
const styles = getLTRStyles();
urlElement.style.direction = styles.direction;
urlElement.style.unicodeBidi = styles.unicodeBidi;

⚙️ Technical Details & Compatibility

• Pure Function: This function has no side effects and takes no arguments. It simply returns a static object, making it extremely fast and predictable.
• Legacy Compatibility: The CSS properties direction and unicode-bidi have been supported in Internet Explorer since IE6. This means the returned styles will work flawlessly across all browsers, from legacy IE to modern Chrome, Firefox, and Safari.
• Why unicodeBidi: 'embed'? The embed value creates a new embedding level, ensuring that the content inside the container is treated as strictly LTR. This isolates the element from the surrounding RTL context, preventing the browser's bidirectional algorithm from flipping punctuation or reordering the text.

📜 Version History

• v1.0.0: Added getLTRStyles (alongside getRTLStyles) to provide ready-to-use CSS style objects for React and vanilla JS.