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-feature-settings provides low-level control over OpenType font features through quoted four-character tags and optional non-negative values. It exists for specialised features without a suitable higher-level CSS property. Mastery means using the property sparingly, predicting its all-at-once inherited value, understanding that later low-level settings can override font-variant choices, and verifying actual glyph support in every selected font. 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.

font-feature-settings directly requests OpenType feature tags and is intended for particular features not adequately exposed by higher-level CSS. 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 raw tags for familiar features that already have clearer semantic properties. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. Search the font-variant and font-kerning properties first, then document why a raw feature is still necessary.

For the This is a low-level escape hatch chapter on CSS font-feature-settings, 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 raw tags for familiar features that already have clearer semantic properties. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.

Core worked example

.chem { font-feature-settings: 'sinf'; }

Four purposeful transfer cases

Case 1: chemistry worksheet. Predict the rule using scientific inferiors, formula readability and a chosen typeface. 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.

Case 2: library poster. Contrast the rule using ornamental alternates, fallback fonts and a plain-text meaning. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Case 3: CCA programme. Stress-test the rule using stylistic sets, headings and body-copy restraint. 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.

Case 4: transport table. Explain the rule using numeric alignment, semantic properties and fallback behaviour. 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.

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 raw tags for familiar features that already have clearer semantic properties.
• Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
• Repair check: use the reversible procedure “Search the font-variant and font-kerning properties first, then document why a raw feature is still necessary.” 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-feature-settings syntax. For this chapter, useful prompts are: “What did you expect from This is a low-level escape hatch?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing using raw tags for familiar features that already have clearer semantic properties be made smaller?” The learner, not the parent, should supply the technical explanation.

Practice with an explained answer

Question. Build a tiny coding handout with ligatures, source-code clarity and a local opt-out. Include one ordinary case, one boundary and one deliberate failure caused by using raw tags for familiar features that already have clearer semantic properties. Predict each result before using a tool, then report the first point where observation differs from prediction.

Decision and transfer

For This is a low-level escape hatch, separate the documented CSS font-feature-settings 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

normal means this property itself causes no change in glyph selection or positioning. 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 reading normal as a command that disables every feature the shaping engine would otherwise use. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. Separate property requests from required and default features supplied by the font and shaping system.

For the The initial value normal makes no request chapter on CSS font-feature-settings, 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 reading normal as a command that disables every feature the shaping engine would otherwise use. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.

Core worked example

.note { font-feature-settings: normal; }

Four purposeful transfer cases

Case 1: CCA programme. Contrast the rule using stylistic sets, headings and body-copy restraint. 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.

Case 2: transport table. Stress-test the rule using numeric alignment, semantic properties and fallback behaviour. 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.

Case 3: bilingual article. Explain the rule using script shaping, language metadata and font coverage. 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.

Case 4: coding handout. Transfer the rule using ligatures, source-code clarity and a local opt-out. 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.

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 reading normal as a command that disables every feature the shaping engine would otherwise use.
• Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
• Repair check: use the reversible procedure “Separate property requests from required and default features supplied by the font and shaping system.” 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-feature-settings syntax. For this chapter, useful prompts are: “What did you expect from The initial value normal makes no request?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing reading normal as a command that disables every feature the shaping engine would otherwise use be made smaller?” The learner, not the parent, should supply the technical explanation.

Practice with an explained answer

Question. Build a tiny history display with historical forms, quotations and accessible reading. Include one ordinary case, one boundary and one deliberate failure caused by reading normal as a command that disables every feature the shaping engine would otherwise use. Predict each result before using a tool, then report the first point where observation differs from prediction.

Decision and transfer

For The initial value normal makes no request, separate the documented CSS font-feature-settings 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

An OpenType feature tag is written as a quoted string containing exactly four ASCII characters. 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 an unquoted identifier or a tag with three or five characters. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. Count characters, keep the tag quoted and let invalid test cases fail visibly.

For the Tags are quoted four-character strings chapter on CSS font-feature-settings, 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 an unquoted identifier or a tag with three or five characters. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.

Core worked example

.formula { font-feature-settings: 'sinf'; }

Four purposeful transfer cases

Case 1: bilingual article. Stress-test the rule using script shaping, language metadata and font coverage. 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.

Case 2: coding handout. Explain the rule using ligatures, source-code clarity and a local opt-out. 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.

Case 3: history display. Transfer the rule using historical forms, quotations and accessible reading. 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.

