Merge pull request #132 from vivliostyle/fix/section-issues

feat: Fix section issues
vivliostyle · Sep 10, 2024 · 40c9ce7 · 40c9ce7
2 parents 5b9a7e6 + 5154d68
commit 40c9ce7
Show file tree

Hide file tree

Showing 8 changed files with 28 additions and 19 deletions.
diff --git a/.changeset/curvy-windows-push.md b/.changeset/curvy-windows-push.md
@@ -0,0 +1,5 @@
+---
+"@vivliostyle/theme-base": patch
+---
+
+Update the CSS selector that specifies particular languages
diff --git a/.changeset/tender-lemons-worry.md b/.changeset/tender-lemons-worry.md
@@ -0,0 +1,8 @@
+---
+"@vivliostyle/theme-base": major
+---
+
+Update the displaying content of ToC markers
+
+- The default value of `--vs-toc--marker-content` has been changed
+- Added `--vs-toc--marker-padding-inline-end` to replace `--vs-toc--anchor-text-indent`
diff --git a/.changeset/wicked-guests-wash.md b/.changeset/wicked-guests-wash.md
@@ -0,0 +1,5 @@
+---
+"@vivliostyle/theme-base": major
+---
+
+The default value of `--vs-section--call-content` has been changed in the Japanese language environment
diff --git a/packages/@vivliostyle/theme-academic/theme.css b/packages/@vivliostyle/theme-academic/theme.css
@@ -73,7 +73,7 @@
     counter(vs-counter-sec-h5) '.' counter(vs-counter-sec-h6);
 }
 
-:lang(ja) {
+:root:lang(ja) {
   --vs-crossref--marker-fig-content: '図 '
     counter(vs-counter-fig, var(--vs-crossref--counter-style));
   --vs-crossref--marker-tbl-content: '表 '

diff --git a/packages/@vivliostyle/theme-base/css/partial/crossref.css b/packages/@vivliostyle/theme-base/css/partial/crossref.css
@@ -34,7 +34,7 @@
   --vs-crossref--call-cite-content-on-screen: '[???]';
 }
 
-:lang(ja) {
+:root:lang(ja) {
   --vs-crossref--call-fig-content: '図'
     target-counter(
       attr(href),

diff --git a/packages/@vivliostyle/theme-base/css/partial/section.css b/packages/@vivliostyle/theme-base/css/partial/section.css
@@ -21,16 +21,6 @@
   --vs-section--marker-margin-inline: 1ch;
 }
 
-:lang(ja) {
-  --vs-section--call-content: target-counters(
-      attr(href),
-      vs-counter-sections,
-      var(--vs-section--counter-delimiter),
-      var(--vs-section--counter-style)
-    )
-    '章';
-}
-
 a[data-ref='sec'] {
   text-decoration: var(--vs-section--anchor-text-decoration);
   margin-inline: var(--vs-section--call-margin-inline);

diff --git a/packages/@vivliostyle/theme-base/css/partial/toc.css b/packages/@vivliostyle/theme-base/css/partial/toc.css
@@ -2,10 +2,10 @@
   --vs-toc--anchor-align-items: baseline;
   --vs-toc--anchor-text-decoration: none;
   --vs-toc--anchor-text-decoration-on-hover: underline;
-  --vs-toc--anchor-text-indent: 1ch;
-  --vs-toc--marker-content: counter(vs-counter-toc) ' ';
+  --vs-toc--marker-content: counters(vs-counter-toc, '.') ' ';
   --vs-toc--marker-display: none;
-  --vs-toc--marker-text-align: start;
+  --vs-toc--marker-padding-inline-end: 1ch;
+  --vs-toc--marker-text-align: end;
   --vs-toc--ol-indent-size: 2rem;
   --vs-toc--page-counter-display: inline;
   --vs-toc--page-counter-style: decimal;
@@ -33,15 +33,16 @@
   content: var(--vs-toc--marker-content);
   display: var(--vs-toc--marker-display);
   position: absolute;
-  inset-inline-start: calc(var(--vs-toc--ol-indent-size) * -1);
   text-align: var(--vs-toc--marker-text-align);
-  width: var(--vs-toc--ol-indent-size);
+  padding-inline-end: var(--vs-toc--marker-padding-inline-end);
+  /* Up to 6 indentations can be displayed (h1-h6) */
+  inline-size: calc(var(--vs-toc--ol-indent-size) * 6);
+  inset-inline-start: calc(var(--vs-toc--ol-indent-size) * -6);
 }
 
 :is(#toc, [role='doc-toc']) li > a {
   align-items: var(--vs-toc--anchor-align-items);
   text-decoration: var(--vs-toc--anchor-text-decoration);
-  text-indent: var(--vs-toc--anchor-text-indent);
 }
 
 :is(#toc, [role='doc-toc']) li > a:hover {

diff --git a/packages/@vivliostyle/theme-bunko/theme.css b/packages/@vivliostyle/theme-bunko/theme.css
@@ -61,7 +61,7 @@
   --vs-footnote--area-before-margin-inline: 0 70%;
 }
 
-:lang(ja) {
+:root:lang(ja) {
   --vs-crossref--counter-style: cjk-ideographic;
   --vs-crossref--call-fig-content: '図'
     target-counter(attr(href), fig, var(--vs-crossref--counter-style));