LEARN

Responsive layouts, RTL and print

Adapt existing components to their available space, document direction and output medium while retaining native HTML behaviour.

Source-preview availability

These refinements and the new utility classes are unreleased additions in the source and documentation build. Published 1.2.1 archives and npm files remain unchanged. Build compilation does not establish browser or accessibility validation; tests for this update are deferred.

Use an explicit container boundary

Put responsive on a separate full-width wrapper inside a parent with an established width. It creates the named inline-size container re-layout. Descendant components can then respond to that width, including in a narrow dashboard region on a wide screen.

  • grid cols-2 and grid cols-3 use one column below 40rem of wrapper width.
  • grid cols-3 uses two columns from 40rem to below 60rem.
  • Below 24rem, toolbars fill and stack their child groups; card footer rows stack their actions.
  • Navigation rails become wrapping horizontal navigation below 40rem.

Outside this wrapper, existing intrinsic layouts and viewport breakpoints continue to apply. Unsupported browsers keep those fallbacks. A component cannot query its own size: put the wrapper around it. Do not add containment directly to a subgrid card, an inline element or an intrinsically sized shrink-to-fit parent. Nested wrappers use the nearest matching named container.

The complete global/scoped builds include these rules. Modular users need tokens, base, common components and the relevant toolbar/card-pattern/navigation-rail modules. Top-menu mobile/desktop selection remains viewport-based, with wrapping labels and native popover behaviour.

Narrow parent, wide screen

This example limits the parent to 32rem. The two-column grid therefore becomes one column where container queries are supported.

First card

One column in a narrow parent.

Second card

Adapts without resizing the browser.

HTMLSelect text to copy
<div style="max-inline-size: 32rem;">
  <div class="responsive">
    <div class="grid cols-2">
      <article class="card"><h3>First card</h3><p>One column in a narrow parent.</p></article>
      <article class="card"><h3>Second card</h3><p>Adapts without resizing the browser.</p></article>
    </div>
  </div>
</div>

Set direction through HTML

Use dir="rtl" and the correct lang on the document or a local section. Logical spacing, borders, sidebar placement and alignment follow the document direction. Accordion, sidebar and navigation chevrons account for RTL; breadcrumb separators mirror their slant.

Keep content in meaningful DOM order. Use dir="auto" for appropriate user-entered text and bdi for isolated references. A nested dir="ltr" region retains its own direction. Directional SVG icons remain an application choice; logos, media controls and every icon should not be automatically mirrored.

RTL disclosure and mixed text

Native direction applies locally without reversing the DOM or introducing framework attributes.

إعدادات الحساب

يمكنك تحديث معلومات حسابك هنا.

مرجع الحساب: REVA-001

This nested English paragraph keeps its own direction.

HTMLSelect text to copy
<section dir="rtl" lang="ar">
  <div class="accordion">
    <details><summary>إعدادات الحساب</summary><p>يمكنك تحديث معلومات حسابك هنا.</p></details>
  </div>
  <div class="form-group">
    <label for="rtl-name">الاسم</label>
    <input id="rtl-name" name="name" autocomplete="name" dir="auto">
  </div>
  <p>مرجع الحساب: <bdi>REVA-001</bdi></p>
  <p dir="ltr" lang="en">This nested English paragraph keeps its own direction.</p>
</section>

Design a useful printed page

Common print rules remove decorative shadows, use readable light surfaces, wrap code, preserve natural media ratios and request sensible page breaks. Table header/footer groups repeat where the browser supports them. Navigation and popover controls retain their existing print handling; radio-selected panels are all shown by the tabs module.

  • no-print hides an element and its contents on paper.
  • print-only hides an element on screen and restores its normal element display in print.
  • print-links appends HTTP(S) link destinations only inside that opted-in section.

Print-only content is also hidden from assistive technology on screen, so keep information needed by screen readers in ordinary content. Closed disclosures are not automatically expanded. Long tables, user-selected margins and page sizes remain browser/application concerns; CSS page-break requests are not pagination guarantees.

Native controls and accessible states

Required labels, hints and errors are explicit text. Native required, disabled, readonly and browser validation remain in control. Invalid-field keyboard outlines follow the error colour; disabled controls use system colours in forced-colour mode. Read-only fields have a subdued surface and dashed border.

Native range, file, colour, date and time controls retain their browser interaction and pickers. CSS improves sizing and file-button presentation; it does not calculate outputs, upload files, validate on the server or announce errors.

visually-hidden provides an accessible label without visible layout. Focusable elements using it are revealed on focus, including when a descendant receives focus. Use a visible label when possible; hide decorative content with aria-hidden rather than supplying an unnecessary accessible label.

Native form examples · Complete error associations · Behaviour and accessibility