{"pageProps":{"metadata":{"date":"\"2021-06-20 10:31:00 +08:00\"","date_modified":"\"2021-06-20 18:16:24 +08:00\"","language":"en","source":""},"title":"Implementing tiered headings with CSS","hast":{"type":"root","children":[{"type":"element","tagName":"nav","properties":{"className":"toc"},"children":[{"type":"element","tagName":"ol","properties":{"className":"toc-level toc-level-1"},"children":[]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"You may have seen certain documents with "},{"type":"element","tagName":"a","properties":{"href":"https://practicaltypography.com/hierarchical-headings.html"},"children":[{"type":"text","value":"tiered headings"}]},{"type":"text","value":".\nTo implement this with pure CSS, we'll make heavy use of "},{"type":"element","tagName":"a","properties":{"href":"https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters"},"children":[{"type":"text","value":"CSS counters"}]},{"type":"text","value":".\n"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Here is one rough implementation with SCSS.\n"}]},{"type":"element","tagName":"pre","properties":{"className":["src-block"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-scss"]},"children":[{"type":"text","value":"article {\n    // Named after the LaTeX counters after `chapter` counter.\n    counter-reset: section subsection subsubsection paragraph subparagraph;\n    --counter-spacing: 0.5rem;\n\n    // <h2> is used as a section header since <h1> is the main title\n    h2 {\n        counter-reset: subsection;\n        counter-increment: section;\n\n        &::before {\n            content: counter(section) \".\";\n            margin-right: var(--counter-spacing);\n        }\n    }\n\n    h3 {\n        counter-reset: subsubsection;\n        counter-increment: subsection;\n\n        &::before {\n            content: counter(section) \".\" counter(subsection) \".\";\n            margin-right: var(--counter-spacing);\n        }\n    }\n\n    h4 {\n        counter-reset: paragraph;\n        counter-increment: subsubsection;\n\n        &::before {\n            content: counter(section) \".\" counter(subsection) \".\" counter(subsubsection) \".\";\n            margin-right: var(--counter-spacing);\n        }\n    }\n\n    h5 {\n        counter-reset: subparagraph;\n        counter-increment: paragraph;\n\n        &::before {\n            content: counter(section) \".\" counter(subsection) \".\" counter(subsubsection) \".\" counter(paragraph) \".\";\n            margin-right: var(--counter-spacing);\n        }\n    }\n\n    h6 {\n        counter-increment: subparagraph;\n\n        &::before {\n            content: counter(section) \".\" counter(subsection) \".\" counter(subsubsection) \".\" counter(paragraph) \".\" counter(subparagraph);\n            margin-right: var(--counter-spacing);\n        }\n    }\n}\n"}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This is enough for CSS but since we're using SCSS, we can optimize it further.\nYou may notice that each level is similar with the difference being the content and their counter name.\n"}]},{"type":"element","tagName":"pre","properties":{"className":["src-block"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-scss"]},"children":[{"type":"text","value":"@use 'sass:string';\n\n@function tier-heading($counters) {\n    $str: \"\";\n    @for $level from 1 through $counters {\n        $str: $str + 'counter(h#{$level})\".\"';\n    }\n    @return string.unquote($str);\n}\n\narticle {\n    --counter-spacing: 0.5rem;\n    @for $level from 1 through 6 {\n        counter-reset: h#{$level};\n\n        h#{$level}{\n            @if $level != 6 {\n                counter-reset: h#{$level + 1};\n            }\n            counter-increment: h#{$level};\n\n            &::before {\n                content: tier-heading($level);\n                margin-right: var(--counter-spacing);\n            }\n        }\n    }\n}\n"}]}]}]},"backlinks":[]},"__N_SSG":true}