Case 4: design test page. Predict the rule using tag values, computed styles and screenshot comparisons. 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.

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 an unquoted identifier or a tag with three or five characters.
• Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
• Repair check: use the reversible procedure “Count characters, keep the tag quoted and let invalid test cases fail visibly.” 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-feature-settings syntax. For this chapter, useful prompts are: “What did you expect from Tags are quoted four-character strings?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing writing an unquoted identifier or a tag with three or five characters be made smaller?” The learner, not the parent, should supply the technical explanation.

Practice with an explained answer

Question. Build a tiny design test page with tag values, computed styles and screenshot comparisons. Include one ordinary case, one boundary and one deliberate failure caused by writing an unquoted identifier or a tag with three or five characters. Predict each result before using a tool, then report the first point where observation differs from prediction.

Decision and transfer

For Tags are quoted four-character strings, separate the documented CSS font-feature-settings 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 tag string preserves case, and an uppercase custom tag is not automatically the same as the lowercase registered tag. 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 normalising tags to lower case without checking the font definition. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. Copy the exact tag from authoritative font documentation and test the selected file.

For the Feature tags are case-sensitive chapter on CSS font-feature-settings, 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 normalising tags to lower case without checking the font definition. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.

Core worked example

.custom { font-feature-settings: 'PKRN'; }

Four purposeful transfer cases

Case 1: history display. Explain the rule using historical forms, quotations and accessible reading. 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.

Case 2: design test page. Transfer the rule using tag values, computed styles and screenshot comparisons. 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.

Case 3: chemistry worksheet. Predict the rule using scientific inferiors, formula readability and a chosen typeface. 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.

Case 4: library poster. Contrast the rule using ornamental alternates, fallback fonts and a plain-text meaning. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

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 normalising tags to lower case without checking the font definition.
• Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
• Repair check: use the reversible procedure “Copy the exact tag from authoritative font documentation and test the selected file.” 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-feature-settings syntax. For this chapter, useful prompts are: “What did you expect from Feature tags are case-sensitive?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing normalising tags to lower case without checking the font definition be made smaller?” The learner, not the parent, should supply the technical explanation.

Practice with an explained answer

Question. Build a tiny chemistry worksheet with scientific inferiors, formula readability and a chosen typeface. Include one ordinary case, one boundary and one deliberate failure caused by normalising tags to lower case without checking the font definition. Predict each result before using a tool, then report the first point where observation differs from prediction.

Decision and transfer

For Feature tags are case-sensitive, separate the documented CSS font-feature-settings 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 tag without a following value is interpreted with value 1, which enables a boolean feature or selects index one for a non-boolean feature. 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 a bare tag as merely naming a feature without enabling it. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. Expand the shorthand mentally and compare the computed request.

For the Omitted values mean one chapter on CSS font-feature-settings, 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 a bare tag as merely naming a feature without enabling it. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.

Core worked example

.chem { font-feature-settings: 'sinf'; }

Four purposeful transfer cases

Case 1: chemistry worksheet. Transfer the rule using scientific inferiors, formula readability and a chosen typeface. 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.

Case 2: library poster. Predict the rule using ornamental alternates, fallback fonts and a plain-text meaning. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Case 3: CCA programme. Contrast the rule using stylistic sets, headings and body-copy restraint. 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.

Case 4: transport table. Stress-test the rule using numeric alignment, semantic properties and fallback behaviour. 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.

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 a bare tag as merely naming a feature without enabling it.
• Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
• Repair check: use the reversible procedure “Expand the shorthand mentally and compare the computed request.” 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-feature-settings syntax. For this chapter, useful prompts are: “What did you expect from Omitted values mean one?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing treating a bare tag as merely naming a feature without enabling it be made smaller?” The learner, not the parent, should supply the technical explanation.

Practice with an explained answer

Question. Build a tiny library poster with ornamental alternates, fallback fonts and a plain-text meaning. Include one ordinary case, one boundary and one deliberate failure caused by treating a bare tag as merely naming a feature without enabling it. Predict each result before using a tool, then report the first point where observation differs from prediction.

Decision and transfer

For Omitted values mean one, separate the documented CSS font-feature-settings 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 keywords on and off are synonyms for the integer values 1 and 0. 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 mixing application booleans with CSS syntax and generating invalid quoted values. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. Generate one of the documented forms and inspect the computed style.

For the on and off map to one and zero chapter on CSS font-feature-settings, 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 mixing application booleans with CSS syntax and generating invalid quoted values. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.

Core worked example

.sample { font-feature-settings: 'dlig' off; }

Four purposeful transfer cases

Case 1: CCA programme. Predict the rule using stylistic sets, headings and body-copy restraint. 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.

Case 2: transport table. Contrast the rule using numeric alignment, semantic properties and fallback behaviour. 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.

Case 3: bilingual article. Stress-test the rule using script shaping, language metadata and font coverage. 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.

