How to Master CSS text-box-trim in Punggol Tuition

When a learner can reproduce a familiar example but a small variation causes confusion, the problem is usually an incomplete model rather than a lack of effort. The fastest useful response is to expose the hidden state and test one boundary at a time.

CSS text-box-trim controls whether extra space around the first and last formatted lines, or around an inline box, is trimmed to selected font metrics. It does not crop glyph shapes into a neat rectangle or replace line-height. Mastery means identifying the formatting context, logical edge, companion text-box-edge metric and fallback before using the property for visual alignment. This guide begins with that mechanism, then develops it through worked traces, deliberate mistakes, explained practice and transfer decisions.

The aim is independent reasoning. A learner should be able to predict behaviour, locate the earliest wrong assumption, use a safe diagnostic procedure and defend a design choice in a new project.

Punggol families can use the guide in short sessions around homework, CCAs and rest. The activities are proposed learning exercises, not claims about a physical branch, timetable, class size, fee, school relationship or guaranteed result.

Use disposable data and repositories, preserve backups, and check version-sensitive details against the official source. Current documentation settles a technical contract; observation and explanation turn that contract into usable knowledge.

Find your next learning step

Choose the route that matches the present difficulty. Use the complete index for a systematic course.

Build the model

Chapters 1-4 . Begin here, then continue after the learner can predict, verify and explain.

Use the core tools

Chapters 5-8 . Begin here, then continue after the learner can predict, verify and explain.

Handle boundaries

Chapters 9-12 . Begin here, then continue after the learner can predict, verify and explain.

Debug and verify

Chapters 13-16 . Begin here, then continue after the learner can predict, verify and explain.

Transfer with judgment

Chapters 17-20 . Begin here, then continue after the learner can predict, verify and explain.

Open the full chapter index . Jump to capstone practice . Use the How Studying Works hub . Read the official documentation

Complete chapter index

Chapters 1-4 . Build the model

The property trims layout space around text
The initial value is none
trim-start affects the logical start edge
trim-end affects the logical end edge

Chapters 5-8 . Use the core tools

trim-both combines start and end
text-box-edge selects the metric
The text-box shorthand couples the two properties
Half-leading comes from line-height distribution

Chapters 9-12 . Handle boundaries

The first and last formatted lines matter
Padding or borders can prevent a block-side effect
Inline boxes use a related but distinct rule
The property does not propagate through every formatting context

Chapters 13-16 . Debug and verify

Multi-column containers trim per column
Fragmentation interacts with box-decoration-break
Overflow remains possible
Printing may protect content from clipping

Chapters 17-20 . Transfer with judgment

Writing modes make start and end logical
Font choice changes the metrics
Progressive enhancement needs a fallback
Mastery is measured across fonts and contexts

CHAPTER 1 OF 20 . Build the model

1. The property trims layout space around text

Back to contents

text-box-trim adjusts the content-box or line-edge relationship using font metrics; it is not a general image crop. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.

The high-value mistake in this chapter is expecting every visible glyph pixel to touch the box edge. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. Turn on outlines and compare box edges with cap, alphabetic and text metrics.

For the The property trims layout space around text chapter on CSS text-box-trim, use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on expecting every visible glyph pixel to touch the box edge. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.

Core worked example

.heading { text-box-trim: trim-both; text-box-edge: cap alphabetic; }

Explained result. The start and end are trimmed to selected metrics while glyph ink may still overhang or vary. Check the boundary as well as the happy path: ask what happens with an empty input, a duplicate or tied value, an unsupported type, a missing path, a NULL, or a second reference to the same object. Only the relevant boundary should be kept; the list is a prompt for judgment, not a demand to force every case into every example.

Four purposeful transfer cases

Case 1: homework dashboard. Predict the rule using a compact heading above an assignment list. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Reasoned route. Begin with “text-box-trim adjusts the content-box or line-edge relationship using font metrics; it is not a general image crop.” Apply this procedure: Turn on outlines and compare box edges with cap, alphabetic and text metrics. The expected mechanism is: The start and end are trimmed to selected metrics while glyph ink may still overhang or vary. For the homework dashboard, add one near-miss that exposes expecting every visible glyph pixel to touch the box edge. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.

Case 2: library card. Contrast the rule using a title aligned with a book-cover thumbnail. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Reasoned route. Begin with “text-box-trim adjusts the content-box or line-edge relationship using font metrics; it is not a general image crop.” Apply this procedure: Turn on outlines and compare box edges with cap, alphabetic and text metrics. The expected mechanism is: The start and end are trimmed to selected metrics while glyph ink may still overhang or vary. For the library card, add one near-miss that exposes expecting every visible glyph pixel to touch the box edge. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.

Case 3: CCA poster. Stress-test the rule using large display text inside a fixed panel. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Reasoned route. Begin with “text-box-trim adjusts the content-box or line-edge relationship using font metrics; it is not a general image crop.” Apply this procedure: Turn on outlines and compare box edges with cap, alphabetic and text metrics. The expected mechanism is: The start and end are trimmed to selected metrics while glyph ink may still overhang or vary. For the CCA poster, add one near-miss that exposes expecting every visible glyph pixel to touch the box edge. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.

Case 4: science chart label. Explain the rule using a short label aligned to a plot edge. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Reasoned route. Begin with “text-box-trim adjusts the content-box or line-edge relationship using font metrics; it is not a general image crop.” Apply this procedure: Turn on outlines and compare box edges with cap, alphabetic and text metrics. The expected mechanism is: The start and end are trimmed to selected metrics while glyph ink may still overhang or vary. For the science chart label, add one near-miss that exposes expecting every visible glyph pixel to touch the box edge. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.

Diagnostic route

Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
Boundary check: create the smallest input that triggers expecting every visible glyph pixel to touch the box edge.
Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
Repair check: use the reversible procedure “Turn on outlines and compare box edges with cap, alphabetic and text metrics.” and record the first changed observation.
Transfer check: repeat the rule in a second context and identify what remains invariant.

A parent does not need to know the final CSS text-box-trim syntax. For this chapter, useful prompts are: “What did you expect from The property trims layout space around text?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing expecting every visible glyph pixel to touch the box edge be made smaller?” The learner, not the parent, should supply the technical explanation.

Practice with an explained answer

Question. Build a tiny photo caption with multiline text beneath an image. Include one ordinary case, one boundary and one deliberate failure caused by expecting every visible glyph pixel to touch the box edge. Predict each result before using a tool, then report the first point where observation differs from prediction.

Answer guide. A strong response starts with the rule: text-box-trim adjusts the content-box or line-edge relationship using font metrics; it is not a general image crop. It shows a trace, not only a final value. The ordinary case should demonstrate “The start and end are trimmed to selected metrics while glyph ink may still overhang or vary.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: Turn on outlines and compare box edges with cap, alphabetic and text metrics. Other data choices are valid when the evidence supports the same causal chain.

Decision and transfer

For The property trims layout space around text, separate the documented CSS text-box-trim mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.

Previous chapter . Contents . Next chapter

CHAPTER 2 OF 20 . Build the model

2. The initial value is none

Back to contents

With text-box-trim:none, first and last line boxes receive no special trimming from this property. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.

The high-value mistake in this chapter is debugging normal line-height spacing as though trim-both were active by default. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. Inspect computed styles and begin from an untrimmed control.

For the The initial value is none chapter on CSS text-box-trim, use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on debugging normal line-height spacing as though trim-both were active by default. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.

Core worked example

.control { text-box-trim: none; }

Explained result. The control preserves ordinary layout behavior and provides a baseline for comparison. Check the boundary as well as the happy path: ask what happens with an empty input, a duplicate or tied value, an unsupported type, a missing path, a NULL, or a second reference to the same object. Only the relevant boundary should be kept; the list is a prompt for judgment, not a demand to force every case into every example.

Four purposeful transfer cases

Case 1: CCA poster. Contrast the rule using large display text inside a fixed panel. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Reasoned route. Begin with “With text-box-trim:none, first and last line boxes receive no special trimming from this property.” Apply this procedure: Inspect computed styles and begin from an untrimmed control. The expected mechanism is: The control preserves ordinary layout behavior and provides a baseline for comparison. For the CCA poster, add one near-miss that exposes debugging normal line-height spacing as though trim-both were active by default. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.

Case 2: science chart label. Stress-test the rule using a short label aligned to a plot edge. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Reasoned route. Begin with “With text-box-trim:none, first and last line boxes receive no special trimming from this property.” Apply this procedure: Inspect computed styles and begin from an untrimmed control. The expected mechanism is: The control preserves ordinary layout behavior and provides a baseline for comparison. For the science chart label, add one near-miss that exposes debugging normal line-height spacing as though trim-both were active by default. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.

Case 3: revision-card stack. Explain the rule using headings with two different fallback fonts. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Reasoned route. Begin with “With text-box-trim:none, first and last line boxes receive no special trimming from this property.” Apply this procedure: Inspect computed styles and begin from an untrimmed control. The expected mechanism is: The control preserves ordinary layout behavior and provides a baseline for comparison. For the revision-card stack, add one near-miss that exposes debugging normal line-height spacing as though trim-both were active by default. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.

Case 4: photo caption. Transfer the rule using multiline text beneath an image. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Reasoned route. Begin with “With text-box-trim:none, first and last line boxes receive no special trimming from this property.” Apply this procedure: Inspect computed styles and begin from an untrimmed control. The expected mechanism is: The control preserves ordinary layout behavior and provides a baseline for comparison. For the photo caption, add one near-miss that exposes debugging normal line-height spacing as though trim-both were active by default. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.

Diagnostic route

Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
Boundary check: create the smallest input that triggers debugging normal line-height spacing as though trim-both were active by default.
Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
Repair check: use the reversible procedure “Inspect computed styles and begin from an untrimmed control.” and record the first changed observation.
Transfer check: repeat the rule in a second context and identify what remains invariant.

A parent does not need to know the final CSS text-box-trim syntax. For this chapter, useful prompts are: “What did you expect from The initial value is none?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing debugging normal line-height spacing as though trim-both were active by default be made smaller?” The learner, not the parent, should supply the technical explanation.

Practice with an explained answer

Question. Build a tiny budget summary tile with a number and label vertically aligned. Include one ordinary case, one boundary and one deliberate failure caused by debugging normal line-height spacing as though trim-both were active by default. Predict each result before using a tool, then report the first point where observation differs from prediction.

Answer guide. A strong response starts with the rule: With text-box-trim:none, first and last line boxes receive no special trimming from this property. It shows a trace, not only a final value. The ordinary case should demonstrate “The control preserves ordinary layout behavior and provides a baseline for comparison.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: Inspect computed styles and begin from an untrimmed control. Other data choices are valid when the evidence supports the same causal chain.

Decision and transfer

For The initial value is none, separate the documented CSS text-box-trim mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.

Previous chapter . Contents . Next chapter

CHAPTER 3 OF 20 . Build the model

3. trim-start affects the logical start edge

Back to contents

On a block container, trim-start trims half-leading at the block-start side of the first formatted line when conditions permit. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.

The high-value mistake in this chapter is calling start the physical top in every writing mode. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. Label block-start for the active writing-mode before judging the result.

For the trim-start affects the logical start edge chapter on CSS text-box-trim, use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on calling start the physical top in every writing mode. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.

Core worked example

.title { text-box-trim: trim-start; text-box-edge: cap alphabetic; }

Explained result. In horizontal writing the visible effect is usually at the top; logical direction controls the formal edge. Check the boundary as well as the happy path: ask what happens with an empty input, a duplicate or tied value, an unsupported type, a missing path, a NULL, or a second reference to the same object. Only the relevant boundary should be kept; the list is a prompt for judgment, not a demand to force every case into every example.

Four purposeful transfer cases

