docs: improve sectionization example

vivliostyle · Mar 10, 2024 · d2d5290 · d2d5290
1 parent c9905c3
commit d2d5290
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 10 deletions.
diff --git a/docs/ja/vfm.md b/docs/ja/vfm.md
@@ -586,7 +586,15 @@ ruby rt {
 
 ## Level 2
 
-> # Not Sectionize
+### Level 3
+
+##
+
+Level 2 was ended by `##`.
+
+## Not Sectionize {.just-a-heading} ##
+
+> # Not Sectionize in Blockquote
 ```
 
 **HTML**
@@ -605,10 +613,15 @@ ruby rt {
   <h1 id="level-1">Level 1</h1>
   <section class="level2" aria-labelledby="level-2">
     <h2 id="level-2">Level 2</h2>
-    <blockquote>
-      <h1 id="not-sectionize">Not Sectionize</h1>
-    </blockquote>
+    <section class="level3" aria-labelledby="level-3">
+      <h3 id="level-3">Level 3</h3>
+    </section>
   </section>
+  <p>Level 2 was ended by <code>##</code>.</p>
+  <h2 class="just-a-heading" id="not-sectionize">Not Sectionize</h2>
+  <blockquote>
+    <h1 id="not-sectionize-in-blockquote">Not Sectionize in Blockquote</h1>
+  </blockquote>
 </section>
 ```
 
@@ -617,7 +630,11 @@ ruby rt {
 ```css
 body > section {
 }
-body > section > h1:first-child {
+
+section[aria-labelledby="intro"] {
+}
+
+section:has(> h1.title) {
 }
 
 .level1 {

diff --git a/docs/vfm.md b/docs/vfm.md
@@ -586,7 +586,15 @@ Make the heading a hierarchical section.
 
 ## Level 2
 
-> # Not Sectionize
+### Level 3
+
+##
+
+Level 2 was ended by `##`.
+
+## Not Sectionize {.just-a-heading} ##
+
+> # Not Sectionize in Blockquote
 ```
 
 **HTML**
@@ -605,10 +613,15 @@ Make the heading a hierarchical section.
   <h1 id="level-1">Level 1</h1>
   <section class="level2" aria-labelledby="level-2">
     <h2 id="level-2">Level 2</h2>
-    <blockquote>
-      <h1 id="not-sectionize">Not Sectionize</h1>
-    </blockquote>
+    <section class="level3" aria-labelledby="level-3">
+      <h3 id="level-3">Level 3</h3>
+    </section>
   </section>
+  <p>Level 2 was ended by <code>##</code>.</p>
+  <h2 class="just-a-heading" id="not-sectionize">Not Sectionize</h2>
+  <blockquote>
+    <h1 id="not-sectionize-in-blockquote">Not Sectionize in Blockquote</h1>
+  </blockquote>
 </section>
 ```
 
@@ -617,7 +630,11 @@ Make the heading a hierarchical section.
 ```css
 body > section {
 }
-body > section > h1:first-child {
+
+section[aria-labelledby="intro"] {
+}
+
+section:has(> h1.title) {
 }
 
 .level1 {