Case 4: coding handout. Explain the rule using ligatures, source-code clarity and a local opt-out. 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.

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 mixing application booleans with CSS syntax and generating invalid quoted values.
• Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
• Repair check: use the reversible procedure “Generate one of the documented forms and inspect the computed style.” 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-feature-settings syntax. For this chapter, useful prompts are: “What did you expect from on and off map to one and zero?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing mixing application booleans with CSS syntax and generating invalid quoted values be made smaller?” The learner, not the parent, should supply the technical explanation.

Practice with an explained answer

Question. Build a tiny CCA programme with stylistic sets, headings and body-copy restraint. Include one ordinary case, one boundary and one deliberate failure caused by mixing application booleans with CSS syntax and generating invalid quoted values. Predict each result before using a tool, then report the first point where observation differs from prediction.

Decision and transfer

For on and off map to one and zero, separate the documented CSS font-feature-settings 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 feature value may be an integer zero or greater; non-boolean features can use positive indexes to select a variant. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.

The high-value mistake in this chapter is assuming every feature accepts only zero or one. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. Read the chosen font’s feature definition and test supported indexes rather than guessing.

For the Non-negative integers can select variants chapter on CSS font-feature-settings, use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on assuming every feature accepts only zero or one. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.

Core worked example

.ornament { font-feature-settings: 'nalt' 3; }

Four purposeful transfer cases

Case 1: bilingual article. Contrast the rule using script shaping, language metadata and font coverage. 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.

Case 2: coding handout. Stress-test the rule using ligatures, source-code clarity and a local opt-out. 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.

Case 3: history display. Explain the rule using historical forms, quotations and accessible reading. 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.

Case 4: design test page. Transfer the rule using tag values, computed styles and screenshot comparisons. 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.

Diagnostic route

• Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
• Boundary check: create the smallest input that triggers assuming every feature accepts only zero or one.
• Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
• Repair check: use the reversible procedure “Read the chosen font’s feature definition and test supported indexes rather than guessing.” 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-feature-settings syntax. For this chapter, useful prompts are: “What did you expect from Non-negative integers can select variants?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing assuming every feature accepts only zero or one be made smaller?” The learner, not the parent, should supply the technical explanation.

Practice with an explained answer

Question. Build a tiny transport table with numeric alignment, semantic properties and fallback behaviour. Include one ordinary case, one boundary and one deliberate failure caused by assuming every feature accepts only zero or one. Predict each result before using a tool, then report the first point where observation differs from prediction.

Decision and transfer

For Non-negative integers can select variants, separate the documented CSS font-feature-settings 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 list of feature-tag values is comma-delimited; whitespace alone does not separate two feature entries. 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 two quoted tags side by side and assuming the declaration partially works. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. Validate the whole declaration and add one feature at a time.

For the Multiple features need commas chapter on CSS font-feature-settings, 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 two quoted tags side by side and assuming the declaration partially works. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.

Core worked example

.sample { font-feature-settings: 'sinf', 'twid'; }

Four purposeful transfer cases

Case 1: history display. Stress-test the rule using historical forms, quotations and accessible reading. 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.

Case 2: design test page. Explain the rule using tag values, computed styles and screenshot comparisons. 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.

Case 3: chemistry worksheet. Transfer the rule using scientific inferiors, formula readability and a chosen typeface. 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.

Case 4: library poster. Predict the rule using ornamental alternates, fallback fonts and a plain-text meaning. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

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 two quoted tags side by side and assuming the declaration partially works.
• Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
• Repair check: use the reversible procedure “Validate the whole declaration and add one feature at a time.” and record the first changed observation.
• Transfer check: repeat the rule in a second context and identify what remains invariant.

A parent does not need to know the final CSS font-feature-settings syntax. For this chapter, useful prompts are: “What did you expect from Multiple features need commas?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing writing two quoted tags side by side and assuming the declaration partially works be made smaller?” The learner, not the parent, should supply the technical explanation.

Practice with an explained answer

Question. Build a tiny bilingual article with script shaping, language metadata and font coverage. Include one ordinary case, one boundary and one deliberate failure caused by writing two quoted tags side by side and assuming the declaration partially works. Predict each result before using a tool, then report the first point where observation differs from prediction.

Decision and transfer

For Multiple features need commas, separate the documented CSS font-feature-settings 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

Unlike separate font-variant subproperties, an inherited font-feature-settings list cannot be incrementally amended by adding one tag in a descendant declaration. 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 declaring one child tag and expecting inherited tags to remain automatically. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. Restate the complete desired list or redesign with higher-level properties and narrower scopes.

For the The property value is replaced as a whole chapter on CSS font-feature-settings, 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 declaring one child tag and expecting inherited tags to remain automatically. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.