Case 1: revision-card stack. Stress-test the rule using headings with two different fallback fonts. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Reasoned route. Begin with “On a block container, trim-start trims half-leading at the block-start side of the first formatted line when conditions permit.” Apply this procedure: Label block-start for the active writing-mode before judging the result. The expected mechanism is: In horizontal writing the visible effect is usually at the top; logical direction controls the formal edge. For the revision-card stack, add one near-miss that exposes calling start the physical top in every writing mode. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.

Case 2: photo caption. Explain the rule using multiline text beneath an image. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Reasoned route. Begin with “On a block container, trim-start trims half-leading at the block-start side of the first formatted line when conditions permit.” Apply this procedure: Label block-start for the active writing-mode before judging the result. The expected mechanism is: In horizontal writing the visible effect is usually at the top; logical direction controls the formal edge. For the photo caption, add one near-miss that exposes calling start the physical top in every writing mode. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.

Case 3: budget summary tile. Transfer the rule using a number and label vertically aligned. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Reasoned route. Begin with “On a block container, trim-start trims half-leading at the block-start side of the first formatted line when conditions permit.” Apply this procedure: Label block-start for the active writing-mode before judging the result. The expected mechanism is: In horizontal writing the visible effect is usually at the top; logical direction controls the formal edge. For the budget summary tile, add one near-miss that exposes calling start the physical top in every writing mode. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.

Case 4: project status panel. Predict the rule using a badge, heading and body copy. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Reasoned route. Begin with “On a block container, trim-start trims half-leading at the block-start side of the first formatted line when conditions permit.” Apply this procedure: Label block-start for the active writing-mode before judging the result. The expected mechanism is: In horizontal writing the visible effect is usually at the top; logical direction controls the formal edge. For the project status panel, add one near-miss that exposes calling start the physical top in every writing mode. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.

Diagnostic route

Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
Boundary check: create the smallest input that triggers calling start the physical top in every writing mode.
Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
Repair check: use the reversible procedure “Label block-start for the active writing-mode before judging the result.” and record the first changed observation.
Transfer check: repeat the rule in a second context and identify what remains invariant.

A parent does not need to know the final CSS text-box-trim syntax. For this chapter, useful prompts are: “What did you expect from trim-start affects the logical start edge?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing calling start the physical top in every writing mode be made smaller?” The learner, not the parent, should supply the technical explanation.

Practice with an explained answer

Question. Build a tiny project status panel with a badge, heading and body copy. Include one ordinary case, one boundary and one deliberate failure caused by calling start the physical top in every writing mode. Predict each result before using a tool, then report the first point where observation differs from prediction.

Answer guide. A strong response starts with the rule: On a block container, trim-start trims half-leading at the block-start side of the first formatted line when conditions permit. It shows a trace, not only a final value. The ordinary case should demonstrate “In horizontal writing the visible effect is usually at the top; logical direction controls the formal edge.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: Label block-start for the active writing-mode before judging the result. Other data choices are valid when the evidence supports the same causal chain.

Decision and transfer

For trim-start affects the logical start edge, separate the documented CSS text-box-trim mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.

Previous chapter . Contents . Next chapter

CHAPTER 4 OF 20 . Build the model

4. trim-end affects the logical end edge

Back to contents

On a block container, trim-end targets the block-end side of the last formatted line. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.

The high-value mistake in this chapter is trimming the first line when the design problem sits below the final line. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. Outline the box and identify the last formatted line before changing values.

For the trim-end affects the logical end edge chapter on CSS text-box-trim, use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on trimming the first line when the design problem sits below the final line. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.

Core worked example

.caption { text-box-trim: trim-end; text-box-edge: cap alphabetic; }

Explained result. The end-side half-leading of the last formatted line is the target. Check the boundary as well as the happy path: ask what happens with an empty input, a duplicate or tied value, an unsupported type, a missing path, a NULL, or a second reference to the same object. Only the relevant boundary should be kept; the list is a prompt for judgment, not a demand to force every case into every example.

Four purposeful transfer cases

Case 1: budget summary tile. Explain the rule using a number and label vertically aligned. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Reasoned route. Begin with “On a block container, trim-end targets the block-end side of the last formatted line.” Apply this procedure: Outline the box and identify the last formatted line before changing values. The expected mechanism is: The end-side half-leading of the last formatted line is the target. For the budget summary tile, add one near-miss that exposes trimming the first line when the design problem sits below the final line. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.

Case 2: project status panel. Transfer the rule using a badge, heading and body copy. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Reasoned route. Begin with “On a block container, trim-end targets the block-end side of the last formatted line.” Apply this procedure: Outline the box and identify the last formatted line before changing values. The expected mechanism is: The end-side half-leading of the last formatted line is the target. For the project status panel, add one near-miss that exposes trimming the first line when the design problem sits below the final line. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.

Case 3: homework dashboard. Predict the rule using a compact heading above an assignment list. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Reasoned route. Begin with “On a block container, trim-end targets the block-end side of the last formatted line.” Apply this procedure: Outline the box and identify the last formatted line before changing values. The expected mechanism is: The end-side half-leading of the last formatted line is the target. For the homework dashboard, add one near-miss that exposes trimming the first line when the design problem sits below the final line. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.

Case 4: library card. Contrast the rule using a title aligned with a book-cover thumbnail. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Reasoned route. Begin with “On a block container, trim-end targets the block-end side of the last formatted line.” Apply this procedure: Outline the box and identify the last formatted line before changing values. The expected mechanism is: The end-side half-leading of the last formatted line is the target. For the library card, add one near-miss that exposes trimming the first line when the design problem sits below the final line. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.

Diagnostic route

Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
Boundary check: create the smallest input that triggers trimming the first line when the design problem sits below the final line.
Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
Repair check: use the reversible procedure “Outline the box and identify the last formatted line before changing values.” and record the first changed observation.
Transfer check: repeat the rule in a second context and identify what remains invariant.

A parent does not need to know the final CSS text-box-trim syntax. For this chapter, useful prompts are: “What did you expect from trim-end affects the logical end edge?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing trimming the first line when the design problem sits below the final line be made smaller?” The learner, not the parent, should supply the technical explanation.

Practice with an explained answer

Question. Build a tiny homework dashboard with a compact heading above an assignment list. Include one ordinary case, one boundary and one deliberate failure caused by trimming the first line when the design problem sits below the final line. Predict each result before using a tool, then report the first point where observation differs from prediction.

Answer guide. A strong response starts with the rule: On a block container, trim-end targets the block-end side of the last formatted line. It shows a trace, not only a final value. The ordinary case should demonstrate “The end-side half-leading of the last formatted line is the target.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: Outline the box and identify the last formatted line before changing values. Other data choices are valid when the evidence supports the same causal chain.

Decision and transfer

For trim-end affects the logical end edge, separate the documented CSS text-box-trim mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.

Previous chapter . Contents . Next chapter

CHAPTER 5 OF 20 . Use the core tools

5. trim-both combines start and end

Back to contents

trim-both requests the behavior of trim-start and trim-end simultaneously. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.

The high-value mistake in this chapter is treating trim-both as a stronger crop applied to every internal line. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. Test a multiline block and check that internal line spacing still follows line layout.

For the trim-both combines start and end chapter on CSS text-box-trim, use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on treating trim-both as a stronger crop applied to every internal line. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.

Core worked example

.label { text-box-trim: trim-both; text-box-edge: cap alphabetic; }

Explained result. The outer start and end are trimmed; the property does not remove leading between all internal lines. Check the boundary as well as the happy path: ask what happens with an empty input, a duplicate or tied value, an unsupported type, a missing path, a NULL, or a second reference to the same object. Only the relevant boundary should be kept; the list is a prompt for judgment, not a demand to force every case into every example.

Four purposeful transfer cases

Case 1: homework dashboard. Transfer the rule using a compact heading above an assignment list. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Reasoned route. Begin with “trim-both requests the behavior of trim-start and trim-end simultaneously.” Apply this procedure: Test a multiline block and check that internal line spacing still follows line layout. The expected mechanism is: The outer start and end are trimmed; the property does not remove leading between all internal lines. For the homework dashboard, add one near-miss that exposes treating trim-both as a stronger crop applied to every internal line. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.

Case 2: library card. Predict the rule using a title aligned with a book-cover thumbnail. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Reasoned route. Begin with “trim-both requests the behavior of trim-start and trim-end simultaneously.” Apply this procedure: Test a multiline block and check that internal line spacing still follows line layout. The expected mechanism is: The outer start and end are trimmed; the property does not remove leading between all internal lines. For the library card, add one near-miss that exposes treating trim-both as a stronger crop applied to every internal line. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.

Case 3: CCA poster. Contrast the rule using large display text inside a fixed panel. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Reasoned route. Begin with “trim-both requests the behavior of trim-start and trim-end simultaneously.” Apply this procedure: Test a multiline block and check that internal line spacing still follows line layout. The expected mechanism is: The outer start and end are trimmed; the property does not remove leading between all internal lines. For the CCA poster, add one near-miss that exposes treating trim-both as a stronger crop applied to every internal line. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.

Case 4: science chart label. Stress-test the rule using a short label aligned to a plot edge. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Reasoned route. Begin with “trim-both requests the behavior of trim-start and trim-end simultaneously.” Apply this procedure: Test a multiline block and check that internal line spacing still follows line layout. The expected mechanism is: The outer start and end are trimmed; the property does not remove leading between all internal lines. For the science chart label, add one near-miss that exposes treating trim-both as a stronger crop applied to every internal line. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.

Diagnostic route

Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
Boundary check: create the smallest input that triggers treating trim-both as a stronger crop applied to every internal line.
Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
Repair check: use the reversible procedure “Test a multiline block and check that internal line spacing still follows line layout.” and record the first changed observation.
Transfer check: repeat the rule in a second context and identify what remains invariant.

A parent does not need to know the final CSS text-box-trim syntax. For this chapter, useful prompts are: “What did you expect from trim-both combines start and end?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing treating trim-both as a stronger crop applied to every internal line be made smaller?” The learner, not the parent, should supply the technical explanation.

Practice with an explained answer

Question. Build a tiny library card with a title aligned with a book-cover thumbnail. Include one ordinary case, one boundary and one deliberate failure caused by treating trim-both as a stronger crop applied to every internal line. Predict each result before using a tool, then report the first point where observation differs from prediction.

Answer guide. A strong response starts with the rule: trim-both requests the behavior of trim-start and trim-end simultaneously. It shows a trace, not only a final value. The ordinary case should demonstrate “The outer start and end are trimmed; the property does not remove leading between all internal lines.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: Test a multiline block and check that internal line spacing still follows line layout. Other data choices are valid when the evidence supports the same causal chain.

Decision and transfer

For trim-both combines start and end, separate the documented CSS text-box-trim mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.

Previous chapter . Contents . Next chapter

CHAPTER 6 OF 20 . Use the core tools

6. text-box-edge selects the metric

Back to contents

The companion text-box-edge property names the over and under metrics used by trimming. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.

The high-value mistake in this chapter is setting trim-both without deciding which typographic edges express the design. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. Choose metrics from the specification and compare fonts with visible guides.

For the text-box-edge selects the metric chapter on CSS text-box-trim, use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on setting trim-both without deciding which typographic edges express the design. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.

Core worked example

.hero-title { text-box-trim: trim-both; text-box-edge: cap alphabetic; }

Explained result. The block start aligns toward the cap metric and the end toward the alphabetic metric. Check the boundary as well as the happy path: ask what happens with an empty input, a duplicate or tied value, an unsupported type, a missing path, a NULL, or a second reference to the same object. Only the relevant boundary should be kept; the list is a prompt for judgment, not a demand to force every case into every example.

Four purposeful transfer cases

Case 1: CCA poster. Predict the rule using large display text inside a fixed panel. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Reasoned route. Begin with “The companion text-box-edge property names the over and under metrics used by trimming.” Apply this procedure: Choose metrics from the specification and compare fonts with visible guides. The expected mechanism is: The block start aligns toward the cap metric and the end toward the alphabetic metric. For the CCA poster, add one near-miss that exposes setting trim-both without deciding which typographic edges express the design. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.

