Read WebVTT cue placement as separate coordinates

The useful distinctions

• The size setting controls the cue box size as a percentage.
• line can use percentage placement rather than a snapped line number.
• position and align describe different aspects of cue layout.

Read one setting at a time

The synthetic cue requests a box eighty percent wide, centered at the fifty-percent horizontal position, with centered text and a percentage line position near the lower part of the viewport. These settings describe layout intentions rather than pixel coordinates. A ledger should keep each field separately so an editor can change the box width without accidentally moving its anchor. The numeric value eighty is not a font size or the percentage of the cue's duration.

Keep the coordinate system explicit

A bare line number and a percentage line value use different positioning modes. Treating line:85% as line number eighty-five would therefore change the meaning before rendering even begins. When reviewing a real file, record writing direction and any vertical setting alongside the placement fields, because they affect how axes are interpreted. The example uses ordinary horizontal text and makes its position alignment explicit with center. A renderer may still apply collision avoidance or encounter different viewport dimensions, so this textual review cannot certify identical pixels across implementations. For an authoring check, first validate setting names and allowed ranges; then inspect an actual rendering in the intended environment if visual equivalence is required.

Worked example · synthetic

size:80% requests the cue box's percentage size. position:50%,center specifies a center-aligned position anchor. line:85% is percentage positioning; none of these values is a pixel count.

Synthetic text example; no network operation has been performed.

WEBVTT

00:00:02.000 --> 00:00:05.000 line:85% position:50%,center size:80% align:center
Place the square on the table.

Check the interpretation

• Keep percent signs when parsing percentage settings.
• Check each setting against its own grammar.
• Inspect rendering separately from syntax validation.