Core worked example

.parent { font-feature-settings:'sinf'; }
.child { font-feature-settings:'ss01'; }

Four purposeful transfer cases

Case 1: chemistry worksheet. Explain the rule using scientific inferiors, formula readability and a chosen typeface. 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.

Case 2: library poster. Transfer the rule using ornamental alternates, fallback fonts and a plain-text meaning. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Case 3: CCA programme. Predict the rule using stylistic sets, headings and body-copy restraint. 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.

Case 4: transport table. Contrast the rule using numeric alignment, semantic properties and fallback behaviour. 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.

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 declaring one child tag and expecting inherited tags to remain automatically.
• Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
• Repair check: use the reversible procedure “Restate the complete desired list or redesign with higher-level properties and narrower scopes.” 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-feature-settings syntax. For this chapter, useful prompts are: “What did you expect from The property value is replaced as a whole?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing declaring one child tag and expecting inherited tags to remain automatically be made smaller?” The learner, not the parent, should supply the technical explanation.

Practice with an explained answer

Question. Build a tiny coding handout with ligatures, source-code clarity and a local opt-out. Include one ordinary case, one boundary and one deliberate failure caused by declaring one child tag and expecting inherited tags to remain automatically. Predict each result before using a tool, then report the first point where observation differs from prediction.

Decision and transfer

For The property value is replaced as a whole, separate the documented CSS font-feature-settings 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 computed value normally passes from an element to descendants until another declaration wins. 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 placing an experimental feature on a broad container and unintentionally changing prose, labels or code. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. Scope the rule to the smallest semantic element and inspect nested content.

For the The property is inherited chapter on CSS font-feature-settings, 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 placing an experimental feature on a broad container and unintentionally changing prose, labels or code. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.

Core worked example

.article { font-feature-settings:'hist'; }
.article code { font-feature-settings:normal; }

Four purposeful transfer cases

Case 1: CCA programme. Transfer the rule using stylistic sets, headings and body-copy restraint. 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.

Case 2: transport table. Predict the rule using numeric alignment, semantic properties and fallback behaviour. 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.

Case 3: bilingual article. Contrast the rule using script shaping, language metadata and font coverage. 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.

Case 4: coding handout. Stress-test the rule using ligatures, source-code clarity and a local opt-out. 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.

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 placing an experimental feature on a broad container and unintentionally changing prose, labels or code.
• Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
• Repair check: use the reversible procedure “Scope the rule to the smallest semantic element and inspect nested 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-feature-settings 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 placing an experimental feature on a broad container and unintentionally changing prose, labels or code be made smaller?” The learner, not the parent, should supply the technical explanation.

Practice with an explained answer

Question. Build a tiny history display with historical forms, quotations and accessible reading. Include one ordinary case, one boundary and one deliberate failure caused by placing an experimental feature on a broad container and unintentionally changing prose, labels or code. Predict each result before using a tool, then report the first point where observation differs from prediction.

Decision and transfer

For The property is inherited, separate the documented CSS font-feature-settings 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 same feature tag appears more than once, the last occurrence supplies the computed value and earlier duplicates are removed. 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 reading the first occurrence as authoritative or relying on duplicate noise. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. Eliminate duplicates in source and verify the computed map.

For the Duplicate tags use the last value chapter on CSS font-feature-settings, 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 reading the first occurrence as authoritative or relying on duplicate noise. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.

Core worked example

.sample { font-feature-settings:'dlig' on, 'dlig' off; }

Four purposeful transfer cases

Case 1: bilingual article. Predict the rule using script shaping, language metadata and font coverage. 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.

Case 2: coding handout. Contrast the rule using ligatures, source-code clarity and a local opt-out. 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.

Case 3: history display. Stress-test the rule using historical forms, quotations and accessible reading. 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.

Case 4: design test page. Explain the rule using tag values, computed styles and screenshot comparisons. 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.

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 reading the first occurrence as authoritative or relying on duplicate noise.
• Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
• Repair check: use the reversible procedure “Eliminate duplicates in source and verify the computed map.” 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-feature-settings syntax. For this chapter, useful prompts are: “What did you expect from Duplicate tags use the last value?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing reading the first occurrence as authoritative or relying on duplicate noise be made smaller?” The learner, not the parent, should supply the technical explanation.

Practice with an explained answer

Question. Build a tiny design test page with tag values, computed styles and screenshot comparisons. Include one ordinary case, one boundary and one deliberate failure caused by reading the first occurrence as authoritative or relying on duplicate noise. Predict each result before using a tool, then report the first point where observation differs from prediction.

Decision and transfer