Case 2: science chart label. Contrast the rule using a short label aligned to a plot edge. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Reasoned route. Begin with “The companion text-box-edge property names the over and under metrics used by trimming.” Apply this procedure: Choose metrics from the specification and compare fonts with visible guides. The expected mechanism is: The block start aligns toward the cap metric and the end toward the alphabetic metric. For the science chart label, add one near-miss that exposes setting trim-both without deciding which typographic edges express the design. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.

Case 3: revision-card stack. Stress-test the rule using headings with two different fallback fonts. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Reasoned route. Begin with “The companion text-box-edge property names the over and under metrics used by trimming.” Apply this procedure: Choose metrics from the specification and compare fonts with visible guides. The expected mechanism is: The block start aligns toward the cap metric and the end toward the alphabetic metric. For the revision-card stack, add one near-miss that exposes setting trim-both without deciding which typographic edges express the design. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.

Case 4: photo caption. Explain the rule using multiline text beneath an image. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Reasoned route. Begin with “The companion text-box-edge property names the over and under metrics used by trimming.” Apply this procedure: Choose metrics from the specification and compare fonts with visible guides. The expected mechanism is: The block start aligns toward the cap metric and the end toward the alphabetic metric. For the photo caption, add one near-miss that exposes setting trim-both without deciding which typographic edges express the design. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.

Diagnostic route

Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
Boundary check: create the smallest input that triggers setting trim-both without deciding which typographic edges express the design.
Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
Repair check: use the reversible procedure “Choose metrics from the specification and compare fonts with visible guides.” and record the first changed observation.
Transfer check: repeat the rule in a second context and identify what remains invariant.

A parent does not need to know the final CSS text-box-trim syntax. For this chapter, useful prompts are: “What did you expect from text-box-edge selects the metric?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing setting trim-both without deciding which typographic edges express the design be made smaller?” The learner, not the parent, should supply the technical explanation.

Practice with an explained answer

Question. Build a tiny CCA poster with large display text inside a fixed panel. Include one ordinary case, one boundary and one deliberate failure caused by setting trim-both without deciding which typographic edges express the design. Predict each result before using a tool, then report the first point where observation differs from prediction.

Answer guide. A strong response starts with the rule: The companion text-box-edge property names the over and under metrics used by trimming. It shows a trace, not only a final value. The ordinary case should demonstrate “The block start aligns toward the cap metric and the end toward the alphabetic metric.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: Choose metrics from the specification and compare fonts with visible guides. Other data choices are valid when the evidence supports the same causal chain.

Decision and transfer

For text-box-edge selects the metric, separate the documented CSS text-box-trim mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.

Previous chapter . Contents . Next chapter

CHAPTER 7 OF 20 . Use the core tools

7. The text-box shorthand couples the two properties

Back to contents

text-box can set text-box-trim and text-box-edge in one declaration; omitted pieces follow shorthand rules rather than every longhand initial. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.

The high-value mistake in this chapter is assuming text-box:cap alphabetic leaves trimming at none. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. Expand the shorthand into longhands during debugging.

For the The text-box shorthand couples the two properties chapter on CSS text-box-trim, use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on assuming text-box:cap alphabetic leaves trimming at none. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.

Core worked example

.hero-title { text-box: trim-both cap alphabetic; }

Explained result. The declaration explicitly requests both-side trimming and the chosen edge metrics. Check the boundary as well as the happy path: ask what happens with an empty input, a duplicate or tied value, an unsupported type, a missing path, a NULL, or a second reference to the same object. Only the relevant boundary should be kept; the list is a prompt for judgment, not a demand to force every case into every example.

Four purposeful transfer cases

Case 1: revision-card stack. Contrast the rule using headings with two different fallback fonts. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Reasoned route. Begin with “text-box can set text-box-trim and text-box-edge in one declaration; omitted pieces follow shorthand rules rather than every longhand initial.” Apply this procedure: Expand the shorthand into longhands during debugging. The expected mechanism is: The declaration explicitly requests both-side trimming and the chosen edge metrics. For the revision-card stack, add one near-miss that exposes assuming text-box:cap alphabetic leaves trimming at none. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.

Case 2: photo caption. Stress-test the rule using multiline text beneath an image. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Reasoned route. Begin with “text-box can set text-box-trim and text-box-edge in one declaration; omitted pieces follow shorthand rules rather than every longhand initial.” Apply this procedure: Expand the shorthand into longhands during debugging. The expected mechanism is: The declaration explicitly requests both-side trimming and the chosen edge metrics. For the photo caption, add one near-miss that exposes assuming text-box:cap alphabetic leaves trimming at none. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.

Case 3: budget summary tile. Explain the rule using a number and label vertically aligned. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Reasoned route. Begin with “text-box can set text-box-trim and text-box-edge in one declaration; omitted pieces follow shorthand rules rather than every longhand initial.” Apply this procedure: Expand the shorthand into longhands during debugging. The expected mechanism is: The declaration explicitly requests both-side trimming and the chosen edge metrics. For the budget summary tile, add one near-miss that exposes assuming text-box:cap alphabetic leaves trimming at none. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.

Case 4: project status panel. Transfer the rule using a badge, heading and body copy. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Reasoned route. Begin with “text-box can set text-box-trim and text-box-edge in one declaration; omitted pieces follow shorthand rules rather than every longhand initial.” Apply this procedure: Expand the shorthand into longhands during debugging. The expected mechanism is: The declaration explicitly requests both-side trimming and the chosen edge metrics. For the project status panel, add one near-miss that exposes assuming text-box:cap alphabetic leaves trimming at none. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.

Diagnostic route

Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
Boundary check: create the smallest input that triggers assuming text-box:cap alphabetic leaves trimming at none.
Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
Repair check: use the reversible procedure “Expand the shorthand into longhands during debugging.” and record the first changed observation.
Transfer check: repeat the rule in a second context and identify what remains invariant.

A parent does not need to know the final CSS text-box-trim syntax. For this chapter, useful prompts are: “What did you expect from The text-box shorthand couples the two properties?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing assuming text-box:cap alphabetic leaves trimming at none be made smaller?” The learner, not the parent, should supply the technical explanation.

Practice with an explained answer

Question. Build a tiny science chart label with a short label aligned to a plot edge. Include one ordinary case, one boundary and one deliberate failure caused by assuming text-box:cap alphabetic leaves trimming at none. Predict each result before using a tool, then report the first point where observation differs from prediction.

Answer guide. A strong response starts with the rule: text-box can set text-box-trim and text-box-edge in one declaration; omitted pieces follow shorthand rules rather than every longhand initial. It shows a trace, not only a final value. The ordinary case should demonstrate “The declaration explicitly requests both-side trimming and the chosen edge metrics.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: Expand the shorthand into longhands during debugging. Other data choices are valid when the evidence supports the same causal chain.

Decision and transfer

For The text-box shorthand couples the two properties, separate the documented CSS text-box-trim mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.

Previous chapter . Contents . Next chapter

CHAPTER 8 OF 20 . Use the core tools

8. Half-leading comes from line-height distribution

Back to contents

For block containers, trimming removes relevant half-leading around boundary lines; it does not redefine the line-height used between lines. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.

The high-value mistake in this chapter is using text-box-trim as a substitute for a coherent line-height scale. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. Measure line-height, font metrics and boundary spacing separately.

For the Half-leading comes from line-height distribution chapter on CSS text-box-trim, use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on using text-box-trim as a substitute for a coherent line-height scale. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.

Core worked example

.title { line-height: 1.4; text-box: trim-both cap alphabetic; }

Explained result. The 1.4 line-height still governs line layout while boundary leading can be trimmed. Check the boundary as well as the happy path: ask what happens with an empty input, a duplicate or tied value, an unsupported type, a missing path, a NULL, or a second reference to the same object. Only the relevant boundary should be kept; the list is a prompt for judgment, not a demand to force every case into every example.

Four purposeful transfer cases

Case 1: budget summary tile. Stress-test the rule using a number and label vertically aligned. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Reasoned route. Begin with “For block containers, trimming removes relevant half-leading around boundary lines; it does not redefine the line-height used between lines.” Apply this procedure: Measure line-height, font metrics and boundary spacing separately. The expected mechanism is: The 1.4 line-height still governs line layout while boundary leading can be trimmed. For the budget summary tile, add one near-miss that exposes using text-box-trim as a substitute for a coherent line-height scale. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.

Case 2: project status panel. Explain the rule using a badge, heading and body copy. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Reasoned route. Begin with “For block containers, trimming removes relevant half-leading around boundary lines; it does not redefine the line-height used between lines.” Apply this procedure: Measure line-height, font metrics and boundary spacing separately. The expected mechanism is: The 1.4 line-height still governs line layout while boundary leading can be trimmed. For the project status panel, add one near-miss that exposes using text-box-trim as a substitute for a coherent line-height scale. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.

Case 3: homework dashboard. Transfer the rule using a compact heading above an assignment list. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Reasoned route. Begin with “For block containers, trimming removes relevant half-leading around boundary lines; it does not redefine the line-height used between lines.” Apply this procedure: Measure line-height, font metrics and boundary spacing separately. The expected mechanism is: The 1.4 line-height still governs line layout while boundary leading can be trimmed. For the homework dashboard, add one near-miss that exposes using text-box-trim as a substitute for a coherent line-height scale. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.

Case 4: library card. Predict the rule using a title aligned with a book-cover thumbnail. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Reasoned route. Begin with “For block containers, trimming removes relevant half-leading around boundary lines; it does not redefine the line-height used between lines.” Apply this procedure: Measure line-height, font metrics and boundary spacing separately. The expected mechanism is: The 1.4 line-height still governs line layout while boundary leading can be trimmed. For the library card, add one near-miss that exposes using text-box-trim as a substitute for a coherent line-height scale. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.

Diagnostic route

Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
Boundary check: create the smallest input that triggers using text-box-trim as a substitute for a coherent line-height scale.
Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
Repair check: use the reversible procedure “Measure line-height, font metrics and boundary spacing separately.” and record the first changed observation.
Transfer check: repeat the rule in a second context and identify what remains invariant.

A parent does not need to know the final CSS text-box-trim syntax. For this chapter, useful prompts are: “What did you expect from Half-leading comes from line-height distribution?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing using text-box-trim as a substitute for a coherent line-height scale be made smaller?” The learner, not the parent, should supply the technical explanation.

Practice with an explained answer

Question. Build a tiny revision-card stack with headings with two different fallback fonts. Include one ordinary case, one boundary and one deliberate failure caused by using text-box-trim as a substitute for a coherent line-height scale. Predict each result before using a tool, then report the first point where observation differs from prediction.

Answer guide. A strong response starts with the rule: For block containers, trimming removes relevant half-leading around boundary lines; it does not redefine the line-height used between lines. It shows a trace, not only a final value. The ordinary case should demonstrate “The 1.4 line-height still governs line layout while boundary leading can be trimmed.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: Measure line-height, font metrics and boundary spacing separately. Other data choices are valid when the evidence supports the same causal chain.

Decision and transfer

For Half-leading comes from line-height distribution, separate the documented CSS text-box-trim mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.

Previous chapter . Contents . Next chapter

CHAPTER 9 OF 20 . Handle boundaries

9. The first and last formatted lines matter

Back to contents

Block-container trimming attaches to the first or last formatted line, not simply the first and last text node in source order. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.

The high-value mistake in this chapter is debugging DOM nodes without identifying generated line boxes. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. Create a minimal block and reveal wraps one width at a time.

For the The first and last formatted lines matter chapter on CSS text-box-trim, use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on debugging DOM nodes without identifying generated line boxes. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.

Core worked example

.card-title { max-inline-size: 18ch; text-box-trim: trim-both; }

Explained result. If the title wraps, the trim edges correspond to the first and final formatted lines of that block. Check the boundary as well as the happy path: ask what happens with an empty input, a duplicate or tied value, an unsupported type, a missing path, a NULL, or a second reference to the same object. Only the relevant boundary should be kept; the list is a prompt for judgment, not a demand to force every case into every example.

