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 white-space-collapse controls whether and how white-space sequences in text are collapsed for rendering. It does not rewrite the underlying DOM text, and it does not by itself settle every wrapping or trimming question. Mastery means tracing source characters through the chosen collapse mode, then checking wrapping, line-edge behaviour, inheritance and current browser support separately. 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
Chapters 5-8 . Use the core tools
Chapters 9-12 . Handle boundaries
Chapters 13-16 . Debug and verify
white-space-collapse affects interpretation for layout; it does not delete or rewrite text nodes in the document. 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 inspecting textContent after styling and expecting collapsed data. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. Compare textContent with rendered geometry in a controlled fixture.
For the Rendering changes while source data remains chapter on CSS white-space-collapse, 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 inspecting textContent after styling and expecting collapsed data. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.
Core worked example
.note { white-space-collapse: collapse; }
/* source may contain several spaces */Explained result. The browser may render one collapsible space while the DOM still contains the original characters. 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 explanation. Predict the rule using indented source text displayed as ordinary prose. 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 “white-space-collapse affects interpretation for layout; it does not delete or rewrite text nodes in the document.” Apply this procedure: Compare textContent with rendered geometry in a controlled fixture. The expected mechanism is: The browser may render one collapsible space while the DOM still contains the original characters. For the homework explanation, add one near-miss that exposes inspecting textContent after styling and expecting collapsed data. 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 catalogue. Contrast the rule using call-number labels with deliberate spacing. 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 “white-space-collapse affects interpretation for layout; it does not delete or rewrite text nodes in the document.” Apply this procedure: Compare textContent with rendered geometry in a controlled fixture. The expected mechanism is: The browser may render one collapsible space while the DOM still contains the original characters. For the library catalogue, add one near-miss that exposes inspecting textContent after styling and expecting collapsed data. 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 notice. Stress-test the rule using multi-line announcements from a content system. 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 “white-space-collapse affects interpretation for layout; it does not delete or rewrite text nodes in the document.” Apply this procedure: Compare textContent with rendered geometry in a controlled fixture. The expected mechanism is: The browser may render one collapsible space while the DOM still contains the original characters. For the CCA notice, add one near-miss that exposes inspecting textContent after styling and expecting collapsed data. 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 output. Explain the rule using preformatted readings and aligned values. 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 “white-space-collapse affects interpretation for layout; it does not delete or rewrite text nodes in the document.” Apply this procedure: Compare textContent with rendered geometry in a controlled fixture. The expected mechanism is: The browser may render one collapsible space while the DOM still contains the original characters. For the science output, add one near-miss that exposes inspecting textContent after styling and expecting collapsed data. 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 inspecting textContent after styling and expecting collapsed data.
- Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
- Repair check: use the reversible procedure “Compare textContent with rendered geometry in a controlled fixture.” 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 white-space-collapse syntax. For this chapter, useful prompts are: “What did you expect from Rendering changes while source data remains?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing inspecting textContent after styling and expecting collapsed data be made smaller?” The learner, not the parent, should supply the technical explanation.
Practice with an explained answer
Question. Build a tiny code sample with tabs, spaces and line breaks that carry meaning. Include one ordinary case, one boundary and one deliberate failure caused by inspecting textContent after styling and expecting collapsed data. 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: white-space-collapse affects interpretation for layout; it does not delete or rewrite text nodes in the document. It shows a trace, not only a final value. The ordinary case should demonstrate “The browser may render one collapsible space while the DOM still contains the original characters.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: Compare textContent with rendered geometry in a controlled fixture. Other data choices are valid when the evidence supports the same causal chain.
Decision and transfer
For Rendering changes while source data remains, separate the documented CSS white-space-collapse 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
The initial collapse mode reduces collapsible white-space sequences according to CSS text-processing rules. 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 HTML indentation as visible spaces in ordinary prose. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. Create adjacent spaces, a tab and a source line break, then inspect the rendered words.
For the collapse is the initial value chapter on CSS white-space-collapse, 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 HTML indentation as visible spaces in ordinary prose. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.
Core worked example
.ordinary { white-space-collapse: collapse; }Explained result. Ordinary authoring whitespace is collapsed for display under the initial mode. 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 notice. Contrast the rule using multi-line announcements from a content system. 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 initial collapse mode reduces collapsible white-space sequences according to CSS text-processing rules.” Apply this procedure: Create adjacent spaces, a tab and a source line break, then inspect the rendered words. The expected mechanism is: Ordinary authoring whitespace is collapsed for display under the initial mode. For the CCA notice, add one near-miss that exposes treating HTML indentation as visible spaces in ordinary prose. 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 output. Stress-test the rule using preformatted readings and aligned values. 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 initial collapse mode reduces collapsible white-space sequences according to CSS text-processing rules.” Apply this procedure: Create adjacent spaces, a tab and a source line break, then inspect the rendered words. The expected mechanism is: Ordinary authoring whitespace is collapsed for display under the initial mode. For the science output, add one near-miss that exposes treating HTML indentation as visible spaces in ordinary prose. 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. Explain the rule using compact prose with optional author-entered breaks. 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 initial collapse mode reduces collapsible white-space sequences according to CSS text-processing rules.” Apply this procedure: Create adjacent spaces, a tab and a source line break, then inspect the rendered words. The expected mechanism is: Ordinary authoring whitespace is collapsed for display under the initial mode. For the revision card, add one near-miss that exposes treating HTML indentation as visible spaces in ordinary prose. 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: code sample. Transfer the rule using tabs, spaces and line breaks that carry meaning. 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 initial collapse mode reduces collapsible white-space sequences according to CSS text-processing rules.” Apply this procedure: Create adjacent spaces, a tab and a source line break, then inspect the rendered words. The expected mechanism is: Ordinary authoring whitespace is collapsed for display under the initial mode. For the code sample, add one near-miss that exposes treating HTML indentation as visible spaces in ordinary prose. 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 HTML indentation as visible spaces in ordinary prose.
- Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
- Repair check: use the reversible procedure “Create adjacent spaces, a tab and a source line break, then inspect the rendered words.” 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 white-space-collapse syntax. For this chapter, useful prompts are: “What did you expect from collapse is the initial value?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing treating HTML indentation as visible spaces in ordinary prose be made smaller?” The learner, not the parent, should supply the technical explanation.
Practice with an explained answer
Question. Build a tiny chat transcript with preserved messages within a narrow panel. Include one ordinary case, one boundary and one deliberate failure caused by treating HTML indentation as visible spaces in ordinary prose. 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 initial collapse mode reduces collapsible white-space sequences according to CSS text-processing rules. It shows a trace, not only a final value. The ordinary case should demonstrate “Ordinary authoring whitespace is collapsed for display under the initial mode.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: Create adjacent spaces, a tab and a source line break, then inspect the rendered words. Other data choices are valid when the evidence supports the same causal chain.
Decision and transfer
For collapse is the initial value, separate the documented CSS white-space-collapse 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
preserve retains spaces and segment breaks instead of collapsing them. 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 preserve for prose and creating unexpected long lines or indentation. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. Test leading, internal and trailing spaces inside a constrained box.
For the preserve keeps white space significant chapter on CSS white-space-collapse, 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 preserve for prose and creating unexpected long lines or indentation. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.
Core worked example
.verbatim { white-space-collapse: preserve; }Explained result. The preserved characters participate in layout rather than becoming one collapsed separator. 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. Stress-test the rule using compact prose with optional author-entered breaks. 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 “preserve retains spaces and segment breaks instead of collapsing them.” Apply this procedure: Test leading, internal and trailing spaces inside a constrained box. The expected mechanism is: The preserved characters participate in layout rather than becoming one collapsed separator. For the revision card, add one near-miss that exposes using preserve for prose and creating unexpected long lines or indentation. 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: code sample. Explain the rule using tabs, spaces and line breaks that carry meaning. 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 “preserve retains spaces and segment breaks instead of collapsing them.” Apply this procedure: Test leading, internal and trailing spaces inside a constrained box. The expected mechanism is: The preserved characters participate in layout rather than becoming one collapsed separator. For the code sample, add one near-miss that exposes using preserve for prose and creating unexpected long lines or indentation. 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: chat transcript. Transfer the rule using preserved messages within a narrow 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 “preserve retains spaces and segment breaks instead of collapsing them.” Apply this procedure: Test leading, internal and trailing spaces inside a constrained box. The expected mechanism is: The preserved characters participate in layout rather than becoming one collapsed separator. For the chat transcript, add one near-miss that exposes using preserve for prose and creating unexpected long lines or indentation. 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: data badge. Predict the rule using short labels whose source indentation should disappear. 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 “preserve retains spaces and segment breaks instead of collapsing them.” Apply this procedure: Test leading, internal and trailing spaces inside a constrained box. The expected mechanism is: The preserved characters participate in layout rather than becoming one collapsed separator. For the data badge, add one near-miss that exposes using preserve for prose and creating unexpected long lines or indentation. 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 preserve for prose and creating unexpected long lines or indentation.
- Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
- Repair check: use the reversible procedure “Test leading, internal and trailing spaces inside a constrained box.” 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 white-space-collapse syntax. For this chapter, useful prompts are: “What did you expect from preserve keeps white space significant?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing using preserve for prose and creating unexpected long lines or indentation be made smaller?” The learner, not the parent, should supply the technical explanation.
Practice with an explained answer
Question. Build a tiny data badge with short labels whose source indentation should disappear. Include one ordinary case, one boundary and one deliberate failure caused by using preserve for prose and creating unexpected long lines or indentation. 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: preserve retains spaces and segment breaks instead of collapsing them. It shows a trace, not only a final value. The ordinary case should demonstrate “The preserved characters participate in layout rather than becoming one collapsed separator.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: Test leading, internal and trailing spaces inside a constrained box. Other data choices are valid when the evidence supports the same causal chain.
Decision and transfer
For preserve keeps white space significant, separate the documented CSS white-space-collapse 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. preserve-breaks keeps breaks but collapses spaces
preserve-breaks retains segment breaks while collapsing other collapsible white space. 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 it behaves exactly like preserve and keeps indentation columns. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. Use multiple spaces on one line and one deliberate newline in the same fixture.
For the preserve-breaks keeps breaks but collapses spaces chapter on CSS white-space-collapse, 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 it behaves exactly like preserve and keeps indentation columns. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.
Core worked example
.message { white-space-collapse: preserve-breaks; }Explained result. The line break remains meaningful while runs of ordinary spaces are collapsed. 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: chat transcript. Explain the rule using preserved messages within a narrow 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 “preserve-breaks retains segment breaks while collapsing other collapsible white space.” Apply this procedure: Use multiple spaces on one line and one deliberate newline in the same fixture. The expected mechanism is: The line break remains meaningful while runs of ordinary spaces are collapsed. For the chat transcript, add one near-miss that exposes assuming it behaves exactly like preserve and keeps indentation columns. 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: data badge. Transfer the rule using short labels whose source indentation should disappear. 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 “preserve-breaks retains segment breaks while collapsing other collapsible white space.” Apply this procedure: Use multiple spaces on one line and one deliberate newline in the same fixture. The expected mechanism is: The line break remains meaningful while runs of ordinary spaces are collapsed. For the data badge, add one near-miss that exposes assuming it behaves exactly like preserve and keeps indentation columns. 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 explanation. Predict the rule using indented source text displayed as ordinary prose. 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 “preserve-breaks retains segment breaks while collapsing other collapsible white space.” Apply this procedure: Use multiple spaces on one line and one deliberate newline in the same fixture. The expected mechanism is: The line break remains meaningful while runs of ordinary spaces are collapsed. For the homework explanation, add one near-miss that exposes assuming it behaves exactly like preserve and keeps indentation columns. 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 catalogue. Contrast the rule using call-number labels with deliberate spacing. 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 “preserve-breaks retains segment breaks while collapsing other collapsible white space.” Apply this procedure: Use multiple spaces on one line and one deliberate newline in the same fixture. The expected mechanism is: The line break remains meaningful while runs of ordinary spaces are collapsed. For the library catalogue, add one near-miss that exposes assuming it behaves exactly like preserve and keeps indentation columns. 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 it behaves exactly like preserve and keeps indentation columns.
- Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
- Repair check: use the reversible procedure “Use multiple spaces on one line and one deliberate newline in the same fixture.” 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 white-space-collapse syntax. For this chapter, useful prompts are: “What did you expect from preserve-breaks keeps breaks but collapses spaces?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing assuming it behaves exactly like preserve and keeps indentation columns be made smaller?” The learner, not the parent, should supply the technical explanation.
Practice with an explained answer
Question. Build a tiny homework explanation with indented source text displayed as ordinary prose. Include one ordinary case, one boundary and one deliberate failure caused by assuming it behaves exactly like preserve and keeps indentation columns. 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: preserve-breaks retains segment breaks while collapsing other collapsible white space. It shows a trace, not only a final value. The ordinary case should demonstrate “The line break remains meaningful while runs of ordinary spaces are collapsed.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: Use multiple spaces on one line and one deliberate newline in the same fixture. Other data choices are valid when the evidence supports the same causal chain.
Decision and transfer
For preserve-breaks keeps breaks but collapses spaces, separate the documented CSS white-space-collapse 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. preserve-spaces converts tabs and breaks to spaces
The specification defines preserve-spaces so tabs and segment breaks become spaces while space sequences are preserved. 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 it when actual line breaks must remain visible. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. Mark each source character and compare the rendered line structure.
For the preserve-spaces converts tabs and breaks to spaces chapter on CSS white-space-collapse, 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 it when actual line breaks must remain visible. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.
Core worked example
.label { white-space-collapse: preserve-spaces; }Explained result. The formatting characters are treated as spaces, so the mode differs from preserving line breaks. 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 explanation. Transfer the rule using indented source text displayed as ordinary prose. 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 defines preserve-spaces so tabs and segment breaks become spaces while space sequences are preserved.” Apply this procedure: Mark each source character and compare the rendered line structure. The expected mechanism is: The formatting characters are treated as spaces, so the mode differs from preserving line breaks. For the homework explanation, add one near-miss that exposes using it when actual line breaks must remain visible. 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 catalogue. Predict the rule using call-number labels with deliberate spacing. 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 defines preserve-spaces so tabs and segment breaks become spaces while space sequences are preserved.” Apply this procedure: Mark each source character and compare the rendered line structure. The expected mechanism is: The formatting characters are treated as spaces, so the mode differs from preserving line breaks. For the library catalogue, add one near-miss that exposes using it when actual line breaks must remain visible. 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 notice. Contrast the rule using multi-line announcements from a content system. 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 defines preserve-spaces so tabs and segment breaks become spaces while space sequences are preserved.” Apply this procedure: Mark each source character and compare the rendered line structure. The expected mechanism is: The formatting characters are treated as spaces, so the mode differs from preserving line breaks. For the CCA notice, add one near-miss that exposes using it when actual line breaks must remain visible. 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 output. Stress-test the rule using preformatted readings and aligned values. 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 defines preserve-spaces so tabs and segment breaks become spaces while space sequences are preserved.” Apply this procedure: Mark each source character and compare the rendered line structure. The expected mechanism is: The formatting characters are treated as spaces, so the mode differs from preserving line breaks. For the science output, add one near-miss that exposes using it when actual line breaks must remain visible. 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 it when actual line breaks must remain visible.
- Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
- Repair check: use the reversible procedure “Mark each source character and compare the rendered line structure.” 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 white-space-collapse syntax. For this chapter, useful prompts are: “What did you expect from preserve-spaces converts tabs and breaks to spaces?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing using it when actual line breaks must remain visible be made smaller?” The learner, not the parent, should supply the technical explanation.
Practice with an explained answer
Question. Build a tiny library catalogue with call-number labels with deliberate spacing. Include one ordinary case, one boundary and one deliberate failure caused by using it when actual line breaks must remain visible. 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 defines preserve-spaces so tabs and segment breaks become spaces while space sequences are preserved. It shows a trace, not only a final value. The ordinary case should demonstrate “The formatting characters are treated as spaces, so the mode differs from preserving line breaks.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: Mark each source character and compare the rendered line structure. Other data choices are valid when the evidence supports the same causal chain.
Decision and transfer
For preserve-spaces converts tabs and breaks to spaces, separate the documented CSS white-space-collapse 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
break-spaces preserves spaces and creates a soft wrap opportunity after every preserved space or tab, with line-edge spaces affecting layout. 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 it an alias for pre-wrap and overlooking intrinsic-size and trailing-space differences. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. Test the same long spaced phrase under both values in a narrow container.
For the break-spaces adds wrap opportunities chapter on CSS white-space-collapse, 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 it an alias for pre-wrap and overlooking intrinsic-size and trailing-space differences. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.
Core worked example
.tokens { white-space-collapse: break-spaces; text-wrap-mode: wrap; }Explained result. Preserved spaces can become individual wrapping opportunities instead of behaving as one hanging run. 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 notice. Predict the rule using multi-line announcements from a content system. 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 “break-spaces preserves spaces and creates a soft wrap opportunity after every preserved space or tab, with line-edge spaces affecting layout.” Apply this procedure: Test the same long spaced phrase under both values in a narrow container. The expected mechanism is: Preserved spaces can become individual wrapping opportunities instead of behaving as one hanging run. For the CCA notice, add one near-miss that exposes calling it an alias for pre-wrap and overlooking intrinsic-size and trailing-space differences. 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 output. Contrast the rule using preformatted readings and aligned values. 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 “break-spaces preserves spaces and creates a soft wrap opportunity after every preserved space or tab, with line-edge spaces affecting layout.” Apply this procedure: Test the same long spaced phrase under both values in a narrow container. The expected mechanism is: Preserved spaces can become individual wrapping opportunities instead of behaving as one hanging run. For the science output, add one near-miss that exposes calling it an alias for pre-wrap and overlooking intrinsic-size and trailing-space differences. 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. Stress-test the rule using compact prose with optional author-entered breaks. 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 “break-spaces preserves spaces and creates a soft wrap opportunity after every preserved space or tab, with line-edge spaces affecting layout.” Apply this procedure: Test the same long spaced phrase under both values in a narrow container. The expected mechanism is: Preserved spaces can become individual wrapping opportunities instead of behaving as one hanging run. For the revision card, add one near-miss that exposes calling it an alias for pre-wrap and overlooking intrinsic-size and trailing-space differences. 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: code sample. Explain the rule using tabs, spaces and line breaks that carry meaning. 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 “break-spaces preserves spaces and creates a soft wrap opportunity after every preserved space or tab, with line-edge spaces affecting layout.” Apply this procedure: Test the same long spaced phrase under both values in a narrow container. The expected mechanism is: Preserved spaces can become individual wrapping opportunities instead of behaving as one hanging run. For the code sample, add one near-miss that exposes calling it an alias for pre-wrap and overlooking intrinsic-size and trailing-space differences. 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 it an alias for pre-wrap and overlooking intrinsic-size and trailing-space differences.
- Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
- Repair check: use the reversible procedure “Test the same long spaced phrase under both values in a narrow container.” 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 white-space-collapse syntax. For this chapter, useful prompts are: “What did you expect from break-spaces adds wrap opportunities?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing calling it an alias for pre-wrap and overlooking intrinsic-size and trailing-space differences be made smaller?” The learner, not the parent, should supply the technical explanation.
Practice with an explained answer
Question. Build a tiny CCA notice with multi-line announcements from a content system. Include one ordinary case, one boundary and one deliberate failure caused by calling it an alias for pre-wrap and overlooking intrinsic-size and trailing-space differences. 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: break-spaces preserves spaces and creates a soft wrap opportunity after every preserved space or tab, with line-edge spaces affecting layout. It shows a trace, not only a final value. The ordinary case should demonstrate “Preserved spaces can become individual wrapping opportunities instead of behaving as one hanging run.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: Test the same long spaced phrase under both values in a narrow container. Other data choices are valid when the evidence supports the same causal chain.
Decision and transfer
For break-spaces adds wrap opportunities, separate the documented CSS white-space-collapse 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. discard is a specified but support-sensitive value
The Level 4 grammar includes discard, intended to discard white space, but deployed support must be checked. 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 a draft or unsupported value without a fallback. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. Use CSS.supports and retain a readable baseline declaration first.
For the discard is a specified but support-sensitive value chapter on CSS white-space-collapse, 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 a draft or unsupported value without a fallback. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.
Core worked example
.compact { white-space-collapse: collapse; }
@supports (white-space-collapse: discard) { .compact { white-space-collapse: discard; } }Explained result. Unsupported browsers keep collapse; supporting browsers may apply discard. 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. Contrast the rule using compact prose with optional author-entered breaks. 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 Level 4 grammar includes discard, intended to discard white space, but deployed support must be checked.” Apply this procedure: Use CSS.supports and retain a readable baseline declaration first. The expected mechanism is: Unsupported browsers keep collapse; supporting browsers may apply discard. For the revision card, add one near-miss that exposes using a draft or unsupported value without a fallback. 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: code sample. Stress-test the rule using tabs, spaces and line breaks that carry meaning. 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 Level 4 grammar includes discard, intended to discard white space, but deployed support must be checked.” Apply this procedure: Use CSS.supports and retain a readable baseline declaration first. The expected mechanism is: Unsupported browsers keep collapse; supporting browsers may apply discard. For the code sample, add one near-miss that exposes using a draft or unsupported value without a fallback. 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: chat transcript. Explain the rule using preserved messages within a narrow 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 Level 4 grammar includes discard, intended to discard white space, but deployed support must be checked.” Apply this procedure: Use CSS.supports and retain a readable baseline declaration first. The expected mechanism is: Unsupported browsers keep collapse; supporting browsers may apply discard. For the chat transcript, add one near-miss that exposes using a draft or unsupported value without a fallback. 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: data badge. Transfer the rule using short labels whose source indentation should disappear. 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 Level 4 grammar includes discard, intended to discard white space, but deployed support must be checked.” Apply this procedure: Use CSS.supports and retain a readable baseline declaration first. The expected mechanism is: Unsupported browsers keep collapse; supporting browsers may apply discard. For the data badge, add one near-miss that exposes using a draft or unsupported value without a fallback. 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 a draft or unsupported value without a fallback.
- Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
- Repair check: use the reversible procedure “Use CSS.supports and retain a readable baseline declaration first.” 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 white-space-collapse syntax. For this chapter, useful prompts are: “What did you expect from discard is a specified but support-sensitive value?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing using a draft or unsupported value without a fallback be made smaller?” The learner, not the parent, should supply the technical explanation.
Practice with an explained answer
Question. Build a tiny science output with preformatted readings and aligned values. Include one ordinary case, one boundary and one deliberate failure caused by using a draft or unsupported value without a fallback. 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 Level 4 grammar includes discard, intended to discard white space, but deployed support must be checked. It shows a trace, not only a final value. The ordinary case should demonstrate “Unsupported browsers keep collapse; supporting browsers may apply discard.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: Use CSS.supports and retain a readable baseline declaration first. Other data choices are valid when the evidence supports the same causal chain.
Decision and transfer
For discard is a specified but support-sensitive value, separate the documented CSS white-space-collapse 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
A child normally receives the computed white-space-collapse value of its parent unless it overrides it. 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 preserve on a container and wondering why nested buttons or labels retain spacing. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. Inspect computed style down the tree and reset at semantic boundaries.
For the The property is inherited chapter on CSS white-space-collapse, 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 preserve on a container and wondering why nested buttons or labels retain spacing. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.
Core worked example
.transcript { white-space-collapse: preserve; }
.transcript button { white-space-collapse: collapse; }Explained result. Transcript text preserves spacing while the nested control returns to ordinary collapsed text. 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: chat transcript. Stress-test the rule using preserved messages within a narrow 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 “A child normally receives the computed white-space-collapse value of its parent unless it overrides it.” Apply this procedure: Inspect computed style down the tree and reset at semantic boundaries. The expected mechanism is: Transcript text preserves spacing while the nested control returns to ordinary collapsed text. For the chat transcript, add one near-miss that exposes setting preserve on a container and wondering why nested buttons or labels retain spacing. 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: data badge. Explain the rule using short labels whose source indentation should disappear. 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 child normally receives the computed white-space-collapse value of its parent unless it overrides it.” Apply this procedure: Inspect computed style down the tree and reset at semantic boundaries. The expected mechanism is: Transcript text preserves spacing while the nested control returns to ordinary collapsed text. For the data badge, add one near-miss that exposes setting preserve on a container and wondering why nested buttons or labels retain spacing. 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 explanation. Transfer the rule using indented source text displayed as ordinary prose. 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 child normally receives the computed white-space-collapse value of its parent unless it overrides it.” Apply this procedure: Inspect computed style down the tree and reset at semantic boundaries. The expected mechanism is: Transcript text preserves spacing while the nested control returns to ordinary collapsed text. For the homework explanation, add one near-miss that exposes setting preserve on a container and wondering why nested buttons or labels retain spacing. 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 catalogue. Predict the rule using call-number labels with deliberate spacing. 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 child normally receives the computed white-space-collapse value of its parent unless it overrides it.” Apply this procedure: Inspect computed style down the tree and reset at semantic boundaries. The expected mechanism is: Transcript text preserves spacing while the nested control returns to ordinary collapsed text. For the library catalogue, add one near-miss that exposes setting preserve on a container and wondering why nested buttons or labels retain spacing. 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 preserve on a container and wondering why nested buttons or labels retain spacing.
- Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
- Repair check: use the reversible procedure “Inspect computed style down the tree and reset at semantic boundaries.” 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 white-space-collapse syntax. For this chapter, useful prompts are: “What did you expect from The property is inherited?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing setting preserve on a container and wondering why nested buttons or labels retain spacing be made smaller?” The learner, not the parent, should supply the technical explanation.
Practice with an explained answer
Question. Build a tiny revision card with compact prose with optional author-entered breaks. Include one ordinary case, one boundary and one deliberate failure caused by setting preserve on a container and wondering why nested buttons or labels retain spacing. 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 child normally receives the computed white-space-collapse value of its parent unless it overrides it. It shows a trace, not only a final value. The ordinary case should demonstrate “Transcript text preserves spacing while the nested control returns to ordinary collapsed text.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: Inspect computed style down the tree and reset at semantic boundaries. Other data choices are valid when the evidence supports the same causal chain.
Decision and transfer
For The property is inherited, separate the documented CSS white-space-collapse 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
The white-space shorthand sets collapse behaviour together with wrapping and trimming-related components. 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 white-space later and unintentionally replacing an earlier longhand choice. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. Order declarations deliberately and inspect every resulting longhand.
For the white-space is a shorthand relationship chapter on CSS white-space-collapse, 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 white-space later and unintentionally replacing an earlier longhand choice. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.
Core worked example
.sample { white-space-collapse: preserve; white-space: normal; }Explained result. The later shorthand resets collapse behaviour to the normal mapping rather than preserving the earlier value. 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 explanation. Explain the rule using indented source text displayed as ordinary prose. 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 white-space shorthand sets collapse behaviour together with wrapping and trimming-related components.” Apply this procedure: Order declarations deliberately and inspect every resulting longhand. The expected mechanism is: The later shorthand resets collapse behaviour to the normal mapping rather than preserving the earlier value. For the homework explanation, add one near-miss that exposes setting white-space later and unintentionally replacing an earlier longhand choice. 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 catalogue. Transfer the rule using call-number labels with deliberate spacing. 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 white-space shorthand sets collapse behaviour together with wrapping and trimming-related components.” Apply this procedure: Order declarations deliberately and inspect every resulting longhand. The expected mechanism is: The later shorthand resets collapse behaviour to the normal mapping rather than preserving the earlier value. For the library catalogue, add one near-miss that exposes setting white-space later and unintentionally replacing an earlier longhand choice. 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 notice. Predict the rule using multi-line announcements from a content system. 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 white-space shorthand sets collapse behaviour together with wrapping and trimming-related components.” Apply this procedure: Order declarations deliberately and inspect every resulting longhand. The expected mechanism is: The later shorthand resets collapse behaviour to the normal mapping rather than preserving the earlier value. For the CCA notice, add one near-miss that exposes setting white-space later and unintentionally replacing an earlier longhand choice. 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 output. Contrast the rule using preformatted readings and aligned values. 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 white-space shorthand sets collapse behaviour together with wrapping and trimming-related components.” Apply this procedure: Order declarations deliberately and inspect every resulting longhand. The expected mechanism is: The later shorthand resets collapse behaviour to the normal mapping rather than preserving the earlier value. For the science output, add one near-miss that exposes setting white-space later and unintentionally replacing an earlier longhand choice. 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 white-space later and unintentionally replacing an earlier longhand choice.
- Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
- Repair check: use the reversible procedure “Order declarations deliberately and inspect every resulting longhand.” 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 white-space-collapse syntax. For this chapter, useful prompts are: “What did you expect from white-space is a shorthand relationship?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing setting white-space later and unintentionally replacing an earlier longhand choice be made smaller?” The learner, not the parent, should supply the technical explanation.
Practice with an explained answer
Question. Build a tiny code sample with tabs, spaces and line breaks that carry meaning. Include one ordinary case, one boundary and one deliberate failure caused by setting white-space later and unintentionally replacing an earlier longhand choice. 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 white-space shorthand sets collapse behaviour together with wrapping and trimming-related components. It shows a trace, not only a final value. The ordinary case should demonstrate “The later shorthand resets collapse behaviour to the normal mapping rather than preserving the earlier value.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: Order declarations deliberately and inspect every resulting longhand. Other data choices are valid when the evidence supports the same causal chain.
Decision and transfer
For white-space is a shorthand relationship, separate the documented CSS white-space-collapse 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
white-space-collapse answers how whitespace is treated, while text-wrap-mode answers whether unforced wrapping is allowed. 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 blaming collapse mode for a nowrap rule. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. Record both computed properties and test a long unbroken phrase separately.
For the Wrapping is a separate axis chapter on CSS white-space-collapse, 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 blaming collapse mode for a nowrap rule. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.
Core worked example
.line { white-space-collapse: preserve; text-wrap-mode: nowrap; }Explained result. Spaces are preserved but ordinary soft wrapping is disabled by the second property. 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 notice. Transfer the rule using multi-line announcements from a content system. 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 “white-space-collapse answers how whitespace is treated, while text-wrap-mode answers whether unforced wrapping is allowed.” Apply this procedure: Record both computed properties and test a long unbroken phrase separately. The expected mechanism is: Spaces are preserved but ordinary soft wrapping is disabled by the second property. For the CCA notice, add one near-miss that exposes blaming collapse mode for a nowrap rule. 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 output. Predict the rule using preformatted readings and aligned values. 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 “white-space-collapse answers how whitespace is treated, while text-wrap-mode answers whether unforced wrapping is allowed.” Apply this procedure: Record both computed properties and test a long unbroken phrase separately. The expected mechanism is: Spaces are preserved but ordinary soft wrapping is disabled by the second property. For the science output, add one near-miss that exposes blaming collapse mode for a nowrap rule. 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. Contrast the rule using compact prose with optional author-entered breaks. 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 “white-space-collapse answers how whitespace is treated, while text-wrap-mode answers whether unforced wrapping is allowed.” Apply this procedure: Record both computed properties and test a long unbroken phrase separately. The expected mechanism is: Spaces are preserved but ordinary soft wrapping is disabled by the second property. For the revision card, add one near-miss that exposes blaming collapse mode for a nowrap rule. 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: code sample. Stress-test the rule using tabs, spaces and line breaks that carry meaning. 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 “white-space-collapse answers how whitespace is treated, while text-wrap-mode answers whether unforced wrapping is allowed.” Apply this procedure: Record both computed properties and test a long unbroken phrase separately. The expected mechanism is: Spaces are preserved but ordinary soft wrapping is disabled by the second property. For the code sample, add one near-miss that exposes blaming collapse mode for a nowrap rule. 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 blaming collapse mode for a nowrap rule.
- Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
- Repair check: use the reversible procedure “Record both computed properties and test a long unbroken phrase 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 white-space-collapse syntax. For this chapter, useful prompts are: “What did you expect from Wrapping is a separate axis?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing blaming collapse mode for a nowrap rule be made smaller?” The learner, not the parent, should supply the technical explanation.
Practice with an explained answer
Question. Build a tiny chat transcript with preserved messages within a narrow panel. Include one ordinary case, one boundary and one deliberate failure caused by blaming collapse mode for a nowrap rule. 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: white-space-collapse answers how whitespace is treated, while text-wrap-mode answers whether unforced wrapping is allowed. It shows a trace, not only a final value. The ordinary case should demonstrate “Spaces are preserved but ordinary soft wrapping is disabled by the second property.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: Record both computed properties and test a long unbroken phrase separately. Other data choices are valid when the evidence supports the same causal chain.
Decision and transfer
For Wrapping is a separate axis, separate the documented CSS white-space-collapse 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
Source newline sequences become segment breaks and are transformed or preserved according to the selected mode and language-sensitive rules. 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 every source newline always renders as one U+0020 space. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. Use a minimal DOM fixture with one known newline and the document language set.
For the Segment breaks are processed deliberately chapter on CSS white-space-collapse, 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 every source newline always renders as one U+0020 space. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.
Core worked example
<p class="ordinary">A
B</p>
<style>.ordinary{white-space-collapse:collapse}</style>Explained result. The segment break is processed for rendering; it is not automatically a visible hard line break. 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. Predict the rule using compact prose with optional author-entered breaks. 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 “Source newline sequences become segment breaks and are transformed or preserved according to the selected mode and language-sensitive rules.” Apply this procedure: Use a minimal DOM fixture with one known newline and the document language set. The expected mechanism is: The segment break is processed for rendering; it is not automatically a visible hard line break. For the revision card, add one near-miss that exposes assuming every source newline always renders as one U+0020 space. 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: code sample. Contrast the rule using tabs, spaces and line breaks that carry meaning. 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 “Source newline sequences become segment breaks and are transformed or preserved according to the selected mode and language-sensitive rules.” Apply this procedure: Use a minimal DOM fixture with one known newline and the document language set. The expected mechanism is: The segment break is processed for rendering; it is not automatically a visible hard line break. For the code sample, add one near-miss that exposes assuming every source newline always renders as one U+0020 space. 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: chat transcript. Stress-test the rule using preserved messages within a narrow 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 “Source newline sequences become segment breaks and are transformed or preserved according to the selected mode and language-sensitive rules.” Apply this procedure: Use a minimal DOM fixture with one known newline and the document language set. The expected mechanism is: The segment break is processed for rendering; it is not automatically a visible hard line break. For the chat transcript, add one near-miss that exposes assuming every source newline always renders as one U+0020 space. 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: data badge. Explain the rule using short labels whose source indentation should disappear. 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 “Source newline sequences become segment breaks and are transformed or preserved according to the selected mode and language-sensitive rules.” Apply this procedure: Use a minimal DOM fixture with one known newline and the document language set. The expected mechanism is: The segment break is processed for rendering; it is not automatically a visible hard line break. For the data badge, add one near-miss that exposes assuming every source newline always renders as one U+0020 space. 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 every source newline always renders as one U+0020 space.
- Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
- Repair check: use the reversible procedure “Use a minimal DOM fixture with one known newline and the document language set.” 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 white-space-collapse syntax. For this chapter, useful prompts are: “What did you expect from Segment breaks are processed deliberately?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing assuming every source newline always renders as one U+0020 space be made smaller?” The learner, not the parent, should supply the technical explanation.
Practice with an explained answer
Question. Build a tiny data badge with short labels whose source indentation should disappear. Include one ordinary case, one boundary and one deliberate failure caused by assuming every source newline always renders as one U+0020 space. 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: Source newline sequences become segment breaks and are transformed or preserved according to the selected mode and language-sensitive rules. It shows a trace, not only a final value. The ordinary case should demonstrate “The segment break is processed for rendering; it is not automatically a visible hard line break.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: Use a minimal DOM fixture with one known newline and the document language set. Other data choices are valid when the evidence supports the same causal chain.
Decision and transfer
For Segment breaks are processed deliberately, separate the documented CSS white-space-collapse 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
When tabs are preserved, tab-size influences their advance; when collapsible, tabs are converted within the collapse process. 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 adjusting tab-size while the chosen mode already collapses tabs. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. Verify the collapse mode first, then compare tab stops in a monospaced test.
For the Tabs interact with tab-size chapter on CSS white-space-collapse, 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 adjusting tab-size while the chosen mode already collapses tabs. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.
Core worked example
.code { white-space-collapse: preserve; tab-size: 4; }Explained result. A preserved tab uses the chosen tab sizing rather than collapsing into ordinary prose spacing. 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: chat transcript. Contrast the rule using preserved messages within a narrow 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 tabs are preserved, tab-size influences their advance; when collapsible, tabs are converted within the collapse process.” Apply this procedure: Verify the collapse mode first, then compare tab stops in a monospaced test. The expected mechanism is: A preserved tab uses the chosen tab sizing rather than collapsing into ordinary prose spacing. For the chat transcript, add one near-miss that exposes adjusting tab-size while the chosen mode already collapses tabs. 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: data badge. Stress-test the rule using short labels whose source indentation should disappear. 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 tabs are preserved, tab-size influences their advance; when collapsible, tabs are converted within the collapse process.” Apply this procedure: Verify the collapse mode first, then compare tab stops in a monospaced test. The expected mechanism is: A preserved tab uses the chosen tab sizing rather than collapsing into ordinary prose spacing. For the data badge, add one near-miss that exposes adjusting tab-size while the chosen mode already collapses tabs. 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 explanation. Explain the rule using indented source text displayed as ordinary prose. 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 tabs are preserved, tab-size influences their advance; when collapsible, tabs are converted within the collapse process.” Apply this procedure: Verify the collapse mode first, then compare tab stops in a monospaced test. The expected mechanism is: A preserved tab uses the chosen tab sizing rather than collapsing into ordinary prose spacing. For the homework explanation, add one near-miss that exposes adjusting tab-size while the chosen mode already collapses tabs. 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 catalogue. Transfer the rule using call-number labels with deliberate spacing. 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 tabs are preserved, tab-size influences their advance; when collapsible, tabs are converted within the collapse process.” Apply this procedure: Verify the collapse mode first, then compare tab stops in a monospaced test. The expected mechanism is: A preserved tab uses the chosen tab sizing rather than collapsing into ordinary prose spacing. For the library catalogue, add one near-miss that exposes adjusting tab-size while the chosen mode already collapses tabs. 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 adjusting tab-size while the chosen mode already collapses tabs.
- Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
- Repair check: use the reversible procedure “Verify the collapse mode first, then compare tab stops in a monospaced test.” 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 white-space-collapse syntax. For this chapter, useful prompts are: “What did you expect from Tabs interact with tab-size?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing adjusting tab-size while the chosen mode already collapses tabs be made smaller?” The learner, not the parent, should supply the technical explanation.
Practice with an explained answer
Question. Build a tiny homework explanation with indented source text displayed as ordinary prose. Include one ordinary case, one boundary and one deliberate failure caused by adjusting tab-size while the chosen mode already collapses tabs. 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 tabs are preserved, tab-size influences their advance; when collapsible, tabs are converted within the collapse process. It shows a trace, not only a final value. The ordinary case should demonstrate “A preserved tab uses the chosen tab sizing rather than collapsing into ordinary prose spacing.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: Verify the collapse mode first, then compare tab stops in a monospaced test. Other data choices are valid when the evidence supports the same causal chain.
Decision and transfer
For Tabs interact with tab-size, separate the documented CSS white-space-collapse 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. Inline boundaries do not guarantee visible gaps
Collapsible spaces can interact across adjacent inline boxes within the same formatting context. 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 formatting spans and assuming each boundary protects one space. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. Test the final DOM produced by the template, not only isolated source fragments.
For the Inline boundaries do not guarantee visible gaps chapter on CSS white-space-collapse, 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 formatting spans and assuming each boundary protects one space. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.
Core worked example
<span>A </span><strong> B</strong>Explained result. Under collapse processing, the adjacent whitespace does not necessarily create two visible gaps. 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 explanation. Stress-test the rule using indented source text displayed as ordinary prose. 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 “Collapsible spaces can interact across adjacent inline boxes within the same formatting context.” Apply this procedure: Test the final DOM produced by the template, not only isolated source fragments. The expected mechanism is: Under collapse processing, the adjacent whitespace does not necessarily create two visible gaps. For the homework explanation, add one near-miss that exposes adding formatting spans and assuming each boundary protects one space. 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 catalogue. Explain the rule using call-number labels with deliberate spacing. 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 “Collapsible spaces can interact across adjacent inline boxes within the same formatting context.” Apply this procedure: Test the final DOM produced by the template, not only isolated source fragments. The expected mechanism is: Under collapse processing, the adjacent whitespace does not necessarily create two visible gaps. For the library catalogue, add one near-miss that exposes adding formatting spans and assuming each boundary protects one space. 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 notice. Transfer the rule using multi-line announcements from a content system. 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 “Collapsible spaces can interact across adjacent inline boxes within the same formatting context.” Apply this procedure: Test the final DOM produced by the template, not only isolated source fragments. The expected mechanism is: Under collapse processing, the adjacent whitespace does not necessarily create two visible gaps. For the CCA notice, add one near-miss that exposes adding formatting spans and assuming each boundary protects one space. 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 output. Predict the rule using preformatted readings and aligned values. 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 “Collapsible spaces can interact across adjacent inline boxes within the same formatting context.” Apply this procedure: Test the final DOM produced by the template, not only isolated source fragments. The expected mechanism is: Under collapse processing, the adjacent whitespace does not necessarily create two visible gaps. For the science output, add one near-miss that exposes adding formatting spans and assuming each boundary protects one space. 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 formatting spans and assuming each boundary protects one space.
- Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
- Repair check: use the reversible procedure “Test the final DOM produced by the template, not only isolated source fragments.” 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 white-space-collapse syntax. For this chapter, useful prompts are: “What did you expect from Inline boundaries do not guarantee visible gaps?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing adding formatting spans and assuming each boundary protects one space be made smaller?” The learner, not the parent, should supply the technical explanation.
Practice with an explained answer
Question. Build a tiny library catalogue with call-number labels with deliberate spacing. Include one ordinary case, one boundary and one deliberate failure caused by adding formatting spans and assuming each boundary protects one space. 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: Collapsible spaces can interact across adjacent inline boxes within the same formatting context. It shows a trace, not only a final value. The ordinary case should demonstrate “Under collapse processing, the adjacent whitespace does not necessarily create two visible gaps.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: Test the final DOM produced by the template, not only isolated source fragments. Other data choices are valid when the evidence supports the same causal chain.
Decision and transfer
For Inline boundaries do not guarantee visible gaps, separate the documented CSS white-space-collapse 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
U+00A0 is a space separator with non-breaking semantics, not a substitute for ordinary authoring indentation. 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 filling layouts with non-breaking spaces to force alignment. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. Use layout properties for alignment and reserve non-breaking spaces for genuine no-break text relationships.
For the Non-breaking space has a different role chapter on CSS white-space-collapse, 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 filling layouts with non-breaking spaces to force alignment. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.
Core worked example
<span>10 kg</span>Explained result. The unit can remain attached to the number, but the character should not be used as a general spacing tool. 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 notice. Explain the rule using multi-line announcements from a content system. 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 “U+00A0 is a space separator with non-breaking semantics, not a substitute for ordinary authoring indentation.” Apply this procedure: Use layout properties for alignment and reserve non-breaking spaces for genuine no-break text relationships. The expected mechanism is: The unit can remain attached to the number, but the character should not be used as a general spacing tool. For the CCA notice, add one near-miss that exposes filling layouts with non-breaking spaces to force alignment. 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 output. Transfer the rule using preformatted readings and aligned values. 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 “U+00A0 is a space separator with non-breaking semantics, not a substitute for ordinary authoring indentation.” Apply this procedure: Use layout properties for alignment and reserve non-breaking spaces for genuine no-break text relationships. The expected mechanism is: The unit can remain attached to the number, but the character should not be used as a general spacing tool. For the science output, add one near-miss that exposes filling layouts with non-breaking spaces to force alignment. 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. Predict the rule using compact prose with optional author-entered breaks. 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 “U+00A0 is a space separator with non-breaking semantics, not a substitute for ordinary authoring indentation.” Apply this procedure: Use layout properties for alignment and reserve non-breaking spaces for genuine no-break text relationships. The expected mechanism is: The unit can remain attached to the number, but the character should not be used as a general spacing tool. For the revision card, add one near-miss that exposes filling layouts with non-breaking spaces to force alignment. 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: code sample. Contrast the rule using tabs, spaces and line breaks that carry meaning. 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 “U+00A0 is a space separator with non-breaking semantics, not a substitute for ordinary authoring indentation.” Apply this procedure: Use layout properties for alignment and reserve non-breaking spaces for genuine no-break text relationships. The expected mechanism is: The unit can remain attached to the number, but the character should not be used as a general spacing tool. For the code sample, add one near-miss that exposes filling layouts with non-breaking spaces to force alignment. 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 filling layouts with non-breaking spaces to force alignment.
- Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
- Repair check: use the reversible procedure “Use layout properties for alignment and reserve non-breaking spaces for genuine no-break text relationships.” 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 white-space-collapse syntax. For this chapter, useful prompts are: “What did you expect from Non-breaking space has a different role?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing filling layouts with non-breaking spaces to force alignment be made smaller?” The learner, not the parent, should supply the technical explanation.
Practice with an explained answer
Question. Build a tiny CCA notice with multi-line announcements from a content system. Include one ordinary case, one boundary and one deliberate failure caused by filling layouts with non-breaking spaces to force alignment. 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: U+00A0 is a space separator with non-breaking semantics, not a substitute for ordinary authoring indentation. It shows a trace, not only a final value. The ordinary case should demonstrate “The unit can remain attached to the number, but the character should not be used as a general spacing tool.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: Use layout properties for alignment and reserve non-breaking spaces for genuine no-break text relationships. Other data choices are valid when the evidence supports the same causal chain.
Decision and transfer
For Non-breaking space has a different role, separate the documented CSS white-space-collapse 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
Preserved and break-spaces modes differ in whether spaces hang or consume advance at line edges, which can influence min-content or 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 testing only in a wide desktop viewport. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. Measure a narrow box, trailing spaces and intrinsic-size behaviour in target browsers.
For the Line-edge spaces can affect intrinsic sizing chapter on CSS white-space-collapse, 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 testing only in a wide desktop viewport. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.
Core worked example
.chip { white-space-collapse: break-spaces; max-width: 8rem; }Explained result. Preserved edge spaces can contribute to line layout rather than disappearing like collapsed trailing spaces. 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. Transfer the rule using compact prose with optional author-entered breaks. 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 “Preserved and break-spaces modes differ in whether spaces hang or consume advance at line edges, which can influence min-content or overflow.” Apply this procedure: Measure a narrow box, trailing spaces and intrinsic-size behaviour in target browsers. The expected mechanism is: Preserved edge spaces can contribute to line layout rather than disappearing like collapsed trailing spaces. For the revision card, add one near-miss that exposes testing only in a wide desktop viewport. 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: code sample. Predict the rule using tabs, spaces and line breaks that carry meaning. 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 “Preserved and break-spaces modes differ in whether spaces hang or consume advance at line edges, which can influence min-content or overflow.” Apply this procedure: Measure a narrow box, trailing spaces and intrinsic-size behaviour in target browsers. The expected mechanism is: Preserved edge spaces can contribute to line layout rather than disappearing like collapsed trailing spaces. For the code sample, add one near-miss that exposes testing only in a wide desktop viewport. 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: chat transcript. Contrast the rule using preserved messages within a narrow 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 “Preserved and break-spaces modes differ in whether spaces hang or consume advance at line edges, which can influence min-content or overflow.” Apply this procedure: Measure a narrow box, trailing spaces and intrinsic-size behaviour in target browsers. The expected mechanism is: Preserved edge spaces can contribute to line layout rather than disappearing like collapsed trailing spaces. For the chat transcript, add one near-miss that exposes testing only in a wide desktop viewport. 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: data badge. Stress-test the rule using short labels whose source indentation should disappear. 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 “Preserved and break-spaces modes differ in whether spaces hang or consume advance at line edges, which can influence min-content or overflow.” Apply this procedure: Measure a narrow box, trailing spaces and intrinsic-size behaviour in target browsers. The expected mechanism is: Preserved edge spaces can contribute to line layout rather than disappearing like collapsed trailing spaces. For the data badge, add one near-miss that exposes testing only in a wide desktop viewport. 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 testing only in a wide desktop viewport.
- Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
- Repair check: use the reversible procedure “Measure a narrow box, trailing spaces and intrinsic-size behaviour in target browsers.” 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 white-space-collapse syntax. For this chapter, useful prompts are: “What did you expect from Line-edge spaces can affect intrinsic sizing?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing testing only in a wide desktop viewport be made smaller?” The learner, not the parent, should supply the technical explanation.
Practice with an explained answer
Question. Build a tiny science output with preformatted readings and aligned values. Include one ordinary case, one boundary and one deliberate failure caused by testing only in a wide desktop viewport. 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: Preserved and break-spaces modes differ in whether spaces hang or consume advance at line edges, which can influence min-content or overflow. It shows a trace, not only a final value. The ordinary case should demonstrate “Preserved edge spaces can contribute to line layout rather than disappearing like collapsed trailing spaces.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: Measure a narrow box, trailing spaces and intrinsic-size behaviour in target browsers. Other data choices are valid when the evidence supports the same causal chain.
Decision and transfer
For Line-edge spaces can affect intrinsic sizing, separate the documented CSS white-space-collapse 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
white-space-collapse switches between keyword states; it does not interpolate a gradual amount of collapsing. 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 a transition and expecting spaces to smoothly spread apart. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. Test before and after states and avoid making essential readability depend on an animated switch.
For the The animation type is discrete chapter on CSS white-space-collapse, 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 a transition and expecting spaces to smoothly spread apart. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.
Core worked example
.note { transition: white-space-collapse .2s; }Explained result. The property changes discretely rather than producing intermediate spacing states. 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: chat transcript. Predict the rule using preserved messages within a narrow 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 “white-space-collapse switches between keyword states; it does not interpolate a gradual amount of collapsing.” Apply this procedure: Test before and after states and avoid making essential readability depend on an animated switch. The expected mechanism is: The property changes discretely rather than producing intermediate spacing states. For the chat transcript, add one near-miss that exposes adding a transition and expecting spaces to smoothly spread apart. 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: data badge. Contrast the rule using short labels whose source indentation should disappear. 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 “white-space-collapse switches between keyword states; it does not interpolate a gradual amount of collapsing.” Apply this procedure: Test before and after states and avoid making essential readability depend on an animated switch. The expected mechanism is: The property changes discretely rather than producing intermediate spacing states. For the data badge, add one near-miss that exposes adding a transition and expecting spaces to smoothly spread apart. 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 explanation. Stress-test the rule using indented source text displayed as ordinary prose. 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 “white-space-collapse switches between keyword states; it does not interpolate a gradual amount of collapsing.” Apply this procedure: Test before and after states and avoid making essential readability depend on an animated switch. The expected mechanism is: The property changes discretely rather than producing intermediate spacing states. For the homework explanation, add one near-miss that exposes adding a transition and expecting spaces to smoothly spread apart. 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 catalogue. Explain the rule using call-number labels with deliberate spacing. 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 “white-space-collapse switches between keyword states; it does not interpolate a gradual amount of collapsing.” Apply this procedure: Test before and after states and avoid making essential readability depend on an animated switch. The expected mechanism is: The property changes discretely rather than producing intermediate spacing states. For the library catalogue, add one near-miss that exposes adding a transition and expecting spaces to smoothly spread apart. 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 a transition and expecting spaces to smoothly spread apart.
- Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
- Repair check: use the reversible procedure “Test before and after states and avoid making essential readability depend on an animated switch.” 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 white-space-collapse syntax. For this chapter, useful prompts are: “What did you expect from The animation type is discrete?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing adding a transition and expecting spaces to smoothly spread apart be made smaller?” The learner, not the parent, should supply the technical explanation.
Practice with an explained answer
Question. Build a tiny revision card with compact prose with optional author-entered breaks. Include one ordinary case, one boundary and one deliberate failure caused by adding a transition and expecting spaces to smoothly spread apart. 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: white-space-collapse switches between keyword states; it does not interpolate a gradual amount of collapsing. It shows a trace, not only a final value. The ordinary case should demonstrate “The property changes discretely rather than producing intermediate spacing states.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: Test before and after states and avoid making essential readability depend on an animated switch. Other data choices are valid when the evidence supports the same causal chain.
Decision and transfer
For The animation type is discrete, separate the documented CSS white-space-collapse 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. Feature detection protects progressive enhancement
Longhand support and individual values can differ across deployed 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 assuming that parsing the property proves every value has the required behaviour. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. Use CSS.supports for the exact declaration and include a shorthand fallback with tested semantics.
For the Feature detection protects progressive enhancement chapter on CSS white-space-collapse, 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 that parsing the property proves every value has the required behaviour. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.
Core worked example
const ok=CSS.supports('white-space-collapse','break-spaces');
console.log(ok);Explained result. The result reports parsing support for that property-value pair in the current browser. 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 explanation. Contrast the rule using indented source text displayed as ordinary prose. 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 “Longhand support and individual values can differ across deployed browsers.” Apply this procedure: Use CSS.supports for the exact declaration and include a shorthand fallback with tested semantics. The expected mechanism is: The result reports parsing support for that property-value pair in the current browser. For the homework explanation, add one near-miss that exposes assuming that parsing the property proves every value has the required behaviour. 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 catalogue. Stress-test the rule using call-number labels with deliberate spacing. 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 “Longhand support and individual values can differ across deployed browsers.” Apply this procedure: Use CSS.supports for the exact declaration and include a shorthand fallback with tested semantics. The expected mechanism is: The result reports parsing support for that property-value pair in the current browser. For the library catalogue, add one near-miss that exposes assuming that parsing the property proves every value has the required behaviour. 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 notice. Explain the rule using multi-line announcements from a content system. 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 “Longhand support and individual values can differ across deployed browsers.” Apply this procedure: Use CSS.supports for the exact declaration and include a shorthand fallback with tested semantics. The expected mechanism is: The result reports parsing support for that property-value pair in the current browser. For the CCA notice, add one near-miss that exposes assuming that parsing the property proves every value has the required behaviour. 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 output. Transfer the rule using preformatted readings and aligned values. 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 “Longhand support and individual values can differ across deployed browsers.” Apply this procedure: Use CSS.supports for the exact declaration and include a shorthand fallback with tested semantics. The expected mechanism is: The result reports parsing support for that property-value pair in the current browser. For the science output, add one near-miss that exposes assuming that parsing the property proves every value has the required behaviour. 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 that parsing the property proves every value has the required behaviour.
- Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
- Repair check: use the reversible procedure “Use CSS.supports for the exact declaration and include a shorthand fallback with tested semantics.” 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 white-space-collapse syntax. For this chapter, useful prompts are: “What did you expect from Feature detection protects progressive enhancement?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing assuming that parsing the property proves every value has the required behaviour be made smaller?” The learner, not the parent, should supply the technical explanation.
Practice with an explained answer
Question. Build a tiny code sample with tabs, spaces and line breaks that carry meaning. Include one ordinary case, one boundary and one deliberate failure caused by assuming that parsing the property proves every value has the required behaviour. 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: Longhand support and individual values can differ across deployed browsers. It shows a trace, not only a final value. The ordinary case should demonstrate “The result reports parsing support for that property-value pair in the current browser.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: Use CSS.supports for the exact declaration and include a shorthand fallback with tested semantics. Other data choices are valid when the evidence supports the same causal chain.
Decision and transfer
For Feature detection protects progressive enhancement, separate the documented CSS white-space-collapse 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. Computed style is evidence, not the whole visual test
getComputedStyle reports the resolved keyword, but layout still depends on fonts, width, wrapping and 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 seeing the expected computed value and declaring rendering verified. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. Combine computed-style assertions with geometry or screenshot fixtures.
For the Computed style is evidence, not the whole visual test chapter on CSS white-space-collapse, 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 seeing the expected computed value and declaring rendering verified. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.
Core worked example
const value=getComputedStyle(document.querySelector('.sample')).whiteSpaceCollapse;Explained result. The string can confirm the applied rule, while a visual or geometry test confirms its consequence. 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 notice. Stress-test the rule using multi-line announcements from a content system. 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 “getComputedStyle reports the resolved keyword, but layout still depends on fonts, width, wrapping and content.” Apply this procedure: Combine computed-style assertions with geometry or screenshot fixtures. The expected mechanism is: The string can confirm the applied rule, while a visual or geometry test confirms its consequence. For the CCA notice, add one near-miss that exposes seeing the expected computed value and declaring rendering verified. 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 output. Explain the rule using preformatted readings and aligned values. 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 “getComputedStyle reports the resolved keyword, but layout still depends on fonts, width, wrapping and content.” Apply this procedure: Combine computed-style assertions with geometry or screenshot fixtures. The expected mechanism is: The string can confirm the applied rule, while a visual or geometry test confirms its consequence. For the science output, add one near-miss that exposes seeing the expected computed value and declaring rendering verified. 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. Transfer the rule using compact prose with optional author-entered breaks. 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 “getComputedStyle reports the resolved keyword, but layout still depends on fonts, width, wrapping and content.” Apply this procedure: Combine computed-style assertions with geometry or screenshot fixtures. The expected mechanism is: The string can confirm the applied rule, while a visual or geometry test confirms its consequence. For the revision card, add one near-miss that exposes seeing the expected computed value and declaring rendering verified. 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: code sample. Predict the rule using tabs, spaces and line breaks that carry meaning. 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 “getComputedStyle reports the resolved keyword, but layout still depends on fonts, width, wrapping and content.” Apply this procedure: Combine computed-style assertions with geometry or screenshot fixtures. The expected mechanism is: The string can confirm the applied rule, while a visual or geometry test confirms its consequence. For the code sample, add one near-miss that exposes seeing the expected computed value and declaring rendering verified. 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 seeing the expected computed value and declaring rendering verified.
- Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
- Repair check: use the reversible procedure “Combine computed-style assertions with geometry or screenshot fixtures.” 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 white-space-collapse syntax. For this chapter, useful prompts are: “What did you expect from Computed style is evidence, not the whole visual test?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing seeing the expected computed value and declaring rendering verified be made smaller?” The learner, not the parent, should supply the technical explanation.
Practice with an explained answer
Question. Build a tiny chat transcript with preserved messages within a narrow panel. Include one ordinary case, one boundary and one deliberate failure caused by seeing the expected computed value and declaring rendering verified. 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: getComputedStyle reports the resolved keyword, but layout still depends on fonts, width, wrapping and content. It shows a trace, not only a final value. The ordinary case should demonstrate “The string can confirm the applied rule, while a visual or geometry test confirms its consequence.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: Combine computed-style assertions with geometry or screenshot fixtures. Other data choices are valid when the evidence supports the same causal chain.
Decision and transfer
For Computed style is evidence, not the whole visual test, separate the documented CSS white-space-collapse 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. Copying and accessibility need direct checks
Visual whitespace handling does not define every selection, copying, speech or assistive-technology outcome. 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 inferring accessible meaning from the appearance of aligned spaces. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. Use semantic markup, accessible names and real interaction tests for required workflows.
For the Copying and accessibility need direct checks chapter on CSS white-space-collapse, 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 inferring accessible meaning from the appearance of aligned spaces. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.
Core worked example
<pre class="code" aria-label="Example output">A B</pre>Explained result. The semantic container and label support interpretation; the CSS value alone is not an accessibility contract. 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. Explain the rule using compact prose with optional author-entered breaks. 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 “Visual whitespace handling does not define every selection, copying, speech or assistive-technology outcome.” Apply this procedure: Use semantic markup, accessible names and real interaction tests for required workflows. The expected mechanism is: The semantic container and label support interpretation; the CSS value alone is not an accessibility contract. For the revision card, add one near-miss that exposes inferring accessible meaning from the appearance of aligned spaces. 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: code sample. Transfer the rule using tabs, spaces and line breaks that carry meaning. 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 “Visual whitespace handling does not define every selection, copying, speech or assistive-technology outcome.” Apply this procedure: Use semantic markup, accessible names and real interaction tests for required workflows. The expected mechanism is: The semantic container and label support interpretation; the CSS value alone is not an accessibility contract. For the code sample, add one near-miss that exposes inferring accessible meaning from the appearance of aligned spaces. 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: chat transcript. Predict the rule using preserved messages within a narrow 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 “Visual whitespace handling does not define every selection, copying, speech or assistive-technology outcome.” Apply this procedure: Use semantic markup, accessible names and real interaction tests for required workflows. The expected mechanism is: The semantic container and label support interpretation; the CSS value alone is not an accessibility contract. For the chat transcript, add one near-miss that exposes inferring accessible meaning from the appearance of aligned spaces. 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: data badge. Contrast the rule using short labels whose source indentation should disappear. 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 “Visual whitespace handling does not define every selection, copying, speech or assistive-technology outcome.” Apply this procedure: Use semantic markup, accessible names and real interaction tests for required workflows. The expected mechanism is: The semantic container and label support interpretation; the CSS value alone is not an accessibility contract. For the data badge, add one near-miss that exposes inferring accessible meaning from the appearance of aligned spaces. 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 inferring accessible meaning from the appearance of aligned spaces.
- Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
- Repair check: use the reversible procedure “Use semantic markup, accessible names and real interaction tests for required workflows.” 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 white-space-collapse syntax. For this chapter, useful prompts are: “What did you expect from Copying and accessibility need direct checks?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing inferring accessible meaning from the appearance of aligned spaces be made smaller?” The learner, not the parent, should supply the technical explanation.
Practice with an explained answer
Question. Build a tiny data badge with short labels whose source indentation should disappear. Include one ordinary case, one boundary and one deliberate failure caused by inferring accessible meaning from the appearance of aligned spaces. 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: Visual whitespace handling does not define every selection, copying, speech or assistive-technology outcome. It shows a trace, not only a final value. The ordinary case should demonstrate “The semantic container and label support interpretation; the CSS value alone is not an accessibility contract.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: Use semantic markup, accessible names and real interaction tests for required workflows. Other data choices are valid when the evidence supports the same causal chain.
Decision and transfer
For Copying and accessibility need direct checks, separate the documented CSS white-space-collapse 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
Use collapse for prose, preservation for meaningful formatting, preserve-breaks for authored lines, and break-spaces only when its exact wrapping model is needed. 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 selecting a modern value for novelty without a content requirement. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. Write the content invariant, fallback and narrow-screen test before choosing.
For the Choose the narrowest readable policy chapter on CSS white-space-collapse, 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 selecting a modern value for novelty without a content requirement. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.
Core worked example
.prose { white-space: normal; }
.output { white-space: pre-wrap; }Explained result. Familiar shorthand fallbacks can carry the baseline while a supported longhand refines one specific job. 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: chat transcript. Transfer the rule using preserved messages within a narrow 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 “Use collapse for prose, preservation for meaningful formatting, preserve-breaks for authored lines, and break-spaces only when its exact wrapping model is needed.” Apply this procedure: Write the content invariant, fallback and narrow-screen test before choosing. The expected mechanism is: Familiar shorthand fallbacks can carry the baseline while a supported longhand refines one specific job. For the chat transcript, add one near-miss that exposes selecting a modern value for novelty without a content requirement. 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: data badge. Predict the rule using short labels whose source indentation should disappear. 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 “Use collapse for prose, preservation for meaningful formatting, preserve-breaks for authored lines, and break-spaces only when its exact wrapping model is needed.” Apply this procedure: Write the content invariant, fallback and narrow-screen test before choosing. The expected mechanism is: Familiar shorthand fallbacks can carry the baseline while a supported longhand refines one specific job. For the data badge, add one near-miss that exposes selecting a modern value for novelty without a content requirement. 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 explanation. Contrast the rule using indented source text displayed as ordinary prose. 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 “Use collapse for prose, preservation for meaningful formatting, preserve-breaks for authored lines, and break-spaces only when its exact wrapping model is needed.” Apply this procedure: Write the content invariant, fallback and narrow-screen test before choosing. The expected mechanism is: Familiar shorthand fallbacks can carry the baseline while a supported longhand refines one specific job. For the homework explanation, add one near-miss that exposes selecting a modern value for novelty without a content requirement. 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 catalogue. Stress-test the rule using call-number labels with deliberate spacing. 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 “Use collapse for prose, preservation for meaningful formatting, preserve-breaks for authored lines, and break-spaces only when its exact wrapping model is needed.” Apply this procedure: Write the content invariant, fallback and narrow-screen test before choosing. The expected mechanism is: Familiar shorthand fallbacks can carry the baseline while a supported longhand refines one specific job. For the library catalogue, add one near-miss that exposes selecting a modern value for novelty without a content requirement. 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 selecting a modern value for novelty without a content requirement.
- Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
- Repair check: use the reversible procedure “Write the content invariant, fallback and narrow-screen test before choosing.” 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 white-space-collapse syntax. For this chapter, useful prompts are: “What did you expect from Choose the narrowest readable policy?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing selecting a modern value for novelty without a content requirement be made smaller?” The learner, not the parent, should supply the technical explanation.
Practice with an explained answer
Question. Build a tiny homework explanation with indented source text displayed as ordinary prose. Include one ordinary case, one boundary and one deliberate failure caused by selecting a modern value for novelty without a content requirement. 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: Use collapse for prose, preservation for meaningful formatting, preserve-breaks for authored lines, and break-spaces only when its exact wrapping model is needed. It shows a trace, not only a final value. The ordinary case should demonstrate “Familiar shorthand fallbacks can carry the baseline while a supported longhand refines one specific job.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: Write the content invariant, fallback and narrow-screen test before choosing. Other data choices are valid when the evidence supports the same causal chain.
Decision and transfer
For Choose the narrowest readable policy, separate the documented CSS white-space-collapse 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 explanation: model, boundary and recovery
Create a small homework explanation using indented source text displayed as ordinary prose. Combine “Rendering changes while source data remains” 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: white-space-collapse affects interpretation for layout; it does not delete or rewrite text nodes in the document. Apply: Compare textContent with rendered geometry in a controlled fixture. Verify: The browser may render one collapsible space while the DOM still contains the original characters. 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 catalogue: model, boundary and recovery
Create a small library catalogue using call-number labels with deliberate spacing. Combine “preserve-breaks keeps breaks but collapses spaces” 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: preserve-breaks retains segment breaks while collapsing other collapsible white space. Apply: Use multiple spaces on one line and one deliberate newline in the same fixture. Verify: The line break remains meaningful while runs of ordinary spaces are collapsed. 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 notice: model, boundary and recovery
Create a small CCA notice using multi-line announcements from a content system. Combine “discard is a specified but support-sensitive value” 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: The Level 4 grammar includes discard, intended to discard white space, but deployed support must be checked. Apply: Use CSS.supports and retain a readable baseline declaration first. Verify: Unsupported browsers keep collapse; supporting browsers may apply discard. 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 output: model, boundary and recovery
Create a small science output using preformatted readings and aligned values. Combine “Wrapping is a separate axis” 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: white-space-collapse answers how whitespace is treated, while text-wrap-mode answers whether unforced wrapping is allowed. Apply: Record both computed properties and test a long unbroken phrase separately. Verify: Spaces are preserved but ordinary soft wrapping is disabled by the second property. 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: model, boundary and recovery
Create a small revision card using compact prose with optional author-entered breaks. Combine “Inline boundaries do not guarantee visible gaps” 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: Collapsible spaces can interact across adjacent inline boxes within the same formatting context. Apply: Test the final DOM produced by the template, not only isolated source fragments. Verify: Under collapse processing, the adjacent whitespace does not necessarily create two visible gaps. 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. code sample: model, boundary and recovery
Create a small code sample using tabs, spaces and line breaks that carry meaning. Combine “The animation type is discrete” 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: white-space-collapse switches between keyword states; it does not interpolate a gradual amount of collapsing. Apply: Test before and after states and avoid making essential readability depend on an animated switch. Verify: The property changes discretely rather than producing intermediate spacing states. 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. chat transcript: model, boundary and recovery
Create a small chat transcript using preserved messages within a narrow panel. Combine “Copying and accessibility need direct checks” 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: Visual whitespace handling does not define every selection, copying, speech or assistive-technology outcome. Apply: Use semantic markup, accessible names and real interaction tests for required workflows. Verify: The semantic container and label support interpretation; the CSS value alone is not an accessibility contract. 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. data badge: model, boundary and recovery
Create a small data badge using short labels whose source indentation should disappear. Combine “collapse is the initial value” 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: The initial collapse mode reduces collapsible white-space sequences according to CSS text-processing rules. Apply: Create adjacent spaces, a tab and a source line break, then inspect the rendered words. Verify: Ordinary authoring whitespace is collapsed for display under the initial mode. 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.