For Duplicate tags use the last value, separate the documented CSS font-feature-settings 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 computed value represents a map of feature tags, de-duplicates them and sorts tags by code-unit 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 expecting computed-style serialization to preserve author source order. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. Compare semantic tag-value pairs rather than raw declaration text.

For the Computed tags are de-duplicated and ordered chapter on CSS font-feature-settings, 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 computed-style serialization to preserve author source order. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.

Core worked example

.sample { font-feature-settings:'twid', 'sinf'; }

Four purposeful transfer cases

Case 1: history display. Contrast the rule using historical forms, quotations and accessible reading. 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.

Case 2: design test page. Stress-test the rule using tag values, computed styles and screenshot comparisons. 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.

Case 3: chemistry worksheet. Explain the rule using scientific inferiors, formula readability and a chosen typeface. 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.

Case 4: library poster. Transfer the rule using ornamental alternates, fallback fonts and a plain-text meaning. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

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 computed-style serialization to preserve author source order.
• Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
• Repair check: use the reversible procedure “Compare semantic tag-value pairs rather than raw declaration text.” 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-feature-settings syntax. For this chapter, useful prompts are: “What did you expect from Computed tags are de-duplicated and ordered?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing expecting computed-style serialization to preserve author source order be made smaller?” The learner, not the parent, should supply the technical explanation.

Practice with an explained answer

Question. Build a tiny chemistry worksheet with scientific inferiors, formula readability and a chosen typeface. Include one ordinary case, one boundary and one deliberate failure caused by expecting computed-style serialization to preserve author source order. Predict each result before using a tool, then report the first point where observation differs from prediction.

Decision and transfer

For Computed tags are de-duplicated and ordered, separate the documented CSS font-feature-settings 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 valid tag absent from the selected font produces no requested feature effect, and the user agent does not synthesize a fallback for arbitrary tags. 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 valid CSS guarantees visible alternate glyphs. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. Confirm the actual font file, feature table, glyph coverage and rendered result.

For the Unsupported tags are ignored by the font chapter on CSS font-feature-settings, 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 valid CSS guarantees visible alternate glyphs. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.

Core worked example

.sample { font-feature-settings:'sinf'; }

Four purposeful transfer cases

Case 1: chemistry worksheet. Stress-test the rule using scientific inferiors, formula readability and a chosen typeface. 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.

Case 2: library poster. Explain the rule using ornamental alternates, fallback fonts and a plain-text meaning. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Case 3: CCA programme. Transfer the rule using stylistic sets, headings and body-copy restraint. 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.

Case 4: transport table. Predict the rule using numeric alignment, semantic properties and fallback behaviour. 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.

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 valid CSS guarantees visible alternate glyphs.
• Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
• Repair check: use the reversible procedure “Confirm the actual font file, feature table, glyph coverage and rendered result.” and record the first changed observation.
• Transfer check: repeat the rule in a second context and identify what remains invariant.

A parent does not need to know the final CSS font-feature-settings syntax. For this chapter, useful prompts are: “What did you expect from Unsupported tags are ignored by the font?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing assuming valid CSS guarantees visible alternate glyphs be made smaller?” The learner, not the parent, should supply the technical explanation.

Practice with an explained answer

Question. Build a tiny library poster with ornamental alternates, fallback fonts and a plain-text meaning. Include one ordinary case, one boundary and one deliberate failure caused by assuming valid CSS guarantees visible alternate glyphs. Predict each result before using a tool, then report the first point where observation differs from prediction.

Decision and transfer

For Unsupported tags are ignored by the font, separate the documented CSS font-feature-settings 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 may be drawn from different fallback fonts, each with its own OpenType features and indexes. 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 one Latin phrase and generalising to every script and fallback face. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. Use representative characters, inspect the rendered font and avoid font-specific indexes across an uncontrolled stack.

For the Font fallback changes the feature landscape chapter on CSS font-feature-settings, 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 one Latin phrase and generalising to every script and fallback face. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.

Core worked example

.mixed { font-family: FeatureSerif, serif; font-feature-settings:'ss01'; }

Four purposeful transfer cases

Case 1: CCA programme. Explain the rule using stylistic sets, headings and body-copy restraint. 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.

Case 2: transport table. Transfer the rule using numeric alignment, semantic properties and fallback behaviour. 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.

Case 3: bilingual article. Predict the rule using script shaping, language metadata and font coverage. 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.

Case 4: coding handout. Contrast the rule using ligatures, source-code clarity and a local opt-out. 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.

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 one Latin phrase and generalising to every script and fallback face.
• Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
• Repair check: use the reversible procedure “Use representative characters, inspect the rendered font and avoid font-specific indexes across an uncontrolled stack.” 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-feature-settings syntax. For this chapter, useful prompts are: “What did you expect from Font fallback changes the feature landscape?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing testing one Latin phrase and generalising to every script and fallback face be made smaller?” The learner, not the parent, should supply the technical explanation.

