How to Inspect and Control CSS text-align-last in Safari Web Inspector

In digital publishing, multi-column magazine layouts, and high-end editorial typography, justifying blocks of text (text-align: justify) creates clean, structured margins along both the left and right edges. However, standard justification introduces a significant typographic challenge: the final line of a justified paragraph or a line immediately preceding a forced line break (<br>) typically contains far fewer words. If forced to stretch across the full column width, large, unsightly gaps—known in typography as “rivers of white space”—appear, severely impairing readability. The CSS Text Module Level 3 standardises text-align-last, empowering web authors to explicitly control the alignment of the final line in a block element. In Safari on macOS and iOS, WebKit implements full support for text-align-last. Using Safari Web Inspector, developers can inspect computed alignment, debug line-breaking cascade rules, and fine-tune editorial paragraph flows in real time.

Syntax and Behaviour of CSS text-align-last in WebKit

The text-align-last CSS property describes how the last line of a block or a line ending with a forced line break is aligned within its inline formatting context. WebKit supports the following values:

• auto (Initial Value): Follows the default browser heuristic. If text-align is set to justify and text-align-last is auto, the final line aligns according to the text direction (left for left-to-right text, right for right-to-left text). If text-align is anything other than justify, the final line inherits the parent text-align value.
• start: Aligns the final line to the starting edge of the inline axis (left in LTR scripts, right in RTL scripts like Arabic or Hebrew). Ideal for maintaining clean paragraph endings.
• end: Aligns the final line to the ending edge of the inline axis. Frequently utilised in financial statements, poetry, or signature blocks.
• left / right: Enforces absolute physical alignment regardless of document writing mode or script direction.
• center: Centers the final line horizontally within the container. Highly effective in pull quotes, centered epigraphs, and promotional hero subtitles.
• justify: Forces the final line to justify across the full width of the container, stretching word spaces regardless of character count.

Enabling Safari Web Inspector and Selecting Text Blocks

To inspect and control final line text alignment in Safari:

1. Confirm Developer Features are active by visiting Safari > Settings > Advanced (or Preferences) and verifying that Show features for web developers is checked.
2. Right-click the paragraph, blockquote, or editorial text container in the browser and select Inspect Element.
3. The Web Inspector opens with the chosen DOM node highlighted within the Elements tree view.

Inspecting Alignment in the Styles and Computed Panes

Review how WebKit calculates line alignment using the inspector sidebar:

• Styles Pane: Review all active cascade rules matching the element. Look for declarations of text-align and text-align-last. If text-align-last is struck through, inspect parent containers for higher-specificity selectors or inherited overrides.
• Computed Pane: Switch to the Computed tab and search for align. Expanding text-align-last reveals the effective resolved keyword passed to Core Text for paragraph layout.

Live-Testing and Customising Final Line Alignment

Safari Web Inspector allows real-time interactive adjustments directly within the rule declaration block. Double-click the style block in the Styles tab to test different typographic treatments:

/* Example: Justified editorial text with clean, left-aligned terminal lines */
.editorial-column {
    text-align: justify;
    text-align-last: start;
    hyphens: auto;
    line-height: 1.6;
}

/* Example: Centered terminal line on pull quotes and epigraphs */
.pull-quote {
    text-align: justify;
    text-align-last: center;
    font-style: italic;
    max-width: 600px;
    margin: 0 auto;
}

/* Example: Financial disclosure with right-aligned signature line */
.legal-disclosure {
    text-align: justify;
    text-align-last: end;
}

Immediately observe how WebKit recalculates line bounds and adjusts word spacing across the container in real time.

Programmatically Querying text-align-last via JavaScript

To verify the effective final line alignment dynamically within client-side scripts or automation suites, execute commands in the Web Inspector Console:

// Select the target editorial container
const column = document.querySelector('.editorial-column');

// Retrieve computed typography style
const computed = window.getComputedStyle(column);

// Log the active text-align-last property
console.log('Final Line Alignment:', computed.textAlignLast);

Handling Bidirectional Text and Writing Mode Considerations

When designing multilingual and responsive web applications, keep the following WebKit behaviours in mind:

• Start vs Left in Bidirectional Layouts: Always prefer logical keywords (start and end) over physical keywords (left and right). When rendering Arabic, Hebrew, or Persian text with dir="rtl", start automatically aligns the final line to the right, preserving correct typographic convention.
• Interaction with Forced Breaks (<br>): text-align-last applies not only to the last line of the entire paragraph, but also to any line immediately preceding a manual <br> element. If mid-paragraph lines unexpectedly align to the center or right, inspect the markup for unwanted line break tags.
• Pairing with CSS Hyphenation: For optimal justification in Safari, pair text-align: justify and text-align-last: start with hyphens: auto. Hyphenation prevents wide, awkward word spacing across narrow column widths, ensuring smooth typographic rhythm.