Four purposeful transfer cases

Case 1: homework dashboard. Explain the rule using a compact heading above an assignment list. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Reasoned route. Begin with “Block-container trimming attaches to the first or last formatted line, not simply the first and last text node in source order.” Apply this procedure: Create a minimal block and reveal wraps one width at a time. The expected mechanism is: If the title wraps, the trim edges correspond to the first and final formatted lines of that block. For the homework dashboard, add one near-miss that exposes debugging DOM nodes without identifying generated line boxes. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.

Case 2: library card. Transfer the rule using a title aligned with a book-cover thumbnail. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Reasoned route. Begin with “Block-container trimming attaches to the first or last formatted line, not simply the first and last text node in source order.” Apply this procedure: Create a minimal block and reveal wraps one width at a time. The expected mechanism is: If the title wraps, the trim edges correspond to the first and final formatted lines of that block. For the library card, add one near-miss that exposes debugging DOM nodes without identifying generated line boxes. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.

Case 3: CCA poster. Predict the rule using large display text inside a fixed panel. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Reasoned route. Begin with “Block-container trimming attaches to the first or last formatted line, not simply the first and last text node in source order.” Apply this procedure: Create a minimal block and reveal wraps one width at a time. The expected mechanism is: If the title wraps, the trim edges correspond to the first and final formatted lines of that block. For the CCA poster, add one near-miss that exposes debugging DOM nodes without identifying generated line boxes. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.

Case 4: science chart label. Contrast the rule using a short label aligned to a plot edge. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Reasoned route. Begin with “Block-container trimming attaches to the first or last formatted line, not simply the first and last text node in source order.” Apply this procedure: Create a minimal block and reveal wraps one width at a time. The expected mechanism is: If the title wraps, the trim edges correspond to the first and final formatted lines of that block. For the science chart label, add one near-miss that exposes debugging DOM nodes without identifying generated line boxes. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.

Diagnostic route

Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
Boundary check: create the smallest input that triggers debugging DOM nodes without identifying generated line boxes.
Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
Repair check: use the reversible procedure “Create a minimal block and reveal wraps one width at a time.” and record the first changed observation.
Transfer check: repeat the rule in a second context and identify what remains invariant.

A parent does not need to know the final CSS text-box-trim syntax. For this chapter, useful prompts are: “What did you expect from The first and last formatted lines matter?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing debugging DOM nodes without identifying generated line boxes be made smaller?” The learner, not the parent, should supply the technical explanation.

Practice with an explained answer

Question. Build a tiny photo caption with multiline text beneath an image. Include one ordinary case, one boundary and one deliberate failure caused by debugging DOM nodes without identifying generated line boxes. Predict each result before using a tool, then report the first point where observation differs from prediction.

Answer guide. A strong response starts with the rule: Block-container trimming attaches to the first or last formatted line, not simply the first and last text node in source order. It shows a trace, not only a final value. The ordinary case should demonstrate “If the title wraps, the trim edges correspond to the first and final formatted lines of that block.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: Create a minimal block and reveal wraps one width at a time. Other data choices are valid when the evidence supports the same causal chain.

Decision and transfer

For The first and last formatted lines matter, separate the documented CSS text-box-trim mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.

Previous chapter . Contents . Next chapter

CHAPTER 10 OF 20 . Handle boundaries

10. Padding or borders can prevent a block-side effect

Back to contents

At a requested side, intervening non-zero padding or border means block-container trimming has no effect there. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.

The high-value mistake in this chapter is adding top padding for spacing and then blaming the font when trim-start appears absent. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. Remove the side decoration in a reduced test and place spacing on an outer wrapper.

For the Padding or borders can prevent a block-side effect chapter on CSS text-box-trim, use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on adding top padding for spacing and then blaming the font when trim-start appears absent. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.

Core worked example

.inner { padding-block-start: 0; border-block-start: 0; text-box-trim: trim-start; }

Explained result. With no intervening start padding or border, the trimming condition can apply. Check the boundary as well as the happy path: ask what happens with an empty input, a duplicate or tied value, an unsupported type, a missing path, a NULL, or a second reference to the same object. Only the relevant boundary should be kept; the list is a prompt for judgment, not a demand to force every case into every example.

Four purposeful transfer cases

Case 1: CCA poster. Transfer the rule using large display text inside a fixed panel. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Reasoned route. Begin with “At a requested side, intervening non-zero padding or border means block-container trimming has no effect there.” Apply this procedure: Remove the side decoration in a reduced test and place spacing on an outer wrapper. The expected mechanism is: With no intervening start padding or border, the trimming condition can apply. For the CCA poster, add one near-miss that exposes adding top padding for spacing and then blaming the font when trim-start appears absent. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.

Case 2: science chart label. Predict the rule using a short label aligned to a plot edge. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Reasoned route. Begin with “At a requested side, intervening non-zero padding or border means block-container trimming has no effect there.” Apply this procedure: Remove the side decoration in a reduced test and place spacing on an outer wrapper. The expected mechanism is: With no intervening start padding or border, the trimming condition can apply. For the science chart label, add one near-miss that exposes adding top padding for spacing and then blaming the font when trim-start appears absent. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.

Case 3: revision-card stack. Contrast the rule using headings with two different fallback fonts. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Reasoned route. Begin with “At a requested side, intervening non-zero padding or border means block-container trimming has no effect there.” Apply this procedure: Remove the side decoration in a reduced test and place spacing on an outer wrapper. The expected mechanism is: With no intervening start padding or border, the trimming condition can apply. For the revision-card stack, add one near-miss that exposes adding top padding for spacing and then blaming the font when trim-start appears absent. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.

Case 4: photo caption. Stress-test the rule using multiline text beneath an image. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Reasoned route. Begin with “At a requested side, intervening non-zero padding or border means block-container trimming has no effect there.” Apply this procedure: Remove the side decoration in a reduced test and place spacing on an outer wrapper. The expected mechanism is: With no intervening start padding or border, the trimming condition can apply. For the photo caption, add one near-miss that exposes adding top padding for spacing and then blaming the font when trim-start appears absent. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.

Diagnostic route

Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
Boundary check: create the smallest input that triggers adding top padding for spacing and then blaming the font when trim-start appears absent.
Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
Repair check: use the reversible procedure “Remove the side decoration in a reduced test and place spacing on an outer wrapper.” and record the first changed observation.
Transfer check: repeat the rule in a second context and identify what remains invariant.

A parent does not need to know the final CSS text-box-trim syntax. For this chapter, useful prompts are: “What did you expect from Padding or borders can prevent a block-side effect?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing adding top padding for spacing and then blaming the font when trim-start appears absent be made smaller?” The learner, not the parent, should supply the technical explanation.

Practice with an explained answer

Question. Build a tiny budget summary tile with a number and label vertically aligned. Include one ordinary case, one boundary and one deliberate failure caused by adding top padding for spacing and then blaming the font when trim-start appears absent. Predict each result before using a tool, then report the first point where observation differs from prediction.

Answer guide. A strong response starts with the rule: At a requested side, intervening non-zero padding or border means block-container trimming has no effect there. It shows a trace, not only a final value. The ordinary case should demonstrate “With no intervening start padding or border, the trimming condition can apply.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: Remove the side decoration in a reduced test and place spacing on an outer wrapper. Other data choices are valid when the evidence supports the same causal chain.

Decision and transfer

For Padding or borders can prevent a block-side effect, separate the documented CSS text-box-trim mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.

Previous chapter . Contents . Next chapter

On an inline box, the property trims its content box to the metric selected by text-box-edge. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.

The high-value mistake in this chapter is copying a block-container explanation to inline content without checking box behavior. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. Compare display:inline and display:block examples with outlines.

For the Inline boxes use a related but distinct rule chapter on CSS text-box-trim, use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on copying a block-container explanation to inline content without checking box behavior. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.

Core worked example

.badge-text { display:inline; text-box: trim-both cap alphabetic; }

Explained result. The inline content box is aligned to the requested metrics rather than trimming first and last block lines. Check the boundary as well as the happy path: ask what happens with an empty input, a duplicate or tied value, an unsupported type, a missing path, a NULL, or a second reference to the same object. Only the relevant boundary should be kept; the list is a prompt for judgment, not a demand to force every case into every example.

Four purposeful transfer cases

Case 1: revision-card stack. Predict the rule using headings with two different fallback fonts. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Reasoned route. Begin with “On an inline box, the property trims its content box to the metric selected by text-box-edge.” Apply this procedure: Compare display:inline and display:block examples with outlines. The expected mechanism is: The inline content box is aligned to the requested metrics rather than trimming first and last block lines. For the revision-card stack, add one near-miss that exposes copying a block-container explanation to inline content without checking box behavior. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.

Case 2: photo caption. Contrast the rule using multiline text beneath an image. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Reasoned route. Begin with “On an inline box, the property trims its content box to the metric selected by text-box-edge.” Apply this procedure: Compare display:inline and display:block examples with outlines. The expected mechanism is: The inline content box is aligned to the requested metrics rather than trimming first and last block lines. For the photo caption, add one near-miss that exposes copying a block-container explanation to inline content without checking box behavior. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.

Case 3: budget summary tile. Stress-test the rule using a number and label vertically aligned. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Reasoned route. Begin with “On an inline box, the property trims its content box to the metric selected by text-box-edge.” Apply this procedure: Compare display:inline and display:block examples with outlines. The expected mechanism is: The inline content box is aligned to the requested metrics rather than trimming first and last block lines. For the budget summary tile, add one near-miss that exposes copying a block-container explanation to inline content without checking box behavior. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.

Case 4: project status panel. Explain the rule using a badge, heading and body copy. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Reasoned route. Begin with “On an inline box, the property trims its content box to the metric selected by text-box-edge.” Apply this procedure: Compare display:inline and display:block examples with outlines. The expected mechanism is: The inline content box is aligned to the requested metrics rather than trimming first and last block lines. For the project status panel, add one near-miss that exposes copying a block-container explanation to inline content without checking box behavior. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.

Diagnostic route

Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
Boundary check: create the smallest input that triggers copying a block-container explanation to inline content without checking box behavior.
Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
Repair check: use the reversible procedure “Compare display:inline and display:block examples with outlines.” and record the first changed observation.
Transfer check: repeat the rule in a second context and identify what remains invariant.

A parent does not need to know the final CSS text-box-trim syntax. For this chapter, useful prompts are: “What did you expect from Inline boxes use a related but distinct rule?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing copying a block-container explanation to inline content without checking box behavior be made smaller?” The learner, not the parent, should supply the technical explanation.

Practice with an explained answer

Question. Build a tiny project status panel with a badge, heading and body copy. Include one ordinary case, one boundary and one deliberate failure caused by copying a block-container explanation to inline content without checking box behavior. Predict each result before using a tool, then report the first point where observation differs from prediction.

Answer guide. A strong response starts with the rule: On an inline box, the property trims its content box to the metric selected by text-box-edge. It shows a trace, not only a final value. The ordinary case should demonstrate “The inline content box is aligned to the requested metrics rather than trimming first and last block lines.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: Compare display:inline and display:block examples with outlines. Other data choices are valid when the evidence supports the same causal chain.

Decision and transfer

For Inline boxes use a related but distinct rule, separate the documented CSS text-box-trim mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.

Previous chapter . Contents . Next chapter

CHAPTER 12 OF 20 . Handle boundaries

12. The property does not propagate through every formatting context

Back to contents

The specification says the behavior does not apply to or propagate through flex, grid or table formatting contexts in the same way. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.

The high-value mistake in this chapter is setting trimming on a distant flex ancestor and expecting a nested heading to inherit the effect. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. Apply the property to the actual text-bearing block or inline box and inspect its context.