Practice with an explained answer

Question. Build a tiny CCA programme with stylistic sets, headings and body-copy restraint. Include one ordinary case, one boundary and one deliberate failure caused by testing one Latin phrase and generalising to every script and fallback face. Predict each result before using a tool, then report the first point where observation differs from prediction.

Decision and transfer

For Font fallback changes the feature landscape, separate the documented CSS font-feature-settings 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

font-kerning and font-variant subproperties cascade independently, communicate intent and may have defined synthesis behaviour that raw tags lack. 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 kern, liga, dlig, onum or tnum tags merely because they look concise. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. Replace raw tags with the corresponding semantic property unless a verified exception requires the low-level control.

For the Prefer higher-level properties for common features chapter on CSS font-feature-settings, 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 kern, liga, dlig, onum or tnum tags merely because they look concise. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.

Core worked example

.price { font-variant-numeric: tabular-nums; }

Four purposeful transfer cases

Case 1: bilingual article. Transfer the rule using script shaping, language metadata and font coverage. 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.

Case 2: coding handout. Predict the rule using ligatures, source-code clarity and a local opt-out. 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.

Case 3: history display. Contrast the rule using historical forms, quotations and accessible reading. 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.

Case 4: design test page. Stress-test the rule using tag values, computed styles and screenshot comparisons. 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.

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 kern, liga, dlig, onum or tnum tags merely because they look concise.
• Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
• Repair check: use the reversible procedure “Replace raw tags with the corresponding semantic property unless a verified exception requires the low-level control.” and record the first changed observation.
• Transfer check: repeat the rule in a second context and identify what remains invariant.

A parent does not need to know the final CSS font-feature-settings syntax. For this chapter, useful prompts are: “What did you expect from Prefer higher-level properties for common features?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing using kern, liga, dlig, onum or tnum tags merely because they look concise be made smaller?” The learner, not the parent, should supply the technical explanation.

Practice with an explained answer

Question. Build a tiny transport table with numeric alignment, semantic properties and fallback behaviour. Include one ordinary case, one boundary and one deliberate failure caused by using kern, liga, dlig, onum or tnum tags merely because they look concise. Predict each result before using a tool, then report the first point where observation differs from prediction.

Decision and transfer

For Prefer higher-level properties for common features, separate the documented CSS font-feature-settings 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

In the feature-resolution order, font-feature-settings is applied after font-variant-derived settings and can therefore override a conflicting high-level request. 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 a later selector using font-variant always defeats a raw tag regardless of feature resolution. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. Trace cascade for each property first, then trace the documented feature application order.

For the Low-level settings resolve after font-variant chapter on CSS font-feature-settings, 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 a later selector using font-variant always defeats a raw tag regardless of feature resolution. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.

Core worked example

span { font-feature-settings:'dlig'; }
span.special { font-variant-ligatures:no-discretionary-ligatures; }

Four purposeful transfer cases

Case 1: history display. Predict the rule using historical forms, quotations and accessible reading. 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.

Case 2: design test page. Contrast the rule using tag values, computed styles and screenshot comparisons. 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.

Case 3: chemistry worksheet. Stress-test the rule using scientific inferiors, formula readability and a chosen typeface. 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.

Case 4: library poster. Explain the rule using ornamental alternates, fallback fonts and a plain-text meaning. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

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 a later selector using font-variant always defeats a raw tag regardless of feature resolution.
• Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
• Repair check: use the reversible procedure “Trace cascade for each property first, then trace the documented feature application 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-feature-settings syntax. For this chapter, useful prompts are: “What did you expect from Low-level settings resolve after font-variant?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing assuming a later selector using font-variant always defeats a raw tag regardless of feature resolution be made smaller?” The learner, not the parent, should supply the technical explanation.

Practice with an explained answer

Question. Build a tiny bilingual article with script shaping, language metadata and font coverage. Include one ordinary case, one boundary and one deliberate failure caused by assuming a later selector using font-variant always defeats a raw tag regardless of feature resolution. Predict each result before using a tool, then report the first point where observation differs from prediction.

Decision and transfer

For Low-level settings resolve after font-variant, separate the documented CSS font-feature-settings 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 font and font-variant shorthands do not reset font-feature-settings, so a low-level request can survive a typography refactor. 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 a new font shorthand cleared every previous font-related control. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. Inspect computed font-feature-settings explicitly when debugging inherited or old rules.

