How to Configure Strict CSS Inset-Block and Inset-Inline Anchor Offsets in Google Chrome

Modern responsive web layouts increasingly prioritize internationalization and writing-mode agility, ensuring components adapt gracefully whether viewed in left-to-right (LTR) English or right-to-left (RTL) Arabic and Hebrew. In the CSS Anchor Positioning specification supported by Google Chrome, combining logical offset properties—specifically inset-block and inset-inline—with the anchor() function allows developers to bind floating tooltips, menus, and flyouts to reference anchors using strict flow-relative coordinates rather than rigid physical offsets.

Logical Versus Physical Anchor Offsets

Traditional positioning relies on physical coordinates such as top, bottom, left, and right. When tethering a floating menu to an anchor button, declaring physical coordinates requires duplicate override rules whenever an interface switches between writing modes or vertical Japanese text orientations.

By declaring flow-relative logical properties with anchor functions—such as inset-block-start: anchor(end) or inset-inline-start: anchor(start)—the browser rendering engine automatically resolves the appropriate physical screen axis based on the active writing-mode and direction.

Configuring Strict Logical Anchor Positioning

To tether a floating actions palette to an anchor button using strict logical coordinates:

/* Anchor reference element */
.international-action-trigger {
  anchor-name: --action-menu-anchor;
}

/* Logical anchored floating panel */
.logical-anchored-flyout {
  position: fixed;
  position-anchor: --action-menu-anchor;
  
  /* Logical block axis: places panel immediately after anchor */
  inset-block-start: anchor(end);
  
  /* Logical inline axis: aligns inline start with anchor start */
  inset-inline-start: anchor(start);
  
  /* Dynamic logical sizing */
  min-inline-size: anchor-size(inline);
  
  margin-block-start: 8px;
  background-color: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  padding: 12px;
}

When rendered under standard horizontal LTR writing, inset-block-start evaluates to the physical bottom edge, and inset-inline-start maps to the left edge. When switched to RTL (dir="rtl"), the menu automatically aligns to the right edge without modifying stylesheet declarations.

Handling Fallbacks with Logical Directional Flipping

To ensure anchored elements adapt when colliding with viewport edges across different writing modes, combine logical insets with position-try-fallbacks:

.logical-anchored-flyout {
  position: fixed;
  position-anchor: --action-menu-anchor;
  inset-block-start: anchor(end);
  inset-inline-start: anchor(start);
  position-try-fallbacks: flip-block, flip-inline;
}

The flip-block keyword inverts placement along the block axis (moving from block-end to block-start) while preserving logical alignment.

Auditing Logical Anchors in Chrome DevTools

Google Chrome DevTools provides targeted visual feedback for logical anchor evaluation:

1. Open DevTools (F12) and select the Elements panel.
2. Select the anchored element in the DOM tree.
3. In the Computed styles panel, inspect the resolved physical properties (e.g. top and left) alongside their originating logical declarations.
4. Toggle dir="rtl" on the document root in the DOM tree to observe the instantaneous flip in inline offset vectors.