For the The property does not propagate through every formatting context chapter on CSS text-box-trim, use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on setting trimming on a distant flex ancestor and expecting a nested heading to inherit the effect. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.

Core worked example

.flex-item > h2 { text-box: trim-both cap alphabetic; }

Explained result. Targeting the heading avoids relying on propagation through the flex formatting context. Check the boundary as well as the happy path: ask what happens with an empty input, a duplicate or tied value, an unsupported type, a missing path, a NULL, or a second reference to the same object. Only the relevant boundary should be kept; the list is a prompt for judgment, not a demand to force every case into every example.

Four purposeful transfer cases

Case 1: budget summary tile. Contrast the rule using a number and label vertically aligned. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Reasoned route. Begin with “The specification says the behavior does not apply to or propagate through flex, grid or table formatting contexts in the same way.” Apply this procedure: Apply the property to the actual text-bearing block or inline box and inspect its context. The expected mechanism is: Targeting the heading avoids relying on propagation through the flex formatting context. For the budget summary tile, add one near-miss that exposes setting trimming on a distant flex ancestor and expecting a nested heading to inherit the effect. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.

Case 2: project status panel. Stress-test the rule using a badge, heading and body copy. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Reasoned route. Begin with “The specification says the behavior does not apply to or propagate through flex, grid or table formatting contexts in the same way.” Apply this procedure: Apply the property to the actual text-bearing block or inline box and inspect its context. The expected mechanism is: Targeting the heading avoids relying on propagation through the flex formatting context. For the project status panel, add one near-miss that exposes setting trimming on a distant flex ancestor and expecting a nested heading to inherit the effect. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.

Case 3: homework dashboard. Explain the rule using a compact heading above an assignment list. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Reasoned route. Begin with “The specification says the behavior does not apply to or propagate through flex, grid or table formatting contexts in the same way.” Apply this procedure: Apply the property to the actual text-bearing block or inline box and inspect its context. The expected mechanism is: Targeting the heading avoids relying on propagation through the flex formatting context. For the homework dashboard, add one near-miss that exposes setting trimming on a distant flex ancestor and expecting a nested heading to inherit the effect. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.

Case 4: library card. Transfer the rule using a title aligned with a book-cover thumbnail. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Reasoned route. Begin with “The specification says the behavior does not apply to or propagate through flex, grid or table formatting contexts in the same way.” Apply this procedure: Apply the property to the actual text-bearing block or inline box and inspect its context. The expected mechanism is: Targeting the heading avoids relying on propagation through the flex formatting context. For the library card, add one near-miss that exposes setting trimming on a distant flex ancestor and expecting a nested heading to inherit the effect. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.

Diagnostic route

Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
Boundary check: create the smallest input that triggers setting trimming on a distant flex ancestor and expecting a nested heading to inherit the effect.
Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
Repair check: use the reversible procedure “Apply the property to the actual text-bearing block or inline box and inspect its context.” and record the first changed observation.
Transfer check: repeat the rule in a second context and identify what remains invariant.

A parent does not need to know the final CSS text-box-trim syntax. For this chapter, useful prompts are: “What did you expect from The property does not propagate through every formatting context?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing setting trimming on a distant flex ancestor and expecting a nested heading to inherit the effect be made smaller?” The learner, not the parent, should supply the technical explanation.

Practice with an explained answer

Question. Build a tiny homework dashboard with a compact heading above an assignment list. Include one ordinary case, one boundary and one deliberate failure caused by setting trimming on a distant flex ancestor and expecting a nested heading to inherit the effect. Predict each result before using a tool, then report the first point where observation differs from prediction.

Answer guide. A strong response starts with the rule: The specification says the behavior does not apply to or propagate through flex, grid or table formatting contexts in the same way. It shows a trace, not only a final value. The ordinary case should demonstrate “Targeting the heading avoids relying on propagation through the flex formatting context.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: Apply the property to the actual text-bearing block or inline box and inspect its context. Other data choices are valid when the evidence supports the same causal chain.

Decision and transfer

For The property does not propagate through every formatting context, separate the documented CSS text-box-trim mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.

Previous chapter . Contents . Next chapter

CHAPTER 13 OF 20 . Debug and verify

13. Multi-column containers trim per column

Back to contents

For multi-column layout, the first or last formatted lines of each column can receive the corresponding trimming behavior. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.

The high-value mistake in this chapter is checking only the first page-level line and missing repeated column edges. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. Force a short reproducible column layout and outline each column fragment.

For the Multi-column containers trim per column chapter on CSS text-box-trim, use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on checking only the first page-level line and missing repeated column edges. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.

Core worked example

.columns { columns:2; text-box-trim: trim-both; }

Explained result. Trimming applies to boundary lines in each column as specified, not only one global first and last line. Check the boundary as well as the happy path: ask what happens with an empty input, a duplicate or tied value, an unsupported type, a missing path, a NULL, or a second reference to the same object. Only the relevant boundary should be kept; the list is a prompt for judgment, not a demand to force every case into every example.

Four purposeful transfer cases

Case 1: homework dashboard. Stress-test the rule using a compact heading above an assignment list. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Reasoned route. Begin with “For multi-column layout, the first or last formatted lines of each column can receive the corresponding trimming behavior.” Apply this procedure: Force a short reproducible column layout and outline each column fragment. The expected mechanism is: Trimming applies to boundary lines in each column as specified, not only one global first and last line. For the homework dashboard, add one near-miss that exposes checking only the first page-level line and missing repeated column edges. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.

Case 2: library card. Explain the rule using a title aligned with a book-cover thumbnail. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Reasoned route. Begin with “For multi-column layout, the first or last formatted lines of each column can receive the corresponding trimming behavior.” Apply this procedure: Force a short reproducible column layout and outline each column fragment. The expected mechanism is: Trimming applies to boundary lines in each column as specified, not only one global first and last line. For the library card, add one near-miss that exposes checking only the first page-level line and missing repeated column edges. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.

Case 3: CCA poster. Transfer the rule using large display text inside a fixed panel. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Reasoned route. Begin with “For multi-column layout, the first or last formatted lines of each column can receive the corresponding trimming behavior.” Apply this procedure: Force a short reproducible column layout and outline each column fragment. The expected mechanism is: Trimming applies to boundary lines in each column as specified, not only one global first and last line. For the CCA poster, add one near-miss that exposes checking only the first page-level line and missing repeated column edges. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.

Case 4: science chart label. Predict the rule using a short label aligned to a plot edge. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Reasoned route. Begin with “For multi-column layout, the first or last formatted lines of each column can receive the corresponding trimming behavior.” Apply this procedure: Force a short reproducible column layout and outline each column fragment. The expected mechanism is: Trimming applies to boundary lines in each column as specified, not only one global first and last line. For the science chart label, add one near-miss that exposes checking only the first page-level line and missing repeated column edges. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.

Diagnostic route

Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
Boundary check: create the smallest input that triggers checking only the first page-level line and missing repeated column edges.
Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
Repair check: use the reversible procedure “Force a short reproducible column layout and outline each column fragment.” and record the first changed observation.
Transfer check: repeat the rule in a second context and identify what remains invariant.

A parent does not need to know the final CSS text-box-trim syntax. For this chapter, useful prompts are: “What did you expect from Multi-column containers trim per column?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing checking only the first page-level line and missing repeated column edges be made smaller?” The learner, not the parent, should supply the technical explanation.

Practice with an explained answer

Question. Build a tiny library card with a title aligned with a book-cover thumbnail. Include one ordinary case, one boundary and one deliberate failure caused by checking only the first page-level line and missing repeated column edges. Predict each result before using a tool, then report the first point where observation differs from prediction.

Answer guide. A strong response starts with the rule: For multi-column layout, the first or last formatted lines of each column can receive the corresponding trimming behavior. It shows a trace, not only a final value. The ordinary case should demonstrate “Trimming applies to boundary lines in each column as specified, not only one global first and last line.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: Force a short reproducible column layout and outline each column fragment. Other data choices are valid when the evidence supports the same causal chain.

Decision and transfer

For Multi-column containers trim per column, separate the documented CSS text-box-trim mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.

Previous chapter . Contents . Next chapter

CHAPTER 14 OF 20 . Debug and verify

14. Fragmentation interacts with box-decoration-break

Back to contents

When a trimmed box fragments, whether trimming repeats per fragment or belongs only to outer fragments depends on box-decoration-break. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.

The high-value mistake in this chapter is assuming paged or column fragments behave like one unsplit screen box. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. Test slice and clone behavior in the actual fragmented medium.

For the Fragmentation interacts with box-decoration-break chapter on CSS text-box-trim, use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on assuming paged or column fragments behave like one unsplit screen box. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.

Core worked example

.article { text-box-trim: trim-both; box-decoration-break: clone; }

Explained result. Fragment decoration policy participates in where boundary trimming is applied. Check the boundary as well as the happy path: ask what happens with an empty input, a duplicate or tied value, an unsupported type, a missing path, a NULL, or a second reference to the same object. Only the relevant boundary should be kept; the list is a prompt for judgment, not a demand to force every case into every example.

Four purposeful transfer cases

Case 1: CCA poster. Explain the rule using large display text inside a fixed panel. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Reasoned route. Begin with “When a trimmed box fragments, whether trimming repeats per fragment or belongs only to outer fragments depends on box-decoration-break.” Apply this procedure: Test slice and clone behavior in the actual fragmented medium. The expected mechanism is: Fragment decoration policy participates in where boundary trimming is applied. For the CCA poster, add one near-miss that exposes assuming paged or column fragments behave like one unsplit screen box. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.

Case 2: science chart label. Transfer the rule using a short label aligned to a plot edge. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Reasoned route. Begin with “When a trimmed box fragments, whether trimming repeats per fragment or belongs only to outer fragments depends on box-decoration-break.” Apply this procedure: Test slice and clone behavior in the actual fragmented medium. The expected mechanism is: Fragment decoration policy participates in where boundary trimming is applied. For the science chart label, add one near-miss that exposes assuming paged or column fragments behave like one unsplit screen box. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.

Case 3: revision-card stack. Predict the rule using headings with two different fallback fonts. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Reasoned route. Begin with “When a trimmed box fragments, whether trimming repeats per fragment or belongs only to outer fragments depends on box-decoration-break.” Apply this procedure: Test slice and clone behavior in the actual fragmented medium. The expected mechanism is: Fragment decoration policy participates in where boundary trimming is applied. For the revision-card stack, add one near-miss that exposes assuming paged or column fragments behave like one unsplit screen box. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.

Case 4: photo caption. Contrast the rule using multiline text beneath an image. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Reasoned route. Begin with “When a trimmed box fragments, whether trimming repeats per fragment or belongs only to outer fragments depends on box-decoration-break.” Apply this procedure: Test slice and clone behavior in the actual fragmented medium. The expected mechanism is: Fragment decoration policy participates in where boundary trimming is applied. For the photo caption, add one near-miss that exposes assuming paged or column fragments behave like one unsplit screen box. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.

Diagnostic route

Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
Boundary check: create the smallest input that triggers assuming paged or column fragments behave like one unsplit screen box.
Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
Repair check: use the reversible procedure “Test slice and clone behavior in the actual fragmented medium.” and record the first changed observation.
Transfer check: repeat the rule in a second context and identify what remains invariant.

A parent does not need to know the final CSS text-box-trim syntax. For this chapter, useful prompts are: “What did you expect from Fragmentation interacts with box-decoration-break?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing assuming paged or column fragments behave like one unsplit screen box be made smaller?” The learner, not the parent, should supply the technical explanation.

Practice with an explained answer

Question. Build a tiny CCA poster with large display text inside a fixed panel. Include one ordinary case, one boundary and one deliberate failure caused by assuming paged or column fragments behave like one unsplit screen box. Predict each result before using a tool, then report the first point where observation differs from prediction.

