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 font-variant-ligatures controls optional ligature and contextual OpenType features through readable high-level keywords. Authors can enable or disable common, discretionary and historical ligatures and contextual alternates, while normal and none provide broader presets. Mastery means knowing that the chosen font must contain the feature, required shaping remains a separate obligation, inherited typography can affect descendants, and visual evidence across fonts, scripts, sizes and environments matters more than memorising a keyword. 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
CHAPTER 1 OF 20 . Build the model
1. The property controls optional typographic features
font-variant-ligatures selects groups of ligature and contextual features for text rendered by the chosen font. 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 it as a way to join arbitrary letters. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. Choose a font with known features and compare a diagnostic string.
For the The property controls optional typographic features chapter on CSS font-variant-ligatures, 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 it as a way to join arbitrary letters. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.
Core worked example
.prose{font-variant-ligatures:common-ligatures contextual}Explained result. The declaration requests common ligatures and contextual alternates; actual glyphs still come from the font. 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: school article. Predict the rule using keeping common text ligatures while protecting readability. 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 “font-variant-ligatures selects groups of ligature and contextual features for text rendered by the chosen font.” Apply this procedure: Choose a font with known features and compare a diagnostic string. The expected mechanism is: The declaration requests common ligatures and contextual alternates; actual glyphs still come from the font. For the school article, add one near-miss that exposes treating it as a way to join arbitrary letters. 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: CCA poster. Contrast the rule using trying discretionary ligatures in a display heading. 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 “font-variant-ligatures selects groups of ligature and contextual features for text rendered by the chosen font.” Apply this procedure: Choose a font with known features and compare a diagnostic string. The expected mechanism is: The declaration requests common ligatures and contextual alternates; actual glyphs still come from the font. For the CCA poster, add one near-miss that exposes treating it as a way to join arbitrary letters. 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: heritage page. Stress-test the rule using using historical forms only with a justified editorial purpose. 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 “font-variant-ligatures selects groups of ligature and contextual features for text rendered by the chosen font.” Apply this procedure: Choose a font with known features and compare a diagnostic string. The expected mechanism is: The declaration requests common ligatures and contextual alternates; actual glyphs still come from the font. For the heritage page, add one near-miss that exposes treating it as a way to join arbitrary letters. 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: coding worksheet. Explain the rule using disabling optional ligatures where character distinction matters. 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 “font-variant-ligatures selects groups of ligature and contextual features for text rendered by the chosen font.” Apply this procedure: Choose a font with known features and compare a diagnostic string. The expected mechanism is: The declaration requests common ligatures and contextual alternates; actual glyphs still come from the font. For the coding worksheet, add one near-miss that exposes treating it as a way to join arbitrary letters. 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 it as a way to join arbitrary letters.
- Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
- Repair check: use the reversible procedure “Choose a font with known features and compare a diagnostic string.” 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 font-variant-ligatures syntax. For this chapter, useful prompts are: “What did you expect from The property controls optional typographic features?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing treating it as a way to join arbitrary letters be made smaller?” The learner, not the parent, should supply the technical explanation.
Practice with an explained answer
Question. Build a tiny multilingual page with respecting shaping rules beyond Latin examples. Include one ordinary case, one boundary and one deliberate failure caused by treating it as a way to join arbitrary letters. 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: font-variant-ligatures selects groups of ligature and contextual features for text rendered by the chosen font. It shows a trace, not only a final value. The ordinary case should demonstrate “The declaration requests common ligatures and contextual alternates; actual glyphs still come from the font.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: Choose a font with known features and compare a diagnostic string. Other data choices are valid when the evidence supports the same causal chain.
Decision and transfer
For The property controls optional typographic features, separate the documented CSS font-variant-ligatures 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 value normal lets the browser apply normal typographic behaviour for the font, script and language. 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 normal is identical to every explicit enable keyword. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. Compare computed value and rendered output rather than expanding normal by guesswork.
For the normal uses the user-agent default policy chapter on CSS font-variant-ligatures, 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 normal is identical to every explicit enable keyword. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.
Core worked example
.article{font-variant-ligatures:normal}Explained result. The browser retains its normal shaping policy. 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: heritage page. Contrast the rule using using historical forms only with a justified editorial purpose. 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 value normal lets the browser apply normal typographic behaviour for the font, script and language.” Apply this procedure: Compare computed value and rendered output rather than expanding normal by guesswork. The expected mechanism is: The browser retains its normal shaping policy. For the heritage page, add one near-miss that exposes assuming normal is identical to every explicit enable keyword. 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: coding worksheet. Stress-test the rule using disabling optional ligatures where character distinction matters. 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 value normal lets the browser apply normal typographic behaviour for the font, script and language.” Apply this procedure: Compare computed value and rendered output rather than expanding normal by guesswork. The expected mechanism is: The browser retains its normal shaping policy. For the coding worksheet, add one near-miss that exposes assuming normal is identical to every explicit enable keyword. 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: family portal. Explain the rule using scoping typography so form fields remain predictable. 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 value normal lets the browser apply normal typographic behaviour for the font, script and language.” Apply this procedure: Compare computed value and rendered output rather than expanding normal by guesswork. The expected mechanism is: The browser retains its normal shaping policy. For the family portal, add one near-miss that exposes assuming normal is identical to every explicit enable keyword. 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: multilingual page. Transfer the rule using respecting shaping rules beyond Latin examples. 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 value normal lets the browser apply normal typographic behaviour for the font, script and language.” Apply this procedure: Compare computed value and rendered output rather than expanding normal by guesswork. The expected mechanism is: The browser retains its normal shaping policy. For the multilingual page, add one near-miss that exposes assuming normal is identical to every explicit enable keyword. 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 normal is identical to every explicit enable keyword.
- Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
- Repair check: use the reversible procedure “Compare computed value and rendered output rather than expanding normal by guesswork.” 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 font-variant-ligatures syntax. For this chapter, useful prompts are: “What did you expect from normal uses the user-agent default policy?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing assuming normal is identical to every explicit enable keyword be made smaller?” The learner, not the parent, should supply the technical explanation.
Practice with an explained answer
Question. Build a tiny test laboratory with checking font files, feature support, inheritance and screenshots. Include one ordinary case, one boundary and one deliberate failure caused by assuming normal is identical to every explicit enable keyword. 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 value normal lets the browser apply normal typographic behaviour for the font, script and language. It shows a trace, not only a final value. The ordinary case should demonstrate “The browser retains its normal shaping policy.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: Compare computed value and rendered output rather than expanding normal by guesswork. Other data choices are valid when the evidence supports the same causal chain.
Decision and transfer
For normal uses the user-agent default policy, separate the documented CSS font-variant-ligatures 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
none turns off the ligature and contextual features controlled by this property. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.
The high-value mistake in this chapter is using none as proof that all script shaping will disappear. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. Test optional Latin examples and a script requiring shaping separately.
For the none disables the optional groups together chapter on CSS font-variant-ligatures, 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 none as proof that all script shaping will disappear. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.
Core worked example
code{font-variant-ligatures:none}Explained result. Optional ligatures are disabled for the code element, while required shaping is not an author switch. 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: family portal. Stress-test the rule using scoping typography so form fields remain predictable. 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 “none turns off the ligature and contextual features controlled by this property.” Apply this procedure: Test optional Latin examples and a script requiring shaping separately. The expected mechanism is: Optional ligatures are disabled for the code element, while required shaping is not an author switch. For the family portal, add one near-miss that exposes using none as proof that all script shaping will disappear. 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: multilingual page. Explain the rule using respecting shaping rules beyond Latin examples. 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 “none turns off the ligature and contextual features controlled by this property.” Apply this procedure: Test optional Latin examples and a script requiring shaping separately. The expected mechanism is: Optional ligatures are disabled for the code element, while required shaping is not an author switch. For the multilingual page, add one near-miss that exposes using none as proof that all script shaping will disappear. 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: test laboratory. Transfer the rule using checking font files, feature support, inheritance and screenshots. 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 “none turns off the ligature and contextual features controlled by this property.” Apply this procedure: Test optional Latin examples and a script requiring shaping separately. The expected mechanism is: Optional ligatures are disabled for the code element, while required shaping is not an author switch. For the test laboratory, add one near-miss that exposes using none as proof that all script shaping will disappear. 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: design review. Predict the rule using choosing high-level font variants versus low-level feature settings. 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 “none turns off the ligature and contextual features controlled by this property.” Apply this procedure: Test optional Latin examples and a script requiring shaping separately. The expected mechanism is: Optional ligatures are disabled for the code element, while required shaping is not an author switch. For the design review, add one near-miss that exposes using none as proof that all script shaping will disappear. 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 none as proof that all script shaping will disappear.
- Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
- Repair check: use the reversible procedure “Test optional Latin examples and a script requiring shaping 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 font-variant-ligatures syntax. For this chapter, useful prompts are: “What did you expect from none disables the optional groups together?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing using none as proof that all script shaping will disappear be made smaller?” The learner, not the parent, should supply the technical explanation.
Practice with an explained answer
Question. Build a tiny design review with choosing high-level font variants versus low-level feature settings. Include one ordinary case, one boundary and one deliberate failure caused by using none as proof that all script shaping will disappear. 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: none turns off the ligature and contextual features controlled by this property. It shows a trace, not only a final value. The ordinary case should demonstrate “Optional ligatures are disabled for the code element, while required shaping is not an author switch.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: Test optional Latin examples and a script requiring shaping separately. Other data choices are valid when the evidence supports the same causal chain.
Decision and transfer
For none disables the optional groups together, separate the documented CSS font-variant-ligatures 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
common-ligatures enables common and standard ligature features; no-common-ligatures disables that group. 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 writing both opposing keywords in one declaration. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. Select one state per feature group.
For the Common ligatures have paired controls chapter on CSS font-variant-ligatures, 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 writing both opposing keywords in one declaration. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.
Core worked example
.book{font-variant-ligatures:common-ligatures}Explained result. The declaration requests common ligatures when the font provides them. 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: test laboratory. Explain the rule using checking font files, feature support, inheritance and screenshots. 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 “common-ligatures enables common and standard ligature features; no-common-ligatures disables that group.” Apply this procedure: Select one state per feature group. The expected mechanism is: The declaration requests common ligatures when the font provides them. For the test laboratory, add one near-miss that exposes writing both opposing keywords in one declaration. 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: design review. Transfer the rule using choosing high-level font variants versus low-level feature settings. 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 “common-ligatures enables common and standard ligature features; no-common-ligatures disables that group.” Apply this procedure: Select one state per feature group. The expected mechanism is: The declaration requests common ligatures when the font provides them. For the design review, add one near-miss that exposes writing both opposing keywords in one declaration. 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: school article. Predict the rule using keeping common text ligatures while protecting readability. 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 “common-ligatures enables common and standard ligature features; no-common-ligatures disables that group.” Apply this procedure: Select one state per feature group. The expected mechanism is: The declaration requests common ligatures when the font provides them. For the school article, add one near-miss that exposes writing both opposing keywords in one declaration. 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: CCA poster. Contrast the rule using trying discretionary ligatures in a display heading. 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 “common-ligatures enables common and standard ligature features; no-common-ligatures disables that group.” Apply this procedure: Select one state per feature group. The expected mechanism is: The declaration requests common ligatures when the font provides them. For the CCA poster, add one near-miss that exposes writing both opposing keywords in one declaration. 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 writing both opposing keywords in one declaration.
- Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
- Repair check: use the reversible procedure “Select one state per feature group.” 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 font-variant-ligatures syntax. For this chapter, useful prompts are: “What did you expect from Common ligatures have paired controls?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing writing both opposing keywords in one declaration be made smaller?” The learner, not the parent, should supply the technical explanation.
Practice with an explained answer
Question. Build a tiny school article with keeping common text ligatures while protecting readability. Include one ordinary case, one boundary and one deliberate failure caused by writing both opposing keywords in one declaration. 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: common-ligatures enables common and standard ligature features; no-common-ligatures disables that group. It shows a trace, not only a final value. The ordinary case should demonstrate “The declaration requests common ligatures when the font provides them.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: Select one state per feature group. Other data choices are valid when the evidence supports the same causal chain.
Decision and transfer
For Common ligatures have paired controls, separate the documented CSS font-variant-ligatures 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. Discretionary ligatures are an editorial choice
discretionary-ligatures enables decorative or specialised forms; no-discretionary-ligatures disables 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 decorative combinations in dense body copy without reading tests. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. Try the target words at the real size and line length.
For the Discretionary ligatures are an editorial choice chapter on CSS font-variant-ligatures, 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 decorative combinations in dense body copy without reading tests. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.
Core worked example
.display{font-variant-ligatures:discretionary-ligatures}Explained result. A supporting font may form discretionary glyphs in the display 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: school article. Transfer the rule using keeping common text ligatures while protecting readability. 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 “discretionary-ligatures enables decorative or specialised forms; no-discretionary-ligatures disables them.” Apply this procedure: Try the target words at the real size and line length. The expected mechanism is: A supporting font may form discretionary glyphs in the display text. For the school article, add one near-miss that exposes using decorative combinations in dense body copy without reading tests. 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: CCA poster. Predict the rule using trying discretionary ligatures in a display heading. 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 “discretionary-ligatures enables decorative or specialised forms; no-discretionary-ligatures disables them.” Apply this procedure: Try the target words at the real size and line length. The expected mechanism is: A supporting font may form discretionary glyphs in the display text. For the CCA poster, add one near-miss that exposes using decorative combinations in dense body copy without reading tests. 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: heritage page. Contrast the rule using using historical forms only with a justified editorial purpose. 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 “discretionary-ligatures enables decorative or specialised forms; no-discretionary-ligatures disables them.” Apply this procedure: Try the target words at the real size and line length. The expected mechanism is: A supporting font may form discretionary glyphs in the display text. For the heritage page, add one near-miss that exposes using decorative combinations in dense body copy without reading tests. 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: coding worksheet. Stress-test the rule using disabling optional ligatures where character distinction matters. 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 “discretionary-ligatures enables decorative or specialised forms; no-discretionary-ligatures disables them.” Apply this procedure: Try the target words at the real size and line length. The expected mechanism is: A supporting font may form discretionary glyphs in the display text. For the coding worksheet, add one near-miss that exposes using decorative combinations in dense body copy without reading tests. 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 decorative combinations in dense body copy without reading tests.
- Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
- Repair check: use the reversible procedure “Try the target words at the real size and line length.” 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 font-variant-ligatures syntax. For this chapter, useful prompts are: “What did you expect from Discretionary ligatures are an editorial choice?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing using decorative combinations in dense body copy without reading tests be made smaller?” The learner, not the parent, should supply the technical explanation.
Practice with an explained answer
Question. Build a tiny CCA poster with trying discretionary ligatures in a display heading. Include one ordinary case, one boundary and one deliberate failure caused by using decorative combinations in dense body copy without reading tests. 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: discretionary-ligatures enables decorative or specialised forms; no-discretionary-ligatures disables them. It shows a trace, not only a final value. The ordinary case should demonstrate “A supporting font may form discretionary glyphs in the display text.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: Try the target words at the real size and line length. Other data choices are valid when the evidence supports the same causal chain.
Decision and transfer
For Discretionary ligatures are an editorial choice, separate the documented CSS font-variant-ligatures 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
historical-ligatures enables forms preserved for historical typography; the no- form turns them off. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.
The high-value mistake in this chapter is equating historical appearance with better readability. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. Document the source period and offer readable modern text where needed.
For the Historical ligatures need historical purpose chapter on CSS font-variant-ligatures, use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on equating historical appearance with better readability. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.
Core worked example
.facsimile{font-variant-ligatures:historical-ligatures}Explained result. The request is meaningful only if the font contains the historical feature. 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: heritage page. Predict the rule using using historical forms only with a justified editorial purpose. 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 “historical-ligatures enables forms preserved for historical typography; the no- form turns them off.” Apply this procedure: Document the source period and offer readable modern text where needed. The expected mechanism is: The request is meaningful only if the font contains the historical feature. For the heritage page, add one near-miss that exposes equating historical appearance with better readability. 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: coding worksheet. Contrast the rule using disabling optional ligatures where character distinction matters. 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 “historical-ligatures enables forms preserved for historical typography; the no- form turns them off.” Apply this procedure: Document the source period and offer readable modern text where needed. The expected mechanism is: The request is meaningful only if the font contains the historical feature. For the coding worksheet, add one near-miss that exposes equating historical appearance with better readability. 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: family portal. Stress-test the rule using scoping typography so form fields remain predictable. 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 “historical-ligatures enables forms preserved for historical typography; the no- form turns them off.” Apply this procedure: Document the source period and offer readable modern text where needed. The expected mechanism is: The request is meaningful only if the font contains the historical feature. For the family portal, add one near-miss that exposes equating historical appearance with better readability. 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: multilingual page. Explain the rule using respecting shaping rules beyond Latin examples. 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 “historical-ligatures enables forms preserved for historical typography; the no- form turns them off.” Apply this procedure: Document the source period and offer readable modern text where needed. The expected mechanism is: The request is meaningful only if the font contains the historical feature. For the multilingual page, add one near-miss that exposes equating historical appearance with better readability. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Diagnostic route
- Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
- Boundary check: create the smallest input that triggers equating historical appearance with better readability.
- Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
- Repair check: use the reversible procedure “Document the source period and offer readable modern text where needed.” 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 font-variant-ligatures syntax. For this chapter, useful prompts are: “What did you expect from Historical ligatures need historical purpose?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing equating historical appearance with better readability be made smaller?” The learner, not the parent, should supply the technical explanation.
Practice with an explained answer
Question. Build a tiny heritage page with using historical forms only with a justified editorial purpose. Include one ordinary case, one boundary and one deliberate failure caused by equating historical appearance with better readability. 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: historical-ligatures enables forms preserved for historical typography; the no- form turns them off. It shows a trace, not only a final value. The ordinary case should demonstrate “The request is meaningful only if the font contains the historical feature.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: Document the source period and offer readable modern text where needed. Other data choices are valid when the evidence supports the same causal chain.
Decision and transfer
For Historical ligatures need historical purpose, separate the documented CSS font-variant-ligatures 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
contextual enables context-sensitive alternates; no-contextual disables 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 calling every contextual substitution a ligature. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. Use the broader term contextual alternates and inspect the font feature.
For the Contextual alternates form their own group chapter on CSS font-variant-ligatures, 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 every contextual substitution a ligature. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.
Core worked example
.handwriting{font-variant-ligatures:contextual}Explained result. The font may choose glyph forms based on neighbours without creating one fused glyph. 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: family portal. Contrast the rule using scoping typography so form fields remain predictable. 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 “contextual enables context-sensitive alternates; no-contextual disables them.” Apply this procedure: Use the broader term contextual alternates and inspect the font feature. The expected mechanism is: The font may choose glyph forms based on neighbours without creating one fused glyph. For the family portal, add one near-miss that exposes calling every contextual substitution a ligature. 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: multilingual page. Stress-test the rule using respecting shaping rules beyond Latin examples. 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 “contextual enables context-sensitive alternates; no-contextual disables them.” Apply this procedure: Use the broader term contextual alternates and inspect the font feature. The expected mechanism is: The font may choose glyph forms based on neighbours without creating one fused glyph. For the multilingual page, add one near-miss that exposes calling every contextual substitution a ligature. 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: test laboratory. Explain the rule using checking font files, feature support, inheritance and screenshots. 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 “contextual enables context-sensitive alternates; no-contextual disables them.” Apply this procedure: Use the broader term contextual alternates and inspect the font feature. The expected mechanism is: The font may choose glyph forms based on neighbours without creating one fused glyph. For the test laboratory, add one near-miss that exposes calling every contextual substitution a ligature. 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: design review. Transfer the rule using choosing high-level font variants versus low-level feature settings. 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 “contextual enables context-sensitive alternates; no-contextual disables them.” Apply this procedure: Use the broader term contextual alternates and inspect the font feature. The expected mechanism is: The font may choose glyph forms based on neighbours without creating one fused glyph. For the design review, add one near-miss that exposes calling every contextual substitution a ligature. 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 every contextual substitution a ligature.
- Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
- Repair check: use the reversible procedure “Use the broader term contextual alternates and inspect the font feature.” 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 font-variant-ligatures syntax. For this chapter, useful prompts are: “What did you expect from Contextual alternates form their own group?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing calling every contextual substitution a ligature be made smaller?” The learner, not the parent, should supply the technical explanation.
Practice with an explained answer
Question. Build a tiny coding worksheet with disabling optional ligatures where character distinction matters. Include one ordinary case, one boundary and one deliberate failure caused by calling every contextual substitution a ligature. 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: contextual enables context-sensitive alternates; no-contextual disables them. It shows a trace, not only a final value. The ordinary case should demonstrate “The font may choose glyph forms based on neighbours without creating one fused glyph.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: Use the broader term contextual alternates and inspect the font feature. Other data choices are valid when the evidence supports the same causal chain.
Decision and transfer
For Contextual alternates form their own group, separate the documented CSS font-variant-ligatures 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
Authors may choose one state from multiple groups in the same declaration, in any allowed order. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.
The high-value mistake in this chapter is overwriting four separate declarations instead of composing one value. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. Write one declaration containing the intended group states.
For the Several non-conflicting keywords can combine chapter on CSS font-variant-ligatures, 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 overwriting four separate declarations instead of composing one value. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.
Core worked example
.heading{font-variant-ligatures:no-common-ligatures discretionary-ligatures contextual}Explained result. The final value expresses three group decisions together. 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: test laboratory. Stress-test the rule using checking font files, feature support, inheritance and screenshots. 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 “Authors may choose one state from multiple groups in the same declaration, in any allowed order.” Apply this procedure: Write one declaration containing the intended group states. The expected mechanism is: The final value expresses three group decisions together. For the test laboratory, add one near-miss that exposes overwriting four separate declarations instead of composing one value. 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: design review. Explain the rule using choosing high-level font variants versus low-level feature settings. 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 “Authors may choose one state from multiple groups in the same declaration, in any allowed order.” Apply this procedure: Write one declaration containing the intended group states. The expected mechanism is: The final value expresses three group decisions together. For the design review, add one near-miss that exposes overwriting four separate declarations instead of composing one value. 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: school article. Transfer the rule using keeping common text ligatures while protecting readability. 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 “Authors may choose one state from multiple groups in the same declaration, in any allowed order.” Apply this procedure: Write one declaration containing the intended group states. The expected mechanism is: The final value expresses three group decisions together. For the school article, add one near-miss that exposes overwriting four separate declarations instead of composing one value. 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: CCA poster. Predict the rule using trying discretionary ligatures in a display heading. 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 “Authors may choose one state from multiple groups in the same declaration, in any allowed order.” Apply this procedure: Write one declaration containing the intended group states. The expected mechanism is: The final value expresses three group decisions together. For the CCA poster, add one near-miss that exposes overwriting four separate declarations instead of composing one value. 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 overwriting four separate declarations instead of composing one value.
- Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
- Repair check: use the reversible procedure “Write one declaration containing the intended group states.” 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 font-variant-ligatures syntax. For this chapter, useful prompts are: “What did you expect from Several non-conflicting keywords can combine?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing overwriting four separate declarations instead of composing one value be made smaller?” The learner, not the parent, should supply the technical explanation.
Practice with an explained answer
Question. Build a tiny family portal with scoping typography so form fields remain predictable. Include one ordinary case, one boundary and one deliberate failure caused by overwriting four separate declarations instead of composing one value. 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: Authors may choose one state from multiple groups in the same declaration, in any allowed order. It shows a trace, not only a final value. The ordinary case should demonstrate “The final value expresses three group decisions together.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: Write one declaration containing the intended group states. Other data choices are valid when the evidence supports the same causal chain.
Decision and transfer
For Several non-conflicting keywords can combine, separate the documented CSS font-variant-ligatures 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 declaration cannot request common-ligatures and no-common-ligatures simultaneously. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.
The high-value mistake in this chapter is expecting the last keyword inside one value to win. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. Remove the contradiction rather than relying on token order.
For the Conflicting values invalidate the declaration chapter on CSS font-variant-ligatures, use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on expecting the last keyword inside one value to win. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.
Core worked example
.bad{font-variant-ligatures:common-ligatures no-common-ligatures}Explained result. The conflicting value is invalid, so it does not create a last-token override. 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: school article. Explain the rule using keeping common text ligatures while protecting readability. 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 declaration cannot request common-ligatures and no-common-ligatures simultaneously.” Apply this procedure: Remove the contradiction rather than relying on token order. The expected mechanism is: The conflicting value is invalid, so it does not create a last-token override. For the school article, add one near-miss that exposes expecting the last keyword inside one value to win. 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: CCA poster. Transfer the rule using trying discretionary ligatures in a display heading. 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 declaration cannot request common-ligatures and no-common-ligatures simultaneously.” Apply this procedure: Remove the contradiction rather than relying on token order. The expected mechanism is: The conflicting value is invalid, so it does not create a last-token override. For the CCA poster, add one near-miss that exposes expecting the last keyword inside one value to win. 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: heritage page. Predict the rule using using historical forms only with a justified editorial purpose. 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 declaration cannot request common-ligatures and no-common-ligatures simultaneously.” Apply this procedure: Remove the contradiction rather than relying on token order. The expected mechanism is: The conflicting value is invalid, so it does not create a last-token override. For the heritage page, add one near-miss that exposes expecting the last keyword inside one value to win. 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: coding worksheet. Contrast the rule using disabling optional ligatures where character distinction matters. 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 declaration cannot request common-ligatures and no-common-ligatures simultaneously.” Apply this procedure: Remove the contradiction rather than relying on token order. The expected mechanism is: The conflicting value is invalid, so it does not create a last-token override. For the coding worksheet, add one near-miss that exposes expecting the last keyword inside one value to win. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Diagnostic route
- Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
- Boundary check: create the smallest input that triggers expecting the last keyword inside one value to win.
- Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
- Repair check: use the reversible procedure “Remove the contradiction rather than relying on token order.” 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 font-variant-ligatures syntax. For this chapter, useful prompts are: “What did you expect from Conflicting values invalidate the declaration?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing expecting the last keyword inside one value to win be made smaller?” The learner, not the parent, should supply the technical explanation.
Practice with an explained answer
Question. Build a tiny multilingual page with respecting shaping rules beyond Latin examples. Include one ordinary case, one boundary and one deliberate failure caused by expecting the last keyword inside one value to win. 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 declaration cannot request common-ligatures and no-common-ligatures simultaneously. It shows a trace, not only a final value. The ordinary case should demonstrate “The conflicting value is invalid, so it does not create a last-token override.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: Remove the contradiction rather than relying on token order. Other data choices are valid when the evidence supports the same causal chain.
Decision and transfer
For Conflicting values invalidate the declaration, separate the documented CSS font-variant-ligatures 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 value set on a container normally reaches descendants, including controls or code unless another rule resets 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 styling a hero and accidentally changing nested technical text. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. Inspect computed styles on representative descendants.
For the The property is inherited chapter on CSS font-variant-ligatures, 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 styling a hero and accidentally changing nested technical text. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.
Core worked example
.hero{font-variant-ligatures:discretionary-ligatures}.hero code{font-variant-ligatures:none}Explained result. The nested code rule creates a deliberate boundary. 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: heritage page. Transfer the rule using using historical forms only with a justified editorial purpose. 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 value set on a container normally reaches descendants, including controls or code unless another rule resets it.” Apply this procedure: Inspect computed styles on representative descendants. The expected mechanism is: The nested code rule creates a deliberate boundary. For the heritage page, add one near-miss that exposes styling a hero and accidentally changing nested technical text. 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: coding worksheet. Predict the rule using disabling optional ligatures where character distinction matters. 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 value set on a container normally reaches descendants, including controls or code unless another rule resets it.” Apply this procedure: Inspect computed styles on representative descendants. The expected mechanism is: The nested code rule creates a deliberate boundary. For the coding worksheet, add one near-miss that exposes styling a hero and accidentally changing nested technical text. 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: family portal. Contrast the rule using scoping typography so form fields remain predictable. 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 value set on a container normally reaches descendants, including controls or code unless another rule resets it.” Apply this procedure: Inspect computed styles on representative descendants. The expected mechanism is: The nested code rule creates a deliberate boundary. For the family portal, add one near-miss that exposes styling a hero and accidentally changing nested technical text. 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: multilingual page. Stress-test the rule using respecting shaping rules beyond Latin examples. 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 value set on a container normally reaches descendants, including controls or code unless another rule resets it.” Apply this procedure: Inspect computed styles on representative descendants. The expected mechanism is: The nested code rule creates a deliberate boundary. For the multilingual page, add one near-miss that exposes styling a hero and accidentally changing nested technical text. 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 styling a hero and accidentally changing nested technical text.
- Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
- Repair check: use the reversible procedure “Inspect computed styles on representative descendants.” 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 font-variant-ligatures 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 styling a hero and accidentally changing nested technical text be made smaller?” The learner, not the parent, should supply the technical explanation.
Practice with an explained answer
Question. Build a tiny test laboratory with checking font files, feature support, inheritance and screenshots. Include one ordinary case, one boundary and one deliberate failure caused by styling a hero and accidentally changing nested technical text. 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 value set on a container normally reaches descendants, including controls or code unless another rule resets it. It shows a trace, not only a final value. The ordinary case should demonstrate “The nested code rule creates a deliberate boundary.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: Inspect computed styles on representative descendants. 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 font-variant-ligatures 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
If the active font lacks the requested OpenType feature or relevant glyphs, the declaration can have no visible effect. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.
The high-value mistake in this chapter is debugging cascade endlessly when the font file lacks the feature. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. Verify the actual loaded font and feature table before changing selectors.
For the Font support is a gate chapter on CSS font-variant-ligatures, use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on debugging cascade endlessly when the font file lacks the feature. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.
Core worked example
.sample{font-family:'Known Ligature Font',serif;font-variant-ligatures:discretionary-ligatures}Explained result. Only a loaded face with the feature can show the requested substitution. 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: family portal. Predict the rule using scoping typography so form fields remain predictable. 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 “If the active font lacks the requested OpenType feature or relevant glyphs, the declaration can have no visible effect.” Apply this procedure: Verify the actual loaded font and feature table before changing selectors. The expected mechanism is: Only a loaded face with the feature can show the requested substitution. For the family portal, add one near-miss that exposes debugging cascade endlessly when the font file lacks the feature. 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: multilingual page. Contrast the rule using respecting shaping rules beyond Latin examples. 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 “If the active font lacks the requested OpenType feature or relevant glyphs, the declaration can have no visible effect.” Apply this procedure: Verify the actual loaded font and feature table before changing selectors. The expected mechanism is: Only a loaded face with the feature can show the requested substitution. For the multilingual page, add one near-miss that exposes debugging cascade endlessly when the font file lacks the feature. 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: test laboratory. Stress-test the rule using checking font files, feature support, inheritance and screenshots. 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 “If the active font lacks the requested OpenType feature or relevant glyphs, the declaration can have no visible effect.” Apply this procedure: Verify the actual loaded font and feature table before changing selectors. The expected mechanism is: Only a loaded face with the feature can show the requested substitution. For the test laboratory, add one near-miss that exposes debugging cascade endlessly when the font file lacks the feature. 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: design review. Explain the rule using choosing high-level font variants versus low-level feature settings. 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 “If the active font lacks the requested OpenType feature or relevant glyphs, the declaration can have no visible effect.” Apply this procedure: Verify the actual loaded font and feature table before changing selectors. The expected mechanism is: Only a loaded face with the feature can show the requested substitution. For the design review, add one near-miss that exposes debugging cascade endlessly when the font file lacks the feature. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Diagnostic route
- Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
- Boundary check: create the smallest input that triggers debugging cascade endlessly when the font file lacks the feature.
- Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
- Repair check: use the reversible procedure “Verify the actual loaded font and feature table before changing selectors.” 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 font-variant-ligatures syntax. For this chapter, useful prompts are: “What did you expect from Font support is a gate?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing debugging cascade endlessly when the font file lacks the feature be made smaller?” The learner, not the parent, should supply the technical explanation.
Practice with an explained answer
Question. Build a tiny design review with choosing high-level font variants versus low-level feature settings. Include one ordinary case, one boundary and one deliberate failure caused by debugging cascade endlessly when the font file lacks the feature. 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: If the active font lacks the requested OpenType feature or relevant glyphs, the declaration can have no visible effect. It shows a trace, not only a final value. The ordinary case should demonstrate “Only a loaded face with the feature can show the requested substitution.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: Verify the actual loaded font and feature table before changing selectors. Other data choices are valid when the evidence supports the same causal chain.
Decision and transfer
For Font support is a gate, separate the documented CSS font-variant-ligatures 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
Different characters in one run may come from different faces with different feature support and designs. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.
The high-value mistake in this chapter is approving a Latin-only sample and assuming every fallback behaves identically. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. Test the complete family stack and multilingual content.
For the Fallback fonts can change the result chapter on CSS font-variant-ligatures, use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on approving a Latin-only sample and assuming every fallback behaves identically. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.
Core worked example
.sample{font-family:'Primary Text','Noto Serif',serif}Explained result. Fallback can preserve text while altering which ligatures are available. 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: test laboratory. Contrast the rule using checking font files, feature support, inheritance and screenshots. 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 “Different characters in one run may come from different faces with different feature support and designs.” Apply this procedure: Test the complete family stack and multilingual content. The expected mechanism is: Fallback can preserve text while altering which ligatures are available. For the test laboratory, add one near-miss that exposes approving a Latin-only sample and assuming every fallback behaves identically. 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: design review. Stress-test the rule using choosing high-level font variants versus low-level feature settings. 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 “Different characters in one run may come from different faces with different feature support and designs.” Apply this procedure: Test the complete family stack and multilingual content. The expected mechanism is: Fallback can preserve text while altering which ligatures are available. For the design review, add one near-miss that exposes approving a Latin-only sample and assuming every fallback behaves identically. 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: school article. Explain the rule using keeping common text ligatures while protecting readability. 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 “Different characters in one run may come from different faces with different feature support and designs.” Apply this procedure: Test the complete family stack and multilingual content. The expected mechanism is: Fallback can preserve text while altering which ligatures are available. For the school article, add one near-miss that exposes approving a Latin-only sample and assuming every fallback behaves identically. 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: CCA poster. Transfer the rule using trying discretionary ligatures in a display heading. 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 “Different characters in one run may come from different faces with different feature support and designs.” Apply this procedure: Test the complete family stack and multilingual content. The expected mechanism is: Fallback can preserve text while altering which ligatures are available. For the CCA poster, add one near-miss that exposes approving a Latin-only sample and assuming every fallback behaves identically. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Diagnostic route
- Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
- Boundary check: create the smallest input that triggers approving a Latin-only sample and assuming every fallback behaves identically.
- Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
- Repair check: use the reversible procedure “Test the complete family stack and multilingual content.” 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 font-variant-ligatures syntax. For this chapter, useful prompts are: “What did you expect from Fallback fonts can change the result?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing approving a Latin-only sample and assuming every fallback behaves identically be made smaller?” The learner, not the parent, should supply the technical explanation.
Practice with an explained answer
Question. Build a tiny school article with keeping common text ligatures while protecting readability. Include one ordinary case, one boundary and one deliberate failure caused by approving a Latin-only sample and assuming every fallback behaves identically. 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: Different characters in one run may come from different faces with different feature support and designs. It shows a trace, not only a final value. The ordinary case should demonstrate “Fallback can preserve text while altering which ligatures are available.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: Test the complete family stack and multilingual content. Other data choices are valid when the evidence supports the same causal chain.
Decision and transfer
For Fallback fonts can change the result, separate the documented CSS font-variant-ligatures 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
Shaping engines consider language and script; author-controlled optional features do not replace correct language metadata. 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 CSS ligature switches instead of setting the document language. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. Set truthful lang attributes and test real script samples.
For the Language and script shape typography chapter on CSS font-variant-ligatures, 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 CSS ligature switches instead of setting the document language. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.
Core worked example
<p lang='en-SG' class='prose'>Office file affinity</p>Explained result. The language metadata and CSS feature choice serve different parts of text shaping. 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: school article. Stress-test the rule using keeping common text ligatures while protecting readability. 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 “Shaping engines consider language and script; author-controlled optional features do not replace correct language metadata.” Apply this procedure: Set truthful lang attributes and test real script samples. The expected mechanism is: The language metadata and CSS feature choice serve different parts of text shaping. For the school article, add one near-miss that exposes using CSS ligature switches instead of setting the document language. 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: CCA poster. Explain the rule using trying discretionary ligatures in a display heading. 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 “Shaping engines consider language and script; author-controlled optional features do not replace correct language metadata.” Apply this procedure: Set truthful lang attributes and test real script samples. The expected mechanism is: The language metadata and CSS feature choice serve different parts of text shaping. For the CCA poster, add one near-miss that exposes using CSS ligature switches instead of setting the document language. 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: heritage page. Transfer the rule using using historical forms only with a justified editorial purpose. 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 “Shaping engines consider language and script; author-controlled optional features do not replace correct language metadata.” Apply this procedure: Set truthful lang attributes and test real script samples. The expected mechanism is: The language metadata and CSS feature choice serve different parts of text shaping. For the heritage page, add one near-miss that exposes using CSS ligature switches instead of setting the document language. 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: coding worksheet. Predict the rule using disabling optional ligatures where character distinction matters. 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 “Shaping engines consider language and script; author-controlled optional features do not replace correct language metadata.” Apply this procedure: Set truthful lang attributes and test real script samples. The expected mechanism is: The language metadata and CSS feature choice serve different parts of text shaping. For the coding worksheet, add one near-miss that exposes using CSS ligature switches instead of setting the document language. 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 CSS ligature switches instead of setting the document language.
- Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
- Repair check: use the reversible procedure “Set truthful lang attributes and test real script samples.” 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 font-variant-ligatures syntax. For this chapter, useful prompts are: “What did you expect from Language and script shape typography?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing using CSS ligature switches instead of setting the document language be made smaller?” The learner, not the parent, should supply the technical explanation.
Practice with an explained answer
Question. Build a tiny CCA poster with trying discretionary ligatures in a display heading. Include one ordinary case, one boundary and one deliberate failure caused by using CSS ligature switches instead of setting the document language. 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: Shaping engines consider language and script; author-controlled optional features do not replace correct language metadata. It shows a trace, not only a final value. The ordinary case should demonstrate “The language metadata and CSS feature choice serve different parts of text shaping.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: Set truthful lang attributes and test real script samples. Other data choices are valid when the evidence supports the same causal chain.
Decision and transfer
For Language and script shape typography, separate the documented CSS font-variant-ligatures mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.
Previous chapter . Contents . Next chapter
CHAPTER 14 OF 20 . Debug and verify
14. Required ligatures are not optional decoration
Some scripts require substitutions for correct shaping, and CSS feature controls must not disable required features. 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 Latin fi and generalising to every writing system. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. Separate required shaping from the optional groups named by the property.
For the Required ligatures are not optional decoration chapter on CSS font-variant-ligatures, 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 Latin fi and generalising to every writing system. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.
Core worked example
.arabic{font-variant-ligatures:none}Explained result. The declaration is not permission to break required script shaping. 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: heritage page. Explain the rule using using historical forms only with a justified editorial purpose. 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 “Some scripts require substitutions for correct shaping, and CSS feature controls must not disable required features.” Apply this procedure: Separate required shaping from the optional groups named by the property. The expected mechanism is: The declaration is not permission to break required script shaping. For the heritage page, add one near-miss that exposes testing only Latin fi and generalising to every writing system. 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: coding worksheet. Transfer the rule using disabling optional ligatures where character distinction matters. 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 “Some scripts require substitutions for correct shaping, and CSS feature controls must not disable required features.” Apply this procedure: Separate required shaping from the optional groups named by the property. The expected mechanism is: The declaration is not permission to break required script shaping. For the coding worksheet, add one near-miss that exposes testing only Latin fi and generalising to every writing system. 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: family portal. Predict the rule using scoping typography so form fields remain predictable. 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 “Some scripts require substitutions for correct shaping, and CSS feature controls must not disable required features.” Apply this procedure: Separate required shaping from the optional groups named by the property. The expected mechanism is: The declaration is not permission to break required script shaping. For the family portal, add one near-miss that exposes testing only Latin fi and generalising to every writing system. 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: multilingual page. Contrast the rule using respecting shaping rules beyond Latin examples. 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 “Some scripts require substitutions for correct shaping, and CSS feature controls must not disable required features.” Apply this procedure: Separate required shaping from the optional groups named by the property. The expected mechanism is: The declaration is not permission to break required script shaping. For the multilingual page, add one near-miss that exposes testing only Latin fi and generalising to every writing system. 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 Latin fi and generalising to every writing system.
- Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
- Repair check: use the reversible procedure “Separate required shaping from the optional groups named by the property.” 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 font-variant-ligatures syntax. For this chapter, useful prompts are: “What did you expect from Required ligatures are not optional decoration?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing testing only Latin fi and generalising to every writing system be made smaller?” The learner, not the parent, should supply the technical explanation.
Practice with an explained answer
Question. Build a tiny heritage page with using historical forms only with a justified editorial purpose. Include one ordinary case, one boundary and one deliberate failure caused by testing only Latin fi and generalising to every writing system. 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: Some scripts require substitutions for correct shaping, and CSS feature controls must not disable required features. It shows a trace, not only a final value. The ordinary case should demonstrate “The declaration is not permission to break required script shaping.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: Separate required shaping from the optional groups named by the property. Other data choices are valid when the evidence supports the same causal chain.
Decision and transfer
For Required ligatures are not optional decoration, separate the documented CSS font-variant-ligatures 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
Programming text often benefits from disabling optional ligatures so visible characters match the source, even if a coding font offers stylistic forms. 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 letting a decorative arrow glyph hide two typed characters in a teaching example. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. Use none for code samples and explain the source characters.
For the Code and identifiers prioritise distinction chapter on CSS font-variant-ligatures, 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 letting a decorative arrow glyph hide two typed characters in a teaching example. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.
Core worked example
pre,code{font-variant-ligatures:none}Explained result. Learners see the characters they must type. 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: family portal. Transfer the rule using scoping typography so form fields remain predictable. 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 “Programming text often benefits from disabling optional ligatures so visible characters match the source, even if a coding font offers stylistic forms.” Apply this procedure: Use none for code samples and explain the source characters. The expected mechanism is: Learners see the characters they must type. For the family portal, add one near-miss that exposes letting a decorative arrow glyph hide two typed characters in a teaching example. 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: multilingual page. Predict the rule using respecting shaping rules beyond Latin examples. 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 “Programming text often benefits from disabling optional ligatures so visible characters match the source, even if a coding font offers stylistic forms.” Apply this procedure: Use none for code samples and explain the source characters. The expected mechanism is: Learners see the characters they must type. For the multilingual page, add one near-miss that exposes letting a decorative arrow glyph hide two typed characters in a teaching example. 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: test laboratory. Contrast the rule using checking font files, feature support, inheritance and screenshots. 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 “Programming text often benefits from disabling optional ligatures so visible characters match the source, even if a coding font offers stylistic forms.” Apply this procedure: Use none for code samples and explain the source characters. The expected mechanism is: Learners see the characters they must type. For the test laboratory, add one near-miss that exposes letting a decorative arrow glyph hide two typed characters in a teaching example. 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: design review. Stress-test the rule using choosing high-level font variants versus low-level feature settings. 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 “Programming text often benefits from disabling optional ligatures so visible characters match the source, even if a coding font offers stylistic forms.” Apply this procedure: Use none for code samples and explain the source characters. The expected mechanism is: Learners see the characters they must type. For the design review, add one near-miss that exposes letting a decorative arrow glyph hide two typed characters in a teaching example. 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 letting a decorative arrow glyph hide two typed characters in a teaching example.
- Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
- Repair check: use the reversible procedure “Use none for code samples and explain the source characters.” 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 font-variant-ligatures syntax. For this chapter, useful prompts are: “What did you expect from Code and identifiers prioritise distinction?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing letting a decorative arrow glyph hide two typed characters in a teaching example be made smaller?” The learner, not the parent, should supply the technical explanation.
Practice with an explained answer
Question. Build a tiny coding worksheet with disabling optional ligatures where character distinction matters. Include one ordinary case, one boundary and one deliberate failure caused by letting a decorative arrow glyph hide two typed characters in a teaching example. 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: Programming text often benefits from disabling optional ligatures so visible characters match the source, even if a coding font offers stylistic forms. It shows a trace, not only a final value. The ordinary case should demonstrate “Learners see the characters they must type.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: Use none for code samples and explain the source characters. Other data choices are valid when the evidence supports the same causal chain.
Decision and transfer
For Code and identifiers prioritise distinction, separate the documented CSS font-variant-ligatures 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
Common ligatures may improve texture, while discretionary or historical forms can slow recognition at small sizes. 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 choosing features from a large specimen instead of the real article. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. Test paragraphs, zoom, mobile width and unfamiliar readers.
For the Body text needs reading evidence chapter on CSS font-variant-ligatures, 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 choosing features from a large specimen instead of the real article. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.
Core worked example
.article{font-variant-ligatures:common-ligatures contextual}Explained result. The restrained set is a hypothesis that still requires reading checks. 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: test laboratory. Predict the rule using checking font files, feature support, inheritance and screenshots. 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 “Common ligatures may improve texture, while discretionary or historical forms can slow recognition at small sizes.” Apply this procedure: Test paragraphs, zoom, mobile width and unfamiliar readers. The expected mechanism is: The restrained set is a hypothesis that still requires reading checks. For the test laboratory, add one near-miss that exposes choosing features from a large specimen instead of the real article. 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: design review. Contrast the rule using choosing high-level font variants versus low-level feature settings. 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 “Common ligatures may improve texture, while discretionary or historical forms can slow recognition at small sizes.” Apply this procedure: Test paragraphs, zoom, mobile width and unfamiliar readers. The expected mechanism is: The restrained set is a hypothesis that still requires reading checks. For the design review, add one near-miss that exposes choosing features from a large specimen instead of the real article. 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: school article. Stress-test the rule using keeping common text ligatures while protecting readability. 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 “Common ligatures may improve texture, while discretionary or historical forms can slow recognition at small sizes.” Apply this procedure: Test paragraphs, zoom, mobile width and unfamiliar readers. The expected mechanism is: The restrained set is a hypothesis that still requires reading checks. For the school article, add one near-miss that exposes choosing features from a large specimen instead of the real article. 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: CCA poster. Explain the rule using trying discretionary ligatures in a display heading. 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 “Common ligatures may improve texture, while discretionary or historical forms can slow recognition at small sizes.” Apply this procedure: Test paragraphs, zoom, mobile width and unfamiliar readers. The expected mechanism is: The restrained set is a hypothesis that still requires reading checks. For the CCA poster, add one near-miss that exposes choosing features from a large specimen instead of the real article. 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 choosing features from a large specimen instead of the real article.
- Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
- Repair check: use the reversible procedure “Test paragraphs, zoom, mobile width and unfamiliar readers.” 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 font-variant-ligatures syntax. For this chapter, useful prompts are: “What did you expect from Body text needs reading evidence?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing choosing features from a large specimen instead of the real article be made smaller?” The learner, not the parent, should supply the technical explanation.
Practice with an explained answer
Question. Build a tiny family portal with scoping typography so form fields remain predictable. Include one ordinary case, one boundary and one deliberate failure caused by choosing features from a large specimen instead of the real article. 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: Common ligatures may improve texture, while discretionary or historical forms can slow recognition at small sizes. It shows a trace, not only a final value. The ordinary case should demonstrate “The restrained set is a hypothesis that still requires reading checks.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: Test paragraphs, zoom, mobile width and unfamiliar readers. Other data choices are valid when the evidence supports the same causal chain.
Decision and transfer
For Body text needs reading evidence, separate the documented CSS font-variant-ligatures 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. Low-level feature settings are not the first tool
font-feature-settings can address raw tags, but high-level font-variant properties provide clearer cascade semantics for common needs. 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 writing raw liga and dlig tags when readable properties suffice. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. Prefer font-variant-ligatures, then justify any lower-level exception.
For the Low-level feature settings are not the first tool chapter on CSS font-variant-ligatures, 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 writing raw liga and dlig tags when readable properties suffice. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.
Core worked example
.prose{font-variant-ligatures:common-ligatures no-discretionary-ligatures}Explained result. The high-level declaration states intent without exposing OpenType tag syntax. 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: school article. Contrast the rule using keeping common text ligatures while protecting readability. 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 “font-feature-settings can address raw tags, but high-level font-variant properties provide clearer cascade semantics for common needs.” Apply this procedure: Prefer font-variant-ligatures, then justify any lower-level exception. The expected mechanism is: The high-level declaration states intent without exposing OpenType tag syntax. For the school article, add one near-miss that exposes writing raw liga and dlig tags when readable properties suffice. 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: CCA poster. Stress-test the rule using trying discretionary ligatures in a display heading. 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 “font-feature-settings can address raw tags, but high-level font-variant properties provide clearer cascade semantics for common needs.” Apply this procedure: Prefer font-variant-ligatures, then justify any lower-level exception. The expected mechanism is: The high-level declaration states intent without exposing OpenType tag syntax. For the CCA poster, add one near-miss that exposes writing raw liga and dlig tags when readable properties suffice. 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: heritage page. Explain the rule using using historical forms only with a justified editorial purpose. 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 “font-feature-settings can address raw tags, but high-level font-variant properties provide clearer cascade semantics for common needs.” Apply this procedure: Prefer font-variant-ligatures, then justify any lower-level exception. The expected mechanism is: The high-level declaration states intent without exposing OpenType tag syntax. For the heritage page, add one near-miss that exposes writing raw liga and dlig tags when readable properties suffice. 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: coding worksheet. Transfer the rule using disabling optional ligatures where character distinction matters. 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 “font-feature-settings can address raw tags, but high-level font-variant properties provide clearer cascade semantics for common needs.” Apply this procedure: Prefer font-variant-ligatures, then justify any lower-level exception. The expected mechanism is: The high-level declaration states intent without exposing OpenType tag syntax. For the coding worksheet, add one near-miss that exposes writing raw liga and dlig tags when readable properties suffice. 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 writing raw liga and dlig tags when readable properties suffice.
- Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
- Repair check: use the reversible procedure “Prefer font-variant-ligatures, then justify any lower-level exception.” 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 font-variant-ligatures syntax. For this chapter, useful prompts are: “What did you expect from Low-level feature settings are not the first tool?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing writing raw liga and dlig tags when readable properties suffice be made smaller?” The learner, not the parent, should supply the technical explanation.
Practice with an explained answer
Question. Build a tiny multilingual page with respecting shaping rules beyond Latin examples. Include one ordinary case, one boundary and one deliberate failure caused by writing raw liga and dlig tags when readable properties suffice. 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: font-feature-settings can address raw tags, but high-level font-variant properties provide clearer cascade semantics for common needs. It shows a trace, not only a final value. The ordinary case should demonstrate “The high-level declaration states intent without exposing OpenType tag syntax.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: Prefer font-variant-ligatures, then justify any lower-level exception. Other data choices are valid when the evidence supports the same causal chain.
Decision and transfer
For Low-level feature settings are not the first tool, separate the documented CSS font-variant-ligatures 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. Cascade order can replace a whole value
A later matching declaration replaces the earlier property value; individual keyword groups do not merge across 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 splitting feature decisions across selectors and expecting accumulation. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. Inspect the winning computed value and consolidate component rules.
For the Cascade order can replace a whole value chapter on CSS font-variant-ligatures, 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 splitting feature decisions across selectors and expecting accumulation. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.
Core worked example
.card{font-variant-ligatures:common-ligatures}.special{font-variant-ligatures:discretionary-ligatures}Explained result. An element matching both receives the winning declaration, not an automatic union. 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: heritage page. Stress-test the rule using using historical forms only with a justified editorial purpose. 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 later matching declaration replaces the earlier property value; individual keyword groups do not merge across rules.” Apply this procedure: Inspect the winning computed value and consolidate component rules. The expected mechanism is: An element matching both receives the winning declaration, not an automatic union. For the heritage page, add one near-miss that exposes splitting feature decisions across selectors and expecting accumulation. 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: coding worksheet. Explain the rule using disabling optional ligatures where character distinction matters. 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 later matching declaration replaces the earlier property value; individual keyword groups do not merge across rules.” Apply this procedure: Inspect the winning computed value and consolidate component rules. The expected mechanism is: An element matching both receives the winning declaration, not an automatic union. For the coding worksheet, add one near-miss that exposes splitting feature decisions across selectors and expecting accumulation. 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: family portal. Transfer the rule using scoping typography so form fields remain predictable. 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 later matching declaration replaces the earlier property value; individual keyword groups do not merge across rules.” Apply this procedure: Inspect the winning computed value and consolidate component rules. The expected mechanism is: An element matching both receives the winning declaration, not an automatic union. For the family portal, add one near-miss that exposes splitting feature decisions across selectors and expecting accumulation. 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: multilingual page. Predict the rule using respecting shaping rules beyond Latin examples. 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 later matching declaration replaces the earlier property value; individual keyword groups do not merge across rules.” Apply this procedure: Inspect the winning computed value and consolidate component rules. The expected mechanism is: An element matching both receives the winning declaration, not an automatic union. For the multilingual page, add one near-miss that exposes splitting feature decisions across selectors and expecting accumulation. 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 splitting feature decisions across selectors and expecting accumulation.
- Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
- Repair check: use the reversible procedure “Inspect the winning computed value and consolidate component rules.” 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 font-variant-ligatures syntax. For this chapter, useful prompts are: “What did you expect from Cascade order can replace a whole value?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing splitting feature decisions across selectors and expecting accumulation be made smaller?” The learner, not the parent, should supply the technical explanation.
Practice with an explained answer
Question. Build a tiny test laboratory with checking font files, feature support, inheritance and screenshots. Include one ordinary case, one boundary and one deliberate failure caused by splitting feature decisions across selectors and expecting accumulation. 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 later matching declaration replaces the earlier property value; individual keyword groups do not merge across rules. It shows a trace, not only a final value. The ordinary case should demonstrate “An element matching both receives the winning declaration, not an automatic union.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: Inspect the winning computed value and consolidate component rules. Other data choices are valid when the evidence supports the same causal chain.
Decision and transfer
For Cascade order can replace a whole value, separate the documented CSS font-variant-ligatures 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. Visual regression tests need stable fonts
Screenshots are useful only when the intended font loads and the environment is controlled enough to expose a real feature change. 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 accepting a screenshot produced with a fallback font. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. Wait for document.fonts.ready and record browser, font asset and sample string.
For the Visual regression tests need stable fonts chapter on CSS font-variant-ligatures, 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 accepting a screenshot produced with a fallback font. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.
Core worked example
await document.fonts.ready; console.log(document.fonts.check('16px KnownFont'));Explained result. The check supplies evidence that the tested face was available. 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: family portal. Explain the rule using scoping typography so form fields remain predictable. 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 “Screenshots are useful only when the intended font loads and the environment is controlled enough to expose a real feature change.” Apply this procedure: Wait for document.fonts.ready and record browser, font asset and sample string. The expected mechanism is: The check supplies evidence that the tested face was available. For the family portal, add one near-miss that exposes accepting a screenshot produced with a fallback font. 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: multilingual page. Transfer the rule using respecting shaping rules beyond Latin examples. 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 “Screenshots are useful only when the intended font loads and the environment is controlled enough to expose a real feature change.” Apply this procedure: Wait for document.fonts.ready and record browser, font asset and sample string. The expected mechanism is: The check supplies evidence that the tested face was available. For the multilingual page, add one near-miss that exposes accepting a screenshot produced with a fallback font. 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: test laboratory. Predict the rule using checking font files, feature support, inheritance and screenshots. 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 “Screenshots are useful only when the intended font loads and the environment is controlled enough to expose a real feature change.” Apply this procedure: Wait for document.fonts.ready and record browser, font asset and sample string. The expected mechanism is: The check supplies evidence that the tested face was available. For the test laboratory, add one near-miss that exposes accepting a screenshot produced with a fallback font. 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: design review. Contrast the rule using choosing high-level font variants versus low-level feature settings. 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 “Screenshots are useful only when the intended font loads and the environment is controlled enough to expose a real feature change.” Apply this procedure: Wait for document.fonts.ready and record browser, font asset and sample string. The expected mechanism is: The check supplies evidence that the tested face was available. For the design review, add one near-miss that exposes accepting a screenshot produced with a fallback font. 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 accepting a screenshot produced with a fallback font.
- Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
- Repair check: use the reversible procedure “Wait for document.fonts.ready and record browser, font asset and sample string.” 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 font-variant-ligatures syntax. For this chapter, useful prompts are: “What did you expect from Visual regression tests need stable fonts?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing accepting a screenshot produced with a fallback font be made smaller?” The learner, not the parent, should supply the technical explanation.
Practice with an explained answer
Question. Build a tiny design review with choosing high-level font variants versus low-level feature settings. Include one ordinary case, one boundary and one deliberate failure caused by accepting a screenshot produced with a fallback font. 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: Screenshots are useful only when the intended font loads and the environment is controlled enough to expose a real feature change. It shows a trace, not only a final value. The ordinary case should demonstrate “The check supplies evidence that the tested face was available.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: Wait for document.fonts.ready and record browser, font asset and sample string. Other data choices are valid when the evidence supports the same causal chain.
Decision and transfer
For Visual regression tests need stable fonts, separate the documented CSS font-variant-ligatures mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.
Previous chapter . Contents . Next chapter
CHAPTER 20 OF 20 . Transfer with judgment
20. Choose features for the reader and task
Use common features for ordinary typography, optional display forms selectively, and none where literal character recognition matters. 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 enabling every available feature as a demonstration of sophistication. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. Write a typography policy by content role and verify it with readers.
For the Choose features for the reader and task chapter on CSS font-variant-ligatures, 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 enabling every available feature as a demonstration of sophistication. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.
Core worked example
const policy={prose:'common',display:'reviewed discretionary',code:'none'};Explained result. A role-based policy connects the CSS choice to comprehension rather than ornament. 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: test laboratory. Transfer the rule using checking font files, feature support, inheritance and screenshots. 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 common features for ordinary typography, optional display forms selectively, and none where literal character recognition matters.” Apply this procedure: Write a typography policy by content role and verify it with readers. The expected mechanism is: A role-based policy connects the CSS choice to comprehension rather than ornament. For the test laboratory, add one near-miss that exposes enabling every available feature as a demonstration of sophistication. 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: design review. Predict the rule using choosing high-level font variants versus low-level feature settings. 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 common features for ordinary typography, optional display forms selectively, and none where literal character recognition matters.” Apply this procedure: Write a typography policy by content role and verify it with readers. The expected mechanism is: A role-based policy connects the CSS choice to comprehension rather than ornament. For the design review, add one near-miss that exposes enabling every available feature as a demonstration of sophistication. 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: school article. Contrast the rule using keeping common text ligatures while protecting readability. 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 common features for ordinary typography, optional display forms selectively, and none where literal character recognition matters.” Apply this procedure: Write a typography policy by content role and verify it with readers. The expected mechanism is: A role-based policy connects the CSS choice to comprehension rather than ornament. For the school article, add one near-miss that exposes enabling every available feature as a demonstration of sophistication. 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: CCA poster. Stress-test the rule using trying discretionary ligatures in a display heading. 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 common features for ordinary typography, optional display forms selectively, and none where literal character recognition matters.” Apply this procedure: Write a typography policy by content role and verify it with readers. The expected mechanism is: A role-based policy connects the CSS choice to comprehension rather than ornament. For the CCA poster, add one near-miss that exposes enabling every available feature as a demonstration of sophistication. 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 enabling every available feature as a demonstration of sophistication.
- Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
- Repair check: use the reversible procedure “Write a typography policy by content role and verify it with readers.” 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 font-variant-ligatures syntax. For this chapter, useful prompts are: “What did you expect from Choose features for the reader and task?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing enabling every available feature as a demonstration of sophistication be made smaller?” The learner, not the parent, should supply the technical explanation.
Practice with an explained answer
Question. Build a tiny school article with keeping common text ligatures while protecting readability. Include one ordinary case, one boundary and one deliberate failure caused by enabling every available feature as a demonstration of sophistication. 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 common features for ordinary typography, optional display forms selectively, and none where literal character recognition matters. It shows a trace, not only a final value. The ordinary case should demonstrate “A role-based policy connects the CSS choice to comprehension rather than ornament.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: Write a typography policy by content role and verify it with readers. Other data choices are valid when the evidence supports the same causal chain.
Decision and transfer
For Choose features for the reader and task, separate the documented CSS font-variant-ligatures 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. school article: model, boundary and recovery
Create a small school article using keeping common text ligatures while protecting readability. Combine “The property controls optional typographic features” 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: font-variant-ligatures selects groups of ligature and contextual features for text rendered by the chosen font. Apply: Choose a font with known features and compare a diagnostic string. Verify: The declaration requests common ligatures and contextual alternates; actual glyphs still come from the font. 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. CCA poster: model, boundary and recovery
Create a small CCA poster using trying discretionary ligatures in a display heading. Combine “Common ligatures have paired controls” 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: common-ligatures enables common and standard ligature features; no-common-ligatures disables that group. Apply: Select one state per feature group. Verify: The declaration requests common ligatures when the font provides them. 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. heritage page: model, boundary and recovery
Create a small heritage page using using historical forms only with a justified editorial purpose. Combine “Contextual alternates form their own group” 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: contextual enables context-sensitive alternates; no-contextual disables them. Apply: Use the broader term contextual alternates and inspect the font feature. Verify: The font may choose glyph forms based on neighbours without creating one fused glyph. 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. coding worksheet: model, boundary and recovery
Create a small coding worksheet using disabling optional ligatures where character distinction matters. Combine “The property is inherited” with one later chapter. Include an ordinary case, a boundary, a deliberate failure and a recovery. Write the expected state before each operation.
Explained route. Start with: A value set on a container normally reaches descendants, including controls or code unless another rule resets it. Apply: Inspect computed styles on representative descendants. Verify: The nested code rule creates a deliberate boundary. 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. family portal: model, boundary and recovery
Create a small family portal using scoping typography so form fields remain predictable. Combine “Language and script shape typography” 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: Shaping engines consider language and script; author-controlled optional features do not replace correct language metadata. Apply: Set truthful lang attributes and test real script samples. Verify: The language metadata and CSS feature choice serve different parts of text shaping. 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. multilingual page: model, boundary and recovery
Create a small multilingual page using respecting shaping rules beyond Latin examples. Combine “Body text needs reading evidence” 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: Common ligatures may improve texture, while discretionary or historical forms can slow recognition at small sizes. Apply: Test paragraphs, zoom, mobile width and unfamiliar readers. Verify: The restrained set is a hypothesis that still requires reading checks. 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. test laboratory: model, boundary and recovery
Create a small test laboratory using checking font files, feature support, inheritance and screenshots. Combine “Visual regression tests need stable fonts” 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: Screenshots are useful only when the intended font loads and the environment is controlled enough to expose a real feature change. Apply: Wait for document.fonts.ready and record browser, font asset and sample string. Verify: The check supplies evidence that the tested face was available. 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. design review: model, boundary and recovery
Create a small design review using choosing high-level font variants versus low-level feature settings. Combine “normal uses the user-agent default policy” 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 value normal lets the browser apply normal typographic behaviour for the font, script and language. Apply: Compare computed value and rendered output rather than expanding normal by guesswork. Verify: The browser retains its normal shaping policy. 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.