For the Font shorthands do not reset this property chapter on CSS font-feature-settings, 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 a new font shorthand cleared every previous font-related control. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.

Core worked example

.card { font-feature-settings:'sinf'; font:16px/1.5 serif; }

Four purposeful transfer cases

Case 1: chemistry worksheet. Contrast the rule using scientific inferiors, formula readability and a chosen typeface. 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.

Case 2: library poster. Stress-test the rule using ornamental alternates, fallback fonts and a plain-text meaning. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Case 3: CCA programme. Explain the rule using stylistic sets, headings and body-copy restraint. 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.

Case 4: transport table. Transfer the rule using numeric alignment, semantic properties and fallback behaviour. 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.

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 a new font shorthand cleared every previous font-related control.
• Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
• Repair check: use the reversible procedure “Inspect computed font-feature-settings explicitly when debugging inherited or old 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-feature-settings syntax. For this chapter, useful prompts are: “What did you expect from Font shorthands do not reset this property?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing assuming a new font shorthand cleared every previous font-related control be made smaller?” The learner, not the parent, should supply the technical explanation.

Practice with an explained answer

Question. Build a tiny coding handout with ligatures, source-code clarity and a local opt-out. Include one ordinary case, one boundary and one deliberate failure caused by assuming a new font shorthand cleared every previous font-related control. Predict each result before using a tool, then report the first point where observation differs from prediction.

Decision and transfer

For Font shorthands do not reset this property, separate the documented CSS font-feature-settings 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 browser can preserve a valid feature request in computed style even when the active font lacks the feature or relevant glyph substitution. 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 a computed declaration a successful visual test. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. Pair computed-style inspection with rendered-font inspection and representative visual fixtures.

For the Computed style cannot prove glyph support chapter on CSS font-feature-settings, 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 a computed declaration a successful visual test. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.

Core worked example

getComputedStyle(document.querySelector('.sample')).fontFeatureSettings

Four purposeful transfer cases

Case 1: CCA programme. Stress-test the rule using stylistic sets, headings and body-copy restraint. 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.

Case 2: transport table. Explain the rule using numeric alignment, semantic properties and fallback behaviour. 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.

Case 3: bilingual article. Transfer the rule using script shaping, language metadata and font coverage. 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.

Case 4: coding handout. Predict the rule using ligatures, source-code clarity and a local opt-out. 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.

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 a computed declaration a successful visual test.
• Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
• Repair check: use the reversible procedure “Pair computed-style inspection with rendered-font inspection and representative visual fixtures.” and record the first changed observation.
• Transfer check: repeat the rule in a second context and identify what remains invariant.

A parent does not need to know the final CSS font-feature-settings syntax. For this chapter, useful prompts are: “What did you expect from Computed style cannot prove glyph support?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing calling a computed declaration a successful visual test be made smaller?” The learner, not the parent, should supply the technical explanation.

Practice with an explained answer

Question. Build a tiny history display with historical forms, quotations and accessible reading. Include one ordinary case, one boundary and one deliberate failure caused by calling a computed declaration a successful visual test. Predict each result before using a tool, then report the first point where observation differs from prediction.

Decision and transfer

For Computed style cannot prove glyph support, separate the documented CSS font-feature-settings 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

Glyph substitutions should not be used to manufacture information that is absent from the underlying text, language or semantic markup. 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 encoding status, pronunciation or mathematical meaning only through a decorative alternate. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. Preserve meaningful characters and structure, then treat font features as presentation subject to fallback.

For the Accessibility and meaning stay in the content layer chapter on CSS font-feature-settings, 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 encoding status, pronunciation or mathematical meaning only through a decorative alternate. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.

Core worked example

<span class="formula">H2O</span>

Four purposeful transfer cases

Case 1: bilingual article. Explain the rule using script shaping, language metadata and font coverage. 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.

Case 2: coding handout. Transfer the rule using ligatures, source-code clarity and a local opt-out. 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.

Case 3: history display. Predict the rule using historical forms, quotations and accessible reading. 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.

Case 4: design test page. Contrast the rule using tag values, computed styles and screenshot comparisons. 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.

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 encoding status, pronunciation or mathematical meaning only through a decorative alternate.
• Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
• Repair check: use the reversible procedure “Preserve meaningful characters and structure, then treat font features as presentation subject to fallback.” 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-feature-settings syntax. For this chapter, useful prompts are: “What did you expect from Accessibility and meaning stay in the content layer?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing encoding status, pronunciation or mathematical meaning only through a decorative alternate be made smaller?” The learner, not the parent, should supply the technical explanation.

Practice with an explained answer