Answer guide. A strong response starts with the rule: When a trimmed box fragments, whether trimming repeats per fragment or belongs only to outer fragments depends on box-decoration-break. It shows a trace, not only a final value. The ordinary case should demonstrate “Fragment decoration policy participates in where boundary trimming is applied.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: Test slice and clone behavior in the actual fragmented medium. Other data choices are valid when the evidence supports the same causal chain.

Decision and transfer

For Fragmentation interacts with box-decoration-break, separate the documented CSS text-box-trim mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.

Previous chapter . Contents . Next chapter

CHAPTER 15 OF 20 . Debug and verify

15. Overflow remains possible

Back to contents

Non-initial trimming can leave glyph ink or content overflowing the adjusted box, handled like other overflow. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.

The high-value mistake in this chapter is equating a trimmed content box with guaranteed non-clipping. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. Turn on overflow visualization and test accents, marks and tall glyphs.

For the Overflow remains possible chapter on CSS text-box-trim, use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on equating a trimmed content box with guaranteed non-clipping. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.

Core worked example

.label { text-box: trim-both cap alphabetic; overflow: visible; }

Explained result. The metrics align layout bounds, while glyph ink can extend beyond those bounds. Check the boundary as well as the happy path: ask what happens with an empty input, a duplicate or tied value, an unsupported type, a missing path, a NULL, or a second reference to the same object. Only the relevant boundary should be kept; the list is a prompt for judgment, not a demand to force every case into every example.

Four purposeful transfer cases

Case 1: revision-card stack. Transfer the rule using headings with two different fallback fonts. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Reasoned route. Begin with “Non-initial trimming can leave glyph ink or content overflowing the adjusted box, handled like other overflow.” Apply this procedure: Turn on overflow visualization and test accents, marks and tall glyphs. The expected mechanism is: The metrics align layout bounds, while glyph ink can extend beyond those bounds. For the revision-card stack, add one near-miss that exposes equating a trimmed content box with guaranteed non-clipping. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.

Case 2: photo caption. Predict the rule using multiline text beneath an image. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Reasoned route. Begin with “Non-initial trimming can leave glyph ink or content overflowing the adjusted box, handled like other overflow.” Apply this procedure: Turn on overflow visualization and test accents, marks and tall glyphs. The expected mechanism is: The metrics align layout bounds, while glyph ink can extend beyond those bounds. For the photo caption, add one near-miss that exposes equating a trimmed content box with guaranteed non-clipping. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.

Case 3: budget summary tile. Contrast the rule using a number and label vertically aligned. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Reasoned route. Begin with “Non-initial trimming can leave glyph ink or content overflowing the adjusted box, handled like other overflow.” Apply this procedure: Turn on overflow visualization and test accents, marks and tall glyphs. The expected mechanism is: The metrics align layout bounds, while glyph ink can extend beyond those bounds. For the budget summary tile, add one near-miss that exposes equating a trimmed content box with guaranteed non-clipping. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.

Case 4: project status panel. Stress-test the rule using a badge, heading and body copy. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Reasoned route. Begin with “Non-initial trimming can leave glyph ink or content overflowing the adjusted box, handled like other overflow.” Apply this procedure: Turn on overflow visualization and test accents, marks and tall glyphs. The expected mechanism is: The metrics align layout bounds, while glyph ink can extend beyond those bounds. For the project status panel, add one near-miss that exposes equating a trimmed content box with guaranteed non-clipping. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.

Diagnostic route

Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
Boundary check: create the smallest input that triggers equating a trimmed content box with guaranteed non-clipping.
Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
Repair check: use the reversible procedure “Turn on overflow visualization and test accents, marks and tall glyphs.” and record the first changed observation.
Transfer check: repeat the rule in a second context and identify what remains invariant.

A parent does not need to know the final CSS text-box-trim syntax. For this chapter, useful prompts are: “What did you expect from Overflow remains possible?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing equating a trimmed content box with guaranteed non-clipping be made smaller?” The learner, not the parent, should supply the technical explanation.

Practice with an explained answer

Question. Build a tiny science chart label with a short label aligned to a plot edge. Include one ordinary case, one boundary and one deliberate failure caused by equating a trimmed content box with guaranteed non-clipping. Predict each result before using a tool, then report the first point where observation differs from prediction.

Answer guide. A strong response starts with the rule: Non-initial trimming can leave glyph ink or content overflowing the adjusted box, handled like other overflow. It shows a trace, not only a final value. The ordinary case should demonstrate “The metrics align layout bounds, while glyph ink can extend beyond those bounds.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: Turn on overflow visualization and test accents, marks and tall glyphs. Other data choices are valid when the evidence supports the same causal chain.

Decision and transfer

For Overflow remains possible, separate the documented CSS text-box-trim mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.

Previous chapter . Contents . Next chapter

CHAPTER 16 OF 20 . Debug and verify

16. Printing may protect content from clipping

Back to contents

A user agent may ignore trimming on a printed edge when applying it would clip content. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.

The high-value mistake in this chapter is demanding pixel-identical screen and print output without testing pagination. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. Use print preview with representative fonts and accept safety-oriented variation.

For the Printing may protect content from clipping chapter on CSS text-box-trim, use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on demanding pixel-identical screen and print output without testing pagination. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.

Core worked example

@media print { .title { text-box-trim: trim-both; } }

Explained result. Print layout can decline an edge trim to avoid clipping, so the design needs a tolerant fallback. Check the boundary as well as the happy path: ask what happens with an empty input, a duplicate or tied value, an unsupported type, a missing path, a NULL, or a second reference to the same object. Only the relevant boundary should be kept; the list is a prompt for judgment, not a demand to force every case into every example.

Four purposeful transfer cases

Case 1: budget summary tile. Predict the rule using a number and label vertically aligned. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Reasoned route. Begin with “A user agent may ignore trimming on a printed edge when applying it would clip content.” Apply this procedure: Use print preview with representative fonts and accept safety-oriented variation. The expected mechanism is: Print layout can decline an edge trim to avoid clipping, so the design needs a tolerant fallback. For the budget summary tile, add one near-miss that exposes demanding pixel-identical screen and print output without testing pagination. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.

Case 2: project status panel. Contrast the rule using a badge, heading and body copy. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Reasoned route. Begin with “A user agent may ignore trimming on a printed edge when applying it would clip content.” Apply this procedure: Use print preview with representative fonts and accept safety-oriented variation. The expected mechanism is: Print layout can decline an edge trim to avoid clipping, so the design needs a tolerant fallback. For the project status panel, add one near-miss that exposes demanding pixel-identical screen and print output without testing pagination. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.

Case 3: homework dashboard. Stress-test the rule using a compact heading above an assignment list. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Reasoned route. Begin with “A user agent may ignore trimming on a printed edge when applying it would clip content.” Apply this procedure: Use print preview with representative fonts and accept safety-oriented variation. The expected mechanism is: Print layout can decline an edge trim to avoid clipping, so the design needs a tolerant fallback. For the homework dashboard, add one near-miss that exposes demanding pixel-identical screen and print output without testing pagination. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.

Case 4: library card. Explain the rule using a title aligned with a book-cover thumbnail. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Reasoned route. Begin with “A user agent may ignore trimming on a printed edge when applying it would clip content.” Apply this procedure: Use print preview with representative fonts and accept safety-oriented variation. The expected mechanism is: Print layout can decline an edge trim to avoid clipping, so the design needs a tolerant fallback. For the library card, add one near-miss that exposes demanding pixel-identical screen and print output without testing pagination. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.

Diagnostic route

Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
Boundary check: create the smallest input that triggers demanding pixel-identical screen and print output without testing pagination.
Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
Repair check: use the reversible procedure “Use print preview with representative fonts and accept safety-oriented variation.” and record the first changed observation.
Transfer check: repeat the rule in a second context and identify what remains invariant.

A parent does not need to know the final CSS text-box-trim syntax. For this chapter, useful prompts are: “What did you expect from Printing may protect content from clipping?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing demanding pixel-identical screen and print output without testing pagination be made smaller?” The learner, not the parent, should supply the technical explanation.

Practice with an explained answer

Question. Build a tiny revision-card stack with headings with two different fallback fonts. Include one ordinary case, one boundary and one deliberate failure caused by demanding pixel-identical screen and print output without testing pagination. Predict each result before using a tool, then report the first point where observation differs from prediction.

Answer guide. A strong response starts with the rule: A user agent may ignore trimming on a printed edge when applying it would clip content. It shows a trace, not only a final value. The ordinary case should demonstrate “Print layout can decline an edge trim to avoid clipping, so the design needs a tolerant fallback.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: Use print preview with representative fonts and accept safety-oriented variation. Other data choices are valid when the evidence supports the same causal chain.

Decision and transfer

For Printing may protect content from clipping, separate the documented CSS text-box-trim mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.

Previous chapter . Contents . Next chapter

CHAPTER 17 OF 20 . Transfer with judgment

17. Writing modes make start and end logical

Back to contents

Block-start and block-end depend on writing-mode, and vertical-lr has a specific distinction between block-end and line-under. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.

The high-value mistake in this chapter is hard-coding top and bottom language into a vertical layout review. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. Draw the logical axes and test horizontal-tb and a vertical mode separately.

For the Writing modes make start and end logical chapter on CSS text-box-trim, use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on hard-coding top and bottom language into a vertical layout review. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.

Core worked example

.vertical { writing-mode: vertical-rl; text-box-trim: trim-both; }

Explained result. The requested sides rotate with the logical block axis rather than remaining physical top and bottom. Check the boundary as well as the happy path: ask what happens with an empty input, a duplicate or tied value, an unsupported type, a missing path, a NULL, or a second reference to the same object. Only the relevant boundary should be kept; the list is a prompt for judgment, not a demand to force every case into every example.

Four purposeful transfer cases

Case 1: homework dashboard. Contrast the rule using a compact heading above an assignment list. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Reasoned route. Begin with “Block-start and block-end depend on writing-mode, and vertical-lr has a specific distinction between block-end and line-under.” Apply this procedure: Draw the logical axes and test horizontal-tb and a vertical mode separately. The expected mechanism is: The requested sides rotate with the logical block axis rather than remaining physical top and bottom. For the homework dashboard, add one near-miss that exposes hard-coding top and bottom language into a vertical layout review. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.

Case 2: library card. Stress-test the rule using a title aligned with a book-cover thumbnail. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Reasoned route. Begin with “Block-start and block-end depend on writing-mode, and vertical-lr has a specific distinction between block-end and line-under.” Apply this procedure: Draw the logical axes and test horizontal-tb and a vertical mode separately. The expected mechanism is: The requested sides rotate with the logical block axis rather than remaining physical top and bottom. For the library card, add one near-miss that exposes hard-coding top and bottom language into a vertical layout review. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.

Case 3: CCA poster. Explain the rule using large display text inside a fixed panel. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Reasoned route. Begin with “Block-start and block-end depend on writing-mode, and vertical-lr has a specific distinction between block-end and line-under.” Apply this procedure: Draw the logical axes and test horizontal-tb and a vertical mode separately. The expected mechanism is: The requested sides rotate with the logical block axis rather than remaining physical top and bottom. For the CCA poster, add one near-miss that exposes hard-coding top and bottom language into a vertical layout review. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.

Case 4: science chart label. Transfer the rule using a short label aligned to a plot edge. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Reasoned route. Begin with “Block-start and block-end depend on writing-mode, and vertical-lr has a specific distinction between block-end and line-under.” Apply this procedure: Draw the logical axes and test horizontal-tb and a vertical mode separately. The expected mechanism is: The requested sides rotate with the logical block axis rather than remaining physical top and bottom. For the science chart label, add one near-miss that exposes hard-coding top and bottom language into a vertical layout review. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.

Diagnostic route

Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
Boundary check: create the smallest input that triggers hard-coding top and bottom language into a vertical layout review.
Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
Repair check: use the reversible procedure “Draw the logical axes and test horizontal-tb and a vertical mode separately.” and record the first changed observation.
Transfer check: repeat the rule in a second context and identify what remains invariant.

