Audit TTML style and region references as separate links

The useful distinctions

• TTML style references identify reusable styling elements.
• A region reference associates content with a region.
• A referential style chain containing a loop is an error.

Build two reference maps

The fictional document defines one style called ink and one region called lower. The paragraph points to both, but the links have different jobs: ink supplies a colour and lower supplies a presentation area. An audit table should therefore distinguish style references from region references instead of collecting every identifier into a single untyped set. A misspelled region name is not repaired by adding a style with the same spelling.

Resolve links before measuring appearance

First verify that IDs are unique and each reference reaches an element of the appropriate kind. Then expand any style-reference chains and check that none loops back to a style already being resolved. Only after that structural work does it make sense to compare computed colours or region geometry. The region in this exercise begins at ten percent horizontally and seventy-five percent vertically and spans eighty by twenty percent of the root area. Those percentages describe geometry, not font scaling or timing. The example is intended to make references inspectable; no renderer has been used to certify its pixels. A later visual review should use the intended profile and viewport while retaining the reference audit as a separate, reproducible result.

Worked example · synthetic

style='ink' resolves to the style element and region='lower' to the region element. Both targets exist. The specified region ends at horizontal 90% and vertical 95% of the root area.

Synthetic text example; no network operation has been performed.

<tt xmlns="http://www.w3.org/ns/ttml"
    xmlns:tts="http://www.w3.org/ns/ttml#styling" xml:lang="en">
  <head>
    <styling><style xml:id="ink" tts:color="white"/></styling>
    <layout><region xml:id="lower" tts:origin="10% 75%" tts:extent="80% 20%"/></layout>
  </head>
  <body><div>
    <p begin="2s" end="4s" style="ink" region="lower">Draw a small circle.</p>
  </div></body>
</tt>

Check the interpretation

• Check ID uniqueness and target element types.
• Detect loops in style-reference chains.
• Treat visual rendering as a separate validation stage.