Question. Build a tiny design test page with tag values, computed styles and screenshot comparisons. Include one ordinary case, one boundary and one deliberate failure caused by encoding status, pronunciation or mathematical meaning only through a decorative alternate. Predict each result before using a tool, then report the first point where observation differs from prediction.

Decision and transfer

For Accessibility and meaning stay in the content layer, separate the documented CSS font-feature-settings 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 reliable implementation tests syntax, inheritance, cascade, duplicates, high-level conflicts, actual faces, fallback characters, unsupported tags and accessibility. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.

The high-value mistake in this chapter is approving one screenshot on one device and calling the feature portable. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. Record browser, font file, script sample, expected substitution and a readable no-feature fallback.

For the Build a font-specific verification matrix chapter on CSS font-feature-settings, use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on approving one screenshot on one device and calling the feature portable. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.

Core worked example

const samples=['normal','supported tag','unsupported tag','fallback face'];

Four purposeful transfer cases

Case 1: history display. Transfer the rule using historical forms, quotations and accessible reading. 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.

Case 2: design test page. Predict the rule using tag values, computed styles and screenshot comparisons. 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.

Case 3: chemistry worksheet. Contrast the rule using scientific inferiors, formula readability and a chosen typeface. 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.

Case 4: library poster. Stress-test the rule using ornamental alternates, fallback fonts and a plain-text meaning. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.

Diagnostic route

• Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
• Boundary check: create the smallest input that triggers approving one screenshot on one device and calling the feature portable.
• Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
• Repair check: use the reversible procedure “Record browser, font file, script sample, expected substitution and a readable no-feature fallback.” 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-feature-settings syntax. For this chapter, useful prompts are: “What did you expect from Build a font-specific verification matrix?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing approving one screenshot on one device and calling the feature portable be made smaller?” The learner, not the parent, should supply the technical explanation.

Practice with an explained answer

Question. Build a tiny chemistry worksheet with scientific inferiors, formula readability and a chosen typeface. Include one ordinary case, one boundary and one deliberate failure caused by approving one screenshot on one device and calling the feature portable. Predict each result before using a tool, then report the first point where observation differs from prediction.

Decision and transfer

For Build a font-specific verification matrix, separate the documented CSS font-feature-settings 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

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.

1. chemistry worksheet: model, boundary and recovery

Create a small chemistry worksheet using scientific inferiors, formula readability and a chosen typeface. Combine “This is a low-level escape hatch” with one later chapter. Include an ordinary case, a boundary, a deliberate failure and a recovery. Write the expected state before each operation.

2. library poster: model, boundary and recovery

Create a small library poster using ornamental alternates, fallback fonts and a plain-text meaning. Combine “Feature tags are case-sensitive” with one later chapter. Include an ordinary case, a boundary, a deliberate failure and a recovery. Write the expected state before each operation.

3. CCA programme: model, boundary and recovery

Create a small CCA programme using stylistic sets, headings and body-copy restraint. Combine “Non-negative integers can select variants” with one later chapter. Include an ordinary case, a boundary, a deliberate failure and a recovery. Write the expected state before each operation.

4. transport table: model, boundary and recovery

Create a small transport table using numeric alignment, semantic properties and fallback behaviour. 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.

5. bilingual article: model, boundary and recovery

Create a small bilingual article using script shaping, language metadata and font coverage. Combine “Unsupported tags are ignored by the font” with one later chapter. Include an ordinary case, a boundary, a deliberate failure and a recovery. Write the expected state before each operation.

6. coding handout: model, boundary and recovery

Create a small coding handout using ligatures, source-code clarity and a local opt-out. Combine “Low-level settings resolve after font-variant” with one later chapter. Include an ordinary case, a boundary, a deliberate failure and a recovery. Write the expected state before each operation.

7. history display: model, boundary and recovery

Create a small history display using historical forms, quotations and accessible reading. Combine “Accessibility and meaning stay in the content layer” with one later chapter. Include an ordinary case, a boundary, a deliberate failure and a recovery. Write the expected state before each operation.

8. design test page: model, boundary and recovery

Create a small design test page using tag values, computed styles and screenshot comparisons. Combine “The initial value normal makes no request” with one later chapter. Include an ordinary case, a boundary, a deliberate failure and a recovery. Write the expected state before each operation.

Frequently asked questions

How long should a practice session be?

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

Should every option or function be memorised?

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

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

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

Is the shortest solution the best?

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

When should official documentation be used?

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

How can a parent help without technical expertise?

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

How do we test transfer?

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

What should be saved after practice?

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

Can these exercises replace backups?

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

What counts as mastery?

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

Official and supporting references

• Primary technical documentation for CSS font-feature-settings
• eduKatePunggol: How Studying Works

Return to contents