A parent does not need to know the final CSS text-box-trim syntax. For this chapter, useful prompts are: “What did you expect from Writing modes make start and end logical?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing hard-coding top and bottom language into a vertical layout review be made smaller?” The learner, not the parent, should supply the technical explanation.

Practice with an explained answer

Question. Build a tiny photo caption with multiline text beneath an image. Include one ordinary case, one boundary and one deliberate failure caused by hard-coding top and bottom language into a vertical layout review. Predict each result before using a tool, then report the first point where observation differs from prediction.

Answer guide. A strong response starts with the rule: Block-start and block-end depend on writing-mode, and vertical-lr has a specific distinction between block-end and line-under. It shows a trace, not only a final value. The ordinary case should demonstrate “The requested sides rotate with the logical block axis rather than remaining physical top and bottom.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: Draw the logical axes and test horizontal-tb and a vertical mode separately. Other data choices are valid when the evidence supports the same causal chain.

Decision and transfer

For Writing modes make start and end logical, separate the documented CSS text-box-trim mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.

Previous chapter . Contents . Next chapter

CHAPTER 18 OF 20 . Transfer with judgment

18. Font choice changes the metrics

Back to contents

Cap height, alphabetic baseline and other metrics come from the selected font, so fallback fonts can change alignment. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.

The high-value mistake in this chapter is tuning a magic negative margin for one font and calling it a universal fix. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. Load intended fonts explicitly and test fallback, language and weight combinations.

For the Font choice changes the metrics chapter on CSS text-box-trim, use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on tuning a magic negative margin for one font and calling it a universal fix. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.

Core worked example

.title { font-family: BrandSerif, serif; text-box: trim-both cap alphabetic; }

Explained result. Each actual font supplies metrics; the property expresses an intention more robustly than one fixed pixel offset. Check the boundary as well as the happy path: ask what happens with an empty input, a duplicate or tied value, an unsupported type, a missing path, a NULL, or a second reference to the same object. Only the relevant boundary should be kept; the list is a prompt for judgment, not a demand to force every case into every example.

Four purposeful transfer cases

Case 1: CCA poster. Stress-test the rule using large display text inside a fixed panel. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Reasoned route. Begin with “Cap height, alphabetic baseline and other metrics come from the selected font, so fallback fonts can change alignment.” Apply this procedure: Load intended fonts explicitly and test fallback, language and weight combinations. The expected mechanism is: Each actual font supplies metrics; the property expresses an intention more robustly than one fixed pixel offset. For the CCA poster, add one near-miss that exposes tuning a magic negative margin for one font and calling it a universal fix. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.

Case 2: science chart label. Explain the rule using a short label aligned to a plot edge. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Reasoned route. Begin with “Cap height, alphabetic baseline and other metrics come from the selected font, so fallback fonts can change alignment.” Apply this procedure: Load intended fonts explicitly and test fallback, language and weight combinations. The expected mechanism is: Each actual font supplies metrics; the property expresses an intention more robustly than one fixed pixel offset. For the science chart label, add one near-miss that exposes tuning a magic negative margin for one font and calling it a universal fix. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.

Case 3: revision-card stack. Transfer the rule using headings with two different fallback fonts. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Reasoned route. Begin with “Cap height, alphabetic baseline and other metrics come from the selected font, so fallback fonts can change alignment.” Apply this procedure: Load intended fonts explicitly and test fallback, language and weight combinations. The expected mechanism is: Each actual font supplies metrics; the property expresses an intention more robustly than one fixed pixel offset. For the revision-card stack, add one near-miss that exposes tuning a magic negative margin for one font and calling it a universal fix. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.

Case 4: photo caption. Predict the rule using multiline text beneath an image. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Reasoned route. Begin with “Cap height, alphabetic baseline and other metrics come from the selected font, so fallback fonts can change alignment.” Apply this procedure: Load intended fonts explicitly and test fallback, language and weight combinations. The expected mechanism is: Each actual font supplies metrics; the property expresses an intention more robustly than one fixed pixel offset. For the photo caption, add one near-miss that exposes tuning a magic negative margin for one font and calling it a universal fix. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.

Diagnostic route

Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
Boundary check: create the smallest input that triggers tuning a magic negative margin for one font and calling it a universal fix.
Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
Repair check: use the reversible procedure “Load intended fonts explicitly and test fallback, language and weight combinations.” and record the first changed observation.
Transfer check: repeat the rule in a second context and identify what remains invariant.

A parent does not need to know the final CSS text-box-trim syntax. For this chapter, useful prompts are: “What did you expect from Font choice changes the metrics?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing tuning a magic negative margin for one font and calling it a universal fix be made smaller?” The learner, not the parent, should supply the technical explanation.

Practice with an explained answer

Question. Build a tiny budget summary tile with a number and label vertically aligned. Include one ordinary case, one boundary and one deliberate failure caused by tuning a magic negative margin for one font and calling it a universal fix. Predict each result before using a tool, then report the first point where observation differs from prediction.

Answer guide. A strong response starts with the rule: Cap height, alphabetic baseline and other metrics come from the selected font, so fallback fonts can change alignment. It shows a trace, not only a final value. The ordinary case should demonstrate “Each actual font supplies metrics; the property expresses an intention more robustly than one fixed pixel offset.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: Load intended fonts explicitly and test fallback, language and weight combinations. Other data choices are valid when the evidence supports the same causal chain.

Decision and transfer

For Font choice changes the metrics, separate the documented CSS text-box-trim mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.

Previous chapter . Contents . Next chapter

CHAPTER 19 OF 20 . Transfer with judgment

19. Progressive enhancement needs a fallback

Back to contents

Support can vary by browser and specification maturity, so the untrimmed layout must remain readable. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.

The high-value mistake in this chapter is using trimming to repair a box whose base spacing is otherwise broken. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. Keep sensible line-height and spacing, then gate enhancement with @supports.

For the Progressive enhancement needs a fallback chapter on CSS text-box-trim, use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on using trimming to repair a box whose base spacing is otherwise broken. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.

Core worked example

.title { line-height:1.15; }
@supports (text-box-trim: trim-both) { .title { text-box: trim-both cap alphabetic; } }

Explained result. Unsupported browsers keep the readable base rule while supporting browsers add metric-based trimming. Check the boundary as well as the happy path: ask what happens with an empty input, a duplicate or tied value, an unsupported type, a missing path, a NULL, or a second reference to the same object. Only the relevant boundary should be kept; the list is a prompt for judgment, not a demand to force every case into every example.

Four purposeful transfer cases

Case 1: revision-card stack. Explain the rule using headings with two different fallback fonts. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Reasoned route. Begin with “Support can vary by browser and specification maturity, so the untrimmed layout must remain readable.” Apply this procedure: Keep sensible line-height and spacing, then gate enhancement with @supports. The expected mechanism is: Unsupported browsers keep the readable base rule while supporting browsers add metric-based trimming. For the revision-card stack, add one near-miss that exposes using trimming to repair a box whose base spacing is otherwise broken. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.

Case 2: photo caption. Transfer the rule using multiline text beneath an image. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Reasoned route. Begin with “Support can vary by browser and specification maturity, so the untrimmed layout must remain readable.” Apply this procedure: Keep sensible line-height and spacing, then gate enhancement with @supports. The expected mechanism is: Unsupported browsers keep the readable base rule while supporting browsers add metric-based trimming. For the photo caption, add one near-miss that exposes using trimming to repair a box whose base spacing is otherwise broken. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.

Case 3: budget summary tile. Predict the rule using a number and label vertically aligned. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Reasoned route. Begin with “Support can vary by browser and specification maturity, so the untrimmed layout must remain readable.” Apply this procedure: Keep sensible line-height and spacing, then gate enhancement with @supports. The expected mechanism is: Unsupported browsers keep the readable base rule while supporting browsers add metric-based trimming. For the budget summary tile, add one near-miss that exposes using trimming to repair a box whose base spacing is otherwise broken. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.

Case 4: project status panel. Contrast the rule using a badge, heading and body copy. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Reasoned route. Begin with “Support can vary by browser and specification maturity, so the untrimmed layout must remain readable.” Apply this procedure: Keep sensible line-height and spacing, then gate enhancement with @supports. The expected mechanism is: Unsupported browsers keep the readable base rule while supporting browsers add metric-based trimming. For the project status panel, add one near-miss that exposes using trimming to repair a box whose base spacing is otherwise broken. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.

Diagnostic route

Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
Boundary check: create the smallest input that triggers using trimming to repair a box whose base spacing is otherwise broken.
Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
Repair check: use the reversible procedure “Keep sensible line-height and spacing, then gate enhancement with @supports.” and record the first changed observation.
Transfer check: repeat the rule in a second context and identify what remains invariant.

A parent does not need to know the final CSS text-box-trim syntax. For this chapter, useful prompts are: “What did you expect from Progressive enhancement needs a fallback?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing using trimming to repair a box whose base spacing is otherwise broken be made smaller?” The learner, not the parent, should supply the technical explanation.

Practice with an explained answer

Question. Build a tiny project status panel with a badge, heading and body copy. Include one ordinary case, one boundary and one deliberate failure caused by using trimming to repair a box whose base spacing is otherwise broken. Predict each result before using a tool, then report the first point where observation differs from prediction.

Answer guide. A strong response starts with the rule: Support can vary by browser and specification maturity, so the untrimmed layout must remain readable. It shows a trace, not only a final value. The ordinary case should demonstrate “Unsupported browsers keep the readable base rule while supporting browsers add metric-based trimming.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: Keep sensible line-height and spacing, then gate enhancement with @supports. Other data choices are valid when the evidence supports the same causal chain.

Decision and transfer

For Progressive enhancement needs a fallback, separate the documented CSS text-box-trim mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.

Previous chapter . Contents . Next chapter

CHAPTER 20 OF 20 . Transfer with judgment

20. Mastery is measured across fonts and contexts

Back to contents

A trustworthy implementation survives multiple fonts, one and several lines, logical writing modes, overflow glyphs and unsupported browsers. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.

The high-value mistake in this chapter is approving one screenshot in one browser as complete evidence. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. Build a visual matrix, inspect computed styles and record the intended metric in code comments.

For the Mastery is measured across fonts and contexts chapter on CSS text-box-trim, use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on approving one screenshot in one browser as complete evidence. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.

Core worked example

/* Intent: align cap edge with thumbnail top; preserve fallback spacing. */

Explained result. The comment states the design contract, while the test matrix checks whether the property fulfils it without harming fallbacks. Check the boundary as well as the happy path: ask what happens with an empty input, a duplicate or tied value, an unsupported type, a missing path, a NULL, or a second reference to the same object. Only the relevant boundary should be kept; the list is a prompt for judgment, not a demand to force every case into every example.

Four purposeful transfer cases

Case 1: budget summary tile. Transfer the rule using a number and label vertically aligned. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Reasoned route. Begin with “A trustworthy implementation survives multiple fonts, one and several lines, logical writing modes, overflow glyphs and unsupported browsers.” Apply this procedure: Build a visual matrix, inspect computed styles and record the intended metric in code comments. The expected mechanism is: The comment states the design contract, while the test matrix checks whether the property fulfils it without harming fallbacks. For the budget summary tile, add one near-miss that exposes approving one screenshot in one browser as complete evidence. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.

Case 2: project status panel. Predict the rule using a badge, heading and body copy. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Reasoned route. Begin with “A trustworthy implementation survives multiple fonts, one and several lines, logical writing modes, overflow glyphs and unsupported browsers.” Apply this procedure: Build a visual matrix, inspect computed styles and record the intended metric in code comments. The expected mechanism is: The comment states the design contract, while the test matrix checks whether the property fulfils it without harming fallbacks. For the project status panel, add one near-miss that exposes approving one screenshot in one browser as complete evidence. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.

