DR-017automated

Rule of Alignment

Related peers share intentional visual anchors.

Markdown · Rule index (JSON)

Requirement

Declare the peers and the edge or center they should share for the current task and layout. Keep their rendered anchors within the project's tolerance. Scope separate columns, rows, nested groups, and responsive states separately; unrelated content does not need a common anchor.

Why

A stable anchor makes a declared relationship visible and gives scanning a predictable path. This extends DR-006's comparison guidance into an explicit composition contract. The measurement is a Viewrule convention, not an empirical threshold for attractive or usable layouts.

Computationally falsifiable

alignment-residual measures the configured left, right, top, bottom, horizontal-center, or vertical-center coordinate of at least two declared items per group. Its residual is the greatest absolute distance from the group's median anchor, in CSS px. A residual greater than maxResidual fails. The reported anchors and residual expose how the contract was violated; missing groups or insufficient peers cannot establish alignment. Existing align instead limits the full edge spread; its tolerance is not interchangeable with this median residual.

Application

Align the value edges in one comparison column, or the centers of equal-role controls in one toolbar. Author independent groups for distinct columns rather than counting every page anchor as accidental complexity.

Exception

Indentation may encode a hierarchy, and offset placement may distinguish roles. Declare those relationships rather than flattening them to obtain a pass. Symmetry is not required.

Human judgment

Choose which peers belong together, which anchor supports reading, and what tolerance is appropriate. Border-box coordinates do not measure text baselines, optical alignment, semantic relatedness, or overall composition quality. Inspect clipping, overlap, transformed shapes, and actual text separately. Measurement reference.

Examples

The pair isolates this rule. A good example is not approval of the entire interface.

Composition, measured in context

One small dispatch task per pair. The same invented data, readable type, and content order; one controlled layout change.

Good for this task

Bad for this task

These authored relationships are measurable; relevance, grouping, priority, and appropriate whitespace remain human judgments. No symmetry or universal aesthetic score is required. Open one variant at 800 × 900 and 1280 × 900 to inspect viewport-growth yield.

Enforcement

automated is the strongest mechanism Viewrule expects for the complete rule. Partial checks can still provide supporting evidence without proving the whole requirement.

Detection and enforcement details →