Accessibility Settings
Dynamic type scaling powered by Pretext — all layouts recalculate instantly without DOM measurement
Live Preview
Heading 1
Height: 0px, Lines: 0Patterns in Nature
Heading 2
Height: 0px, Lines: 0Understanding Ecosystem Relationships
Heading 3
Height: 0px, Lines: 0Treaty Territories of Saskatchewan
Body Paragraph
Height: 0px, Lines: 0Saskatchewan has several distinct ecosystems. The southern prairies feature grasslands with bison, prairie dogs, and hawks. The central parklands mix grassland and forest. The boreal forest in the north is home to moose, wolves, and black bears. The Canadian Shield in the far north has rocky terrain, lakes, and caribou herds. Each ecosystem has unique food webs and biodiversity.
Chat Bubble (shrink-wrap width)
Width: 0pxCan you explain the difference between a food chain and a food web? I understand that a food chain shows one path, but how does a food web connect everything together?
Notification (2-line truncation)
Truncated: noNew Assignment
Ms. Johnson posted a new assignment: 'Ecosystem Field Journal' — Due Friday. Students will observe and document three examples of organism interactions in their local environment, including at least one producer-consumer relationship.
Full text: 234 chars. Truncation point shifts as font size changes.
Dashboard Card (auto-height, no clipping)
Height: 48pxWeekly Progress
You completed 4 chapters this week across Mathematics and Science. Your quiz average improved to 87%. Keep up the great work!
How it works
Pretext measures text layout using pure math — no DOM measurement, no ResizeObserver hacks, no flash of broken layout. When you change the font size, every height, line count, truncation point, and shrink-wrap width recalculates instantly. The CSS variable --ww-font-scale propagates to all components, and Pretext recomputes all measurements in a single synchronous pass.