Case 3: homework dashboard. Contrast the rule using a compact heading above an assignment list. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Reasoned route. Begin with “A trustworthy implementation survives multiple fonts, one and several lines, logical writing modes, overflow glyphs and unsupported browsers.” Apply this procedure: Build a visual matrix, inspect computed styles and record the intended metric in code comments. The expected mechanism is: The comment states the design contract, while the test matrix checks whether the property fulfils it without harming fallbacks. For the homework dashboard, add one near-miss that exposes approving one screenshot in one browser as complete evidence. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.

Case 4: library card. Stress-test the rule using a title aligned with a book-cover thumbnail. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Reasoned route. Begin with “A trustworthy implementation survives multiple fonts, one and several lines, logical writing modes, overflow glyphs and unsupported browsers.” Apply this procedure: Build a visual matrix, inspect computed styles and record the intended metric in code comments. The expected mechanism is: The comment states the design contract, while the test matrix checks whether the property fulfils it without harming fallbacks. For the library card, add one near-miss that exposes approving one screenshot in one browser as complete evidence. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.

Diagnostic route

Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
Boundary check: create the smallest input that triggers approving one screenshot in one browser as complete evidence.
Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
Repair check: use the reversible procedure “Build a visual matrix, inspect computed styles and record the intended metric in code comments.” and record the first changed observation.
Transfer check: repeat the rule in a second context and identify what remains invariant.

A parent does not need to know the final CSS text-box-trim syntax. For this chapter, useful prompts are: “What did you expect from Mastery is measured across fonts and contexts?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing approving one screenshot in one browser as complete evidence be made smaller?” The learner, not the parent, should supply the technical explanation.

Practice with an explained answer

Question. Build a tiny homework dashboard with a compact heading above an assignment list. Include one ordinary case, one boundary and one deliberate failure caused by approving one screenshot in one browser as complete evidence. Predict each result before using a tool, then report the first point where observation differs from prediction.

Answer guide. A strong response starts with the rule: A trustworthy implementation survives multiple fonts, one and several lines, logical writing modes, overflow glyphs and unsupported browsers. It shows a trace, not only a final value. The ordinary case should demonstrate “The comment states the design contract, while the test matrix checks whether the property fulfils it without harming fallbacks.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: Build a visual matrix, inspect computed styles and record the intended metric in code comments. Other data choices are valid when the evidence supports the same causal chain.

Decision and transfer

For Mastery is measured across fonts and contexts, separate the documented CSS text-box-trim mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.

Previous chapter . Contents . Next chapter

Parent guide: choose the next useful step

Start with evidence, not a label such as careless. Ask for one prediction and one trace. If the first transition is wrong, rebuild the model. If the model is sound but syntax fails, practise reference use. If routine cases are correct but boundaries fail, vary ties, defaults, unsupported inputs, ownership or missing paths. If explanations transfer, move to a small project.

Keep a weekly record with four lines: concept, prediction, observed difference and next test. Stop when fatigue replaces reasoning. A smaller case tomorrow is more useful than another hour of copying tonight.

Seek specialist help when cause and effect remain invisible after examples are reduced, when accessibility or data-loss implications are unclear, or when an important repository, database or application state may be at risk. Good support should make the learner’s reasoning more independent.

Capstone practice with explained routes

1. homework dashboard: model, boundary and recovery

Create a small homework dashboard using a compact heading above an assignment list. Combine “The property trims layout space around text” with one later chapter. Include an ordinary case, a boundary, a deliberate failure and a recovery. Write the expected state before each operation.

Explained route. Start with: text-box-trim adjusts the content-box or line-edge relationship using font metrics; it is not a general image crop. Apply: Turn on outlines and compare box edges with cap, alphabetic and text metrics. Verify: The start and end are trimmed to selected metrics while glyph ink may still overhang or vary. Then add a second chapter whose boundary could change the outcome. A complete solution contains the input model, a trace, observed evidence, a correction and one transfer statement. The exact data may differ; the causal chain must be checkable.

2. library card: model, boundary and recovery

Create a small library card using a title aligned with a book-cover thumbnail. Combine “trim-end affects the logical end edge” with one later chapter. Include an ordinary case, a boundary, a deliberate failure and a recovery. Write the expected state before each operation.

Explained route. Start with: On a block container, trim-end targets the block-end side of the last formatted line. Apply: Outline the box and identify the last formatted line before changing values. Verify: The end-side half-leading of the last formatted line is the target. Then add a second chapter whose boundary could change the outcome. A complete solution contains the input model, a trace, observed evidence, a correction and one transfer statement. The exact data may differ; the causal chain must be checkable.

3. CCA poster: model, boundary and recovery

Create a small CCA poster using large display text inside a fixed panel. Combine “The text-box shorthand couples the two properties” with one later chapter. Include an ordinary case, a boundary, a deliberate failure and a recovery. Write the expected state before each operation.

Explained route. Start with: text-box can set text-box-trim and text-box-edge in one declaration; omitted pieces follow shorthand rules rather than every longhand initial. Apply: Expand the shorthand into longhands during debugging. Verify: The declaration explicitly requests both-side trimming and the chosen edge metrics. Then add a second chapter whose boundary could change the outcome. A complete solution contains the input model, a trace, observed evidence, a correction and one transfer statement. The exact data may differ; the causal chain must be checkable.

4. science chart label: model, boundary and recovery

Create a small science chart label using a short label aligned to a plot edge. Combine “Padding or borders can prevent a block-side effect” with one later chapter. Include an ordinary case, a boundary, a deliberate failure and a recovery. Write the expected state before each operation.

Explained route. Start with: At a requested side, intervening non-zero padding or border means block-container trimming has no effect there. Apply: Remove the side decoration in a reduced test and place spacing on an outer wrapper. Verify: With no intervening start padding or border, the trimming condition can apply. Then add a second chapter whose boundary could change the outcome. A complete solution contains the input model, a trace, observed evidence, a correction and one transfer statement. The exact data may differ; the causal chain must be checkable.

5. revision-card stack: model, boundary and recovery

Create a small revision-card stack using headings with two different fallback fonts. Combine “Multi-column containers trim per column” with one later chapter. Include an ordinary case, a boundary, a deliberate failure and a recovery. Write the expected state before each operation.

Explained route. Start with: For multi-column layout, the first or last formatted lines of each column can receive the corresponding trimming behavior. Apply: Force a short reproducible column layout and outline each column fragment. Verify: Trimming applies to boundary lines in each column as specified, not only one global first and last line. Then add a second chapter whose boundary could change the outcome. A complete solution contains the input model, a trace, observed evidence, a correction and one transfer statement. The exact data may differ; the causal chain must be checkable.

6. photo caption: model, boundary and recovery

Create a small photo caption using multiline text beneath an image. Combine “Printing may protect content from clipping” with one later chapter. Include an ordinary case, a boundary, a deliberate failure and a recovery. Write the expected state before each operation.

Explained route. Start with: A user agent may ignore trimming on a printed edge when applying it would clip content. Apply: Use print preview with representative fonts and accept safety-oriented variation. Verify: Print layout can decline an edge trim to avoid clipping, so the design needs a tolerant fallback. Then add a second chapter whose boundary could change the outcome. A complete solution contains the input model, a trace, observed evidence, a correction and one transfer statement. The exact data may differ; the causal chain must be checkable.

7. budget summary tile: model, boundary and recovery

Create a small budget summary tile using a number and label vertically aligned. Combine “Progressive enhancement needs a fallback” with one later chapter. Include an ordinary case, a boundary, a deliberate failure and a recovery. Write the expected state before each operation.

Explained route. Start with: Support can vary by browser and specification maturity, so the untrimmed layout must remain readable. Apply: Keep sensible line-height and spacing, then gate enhancement with @supports. Verify: Unsupported browsers keep the readable base rule while supporting browsers add metric-based trimming. Then add a second chapter whose boundary could change the outcome. A complete solution contains the input model, a trace, observed evidence, a correction and one transfer statement. The exact data may differ; the causal chain must be checkable.

8. project status panel: model, boundary and recovery

Create a small project status panel using a badge, heading and body copy. Combine “The initial value is none” with one later chapter. Include an ordinary case, a boundary, a deliberate failure and a recovery. Write the expected state before each operation.

Explained route. Start with: With text-box-trim:none, first and last line boxes receive no special trimming from this property. Apply: Inspect computed styles and begin from an untrimmed control. Verify: The control preserves ordinary layout behavior and provides a baseline for comparison. Then add a second chapter whose boundary could change the outcome. A complete solution contains the input model, a trace, observed evidence, a correction and one transfer statement. The exact data may differ; the causal chain must be checkable.

Frequently asked questions

How long should a practice session be?

Use one complete prediction–observation–explanation cycle while attention remains good. Ten to twenty focused minutes can be enough.

Should every option or function be memorised?

No. Memorise the governing distinctions and practise retrieving the official reference. Understanding means predicting and explaining, not reciting a parameter list.

What if the result is correct but the explanation is weak?

Treat it as partial success. Ask for a trace and change one boundary. A reliable model survives controlled variation.

Is the shortest solution the best?

Not automatically. Prefer the solution whose semantics, failure modes and maintenance cost are easiest to justify for the actual project.

When should official documentation be used?

Use it whenever syntax, supported types, SQL dialect behaviour or Git version details matter. Primary documentation settles the current contract.

How can a parent help without technical expertise?

Ask what was predicted, where the first difference appeared, what evidence matters and which smaller example could isolate it.

How do we test transfer?

Change the context, vocabulary and one boundary. Require the learner to identify the invariant before using a tool.

What should be saved after practice?

Keep the corrected rule, one trace, one boundary case and the next question. Avoid storing pages of unexplained output.

Can these exercises replace backups?

No. Use disposable examples and proper backups. Learning should not endanger schoolwork, repositories or personal data.

What counts as mastery?

The learner can predict, verify, diagnose, recover and justify a choice across more than one context, while knowing when to consult the current reference.

Official and supporting references

Return to contents

eduKate Punggol

Build the model

Use the core tools

Handle boundaries

Debug and verify

Transfer with judgment

eduKate Punggol

Contact

Menu

Email Us

感谢您的回复。 ✨

Small Group Tutorials

How to Master CSS text-box-trim in Punggol Tuition

Find your next learning step

Build the model

Use the core tools

Handle boundaries

Debug and verify

Transfer with judgment

Complete chapter index

1. The property trims layout space around text

Core worked example

Four purposeful transfer cases

Diagnostic route

Practice with an explained answer

Decision and transfer

2. The initial value is none

Core worked example

Four purposeful transfer cases

Diagnostic route

Practice with an explained answer

Decision and transfer

3. trim-start affects the logical start edge

Core worked example

Four purposeful transfer cases

Diagnostic route

Practice with an explained answer

Decision and transfer

4. trim-end affects the logical end edge

Core worked example

Four purposeful transfer cases

Diagnostic route

Practice with an explained answer

Decision and transfer

5. trim-both combines start and end

Core worked example

Four purposeful transfer cases

Diagnostic route

Practice with an explained answer

Decision and transfer

6. text-box-edge selects the metric

Core worked example

Four purposeful transfer cases

Diagnostic route

Practice with an explained answer

Decision and transfer

7. The text-box shorthand couples the two properties

Core worked example

Four purposeful transfer cases

Diagnostic route

Practice with an explained answer

Decision and transfer

8. Half-leading comes from line-height distribution

Core worked example

Four purposeful transfer cases

Diagnostic route

Practice with an explained answer

Decision and transfer

9. The first and last formatted lines matter

Core worked example

Four purposeful transfer cases

Diagnostic route

Practice with an explained answer

Decision and transfer

10. Padding or borders can prevent a block-side effect

Core worked example

Four purposeful transfer cases

Diagnostic route

Practice with an explained answer

Decision and transfer

11. Inline boxes use a related but distinct rule

Core worked example

Four purposeful transfer cases

Diagnostic route

Practice with an explained answer

Decision and transfer

12. The property does not propagate through every formatting context

Core worked example

Four purposeful transfer cases

Diagnostic route

Practice with an explained answer