Skip to content

Commit bfed689

Browse files
hiro-gjhiro-gj
authored
Merge pull request #8 from hiro-gj/fix-toc-print-layout
目次（TOC）表示時の印刷プレビュー対応および横向き印刷崩れの修正
2 parents 8b98f5e + 73c614f commit bfed689

7 files changed

Lines changed: 143 additions & 27 deletions

File tree

‎dist/kantanUpdate.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/ktm-dev.html‎

Lines changed: 69 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -681,19 +681,77 @@
681681
print-color-adjust: exact;
682682
}
683683
#toolbar, #toolbar-toggle, #attach-section, #settings-panel {
684-
display:none !important;
684+
display: none !important;
685685
}
686+
687+
body:not(.toc-visible) #toc {
688+
display: none !important;
689+
}
690+
691+
body.toc-visible #toc {
692+
display: block !important;
693+
width: 100% !important;
694+
max-height: none !important;
695+
overflow: visible !important;
696+
position: relative !important;
697+
top: auto !important;
698+
left: auto !important;
699+
border: none !important;
700+
box-shadow: none !important;
701+
padding: 0 !important;
702+
margin: 0 0 24px 0 !important;
703+
}
704+
705+
/*
706+
* DOM上では #toc が #previewer の後にあるため、通常のブロックフローでは
707+
* 目次が本文の後に印刷される。印刷時だけ縦方向フレックスにして表示順を反転する。
708+
*/
709+
#wrapper {
710+
padding: 0 !important;
711+
margin: 0 !important;
712+
display: flex !important;
713+
flex-direction: column !important;
714+
align-items: stretch !important;
715+
width: 100% !important;
716+
}
717+
718+
body.toc-visible #toc {
719+
order: -1 !important;
720+
}
721+
722+
/*
723+
* 画面表示用の .toc-body はスクロール領域になっている。
724+
* 印刷時は目次タイトルとすべての見出しリンクを通常フローへ戻し、
725+
* 途中で切り捨てられず印刷対象となるようにする。
726+
*/
727+
body.toc-visible #toc .toc-header,
728+
body.toc-visible #toc .toc-title,
729+
body.toc-visible #toc .toc-body,
730+
body.toc-visible #toc .toc-link {
731+
display: block !important;
732+
flex: none !important;
733+
height: auto !important;
734+
max-height: none !important;
735+
overflow: visible !important;
736+
overflow-y: visible !important;
737+
}
738+
686739
#previewer {
687-
border:0 !important;
688-
margin:0 !important;
689-
padding:0 !important;
690-
width:auto !important;
691-
max-width:none !important;
692-
min-height:0 !important;
693-
display:block !important;
694-
zoom:0.9 !important;
695-
background: transparent !important;
696-
background-color: transparent !important;
740+
border: 0 !important;
741+
margin: 0 !important;
742+
padding: 0 !important;
743+
width: 100% !important;
744+
max-width: none !important;
745+
min-height: 0 !important;
746+
display: block !important;
747+
zoom: 0.9 !important;
748+
background: transparent !important;
749+
background-color: transparent !important;
750+
}
751+
body.view-mode #previewer.full-width {
752+
width: 100% !important;
753+
max-width: none !important;
754+
min-height: 0 !important;
697755
}
698756
body.dark #previewer {
699757
background: var(--bg-preview) !important;

‎dist/ktm-full.html‎

Lines changed: 1 addition & 1 deletion
Large diffs are not rendered by default.

‎dist/ktm-lite.html‎

Lines changed: 1 addition & 1 deletion
Large diffs are not rendered by default.

‎dist/ktm-std.html‎

Lines changed: 1 addition & 1 deletion
Large diffs are not rendered by default.

‎src/css/kantan.css‎

Lines changed: 69 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -672,19 +672,77 @@ body.dark #previewer {
672672
print-color-adjust: exact;
673673
}
674674
#toolbar, #toolbar-toggle, #attach-section, #settings-panel {
675-
display:none !important;
675+
display: none !important;
676676
}
677+
678+
body:not(.toc-visible) #toc {
679+
display: none !important;
680+
}
681+
682+
body.toc-visible #toc {
683+
display: block !important;
684+
width: 100% !important;
685+
max-height: none !important;
686+
overflow: visible !important;
687+
position: relative !important;
688+
top: auto !important;
689+
left: auto !important;
690+
border: none !important;
691+
box-shadow: none !important;
692+
padding: 0 !important;
693+
margin: 0 0 24px 0 !important;
694+
}
695+
696+
/*
697+
* DOM上では #toc が #previewer の後にあるため、通常のブロックフローでは
698+
* 目次が本文の後に印刷される。印刷時だけ縦方向フレックスにして表示順を反転する。
699+
*/
700+
#wrapper {
701+
padding: 0 !important;
702+
margin: 0 !important;
703+
display: flex !important;
704+
flex-direction: column !important;
705+
align-items: stretch !important;
706+
width: 100% !important;
707+
}
708+
709+
body.toc-visible #toc {
710+
order: -1 !important;
711+
}
712+
713+
/*
714+
* 画面表示用の .toc-body はスクロール領域になっている。
715+
* 印刷時は目次タイトルとすべての見出しリンクを通常フローへ戻し、
716+
* 途中で切り捨てられず印刷対象となるようにする。
717+
*/
718+
body.toc-visible #toc .toc-header,
719+
body.toc-visible #toc .toc-title,
720+
body.toc-visible #toc .toc-body,
721+
body.toc-visible #toc .toc-link {
722+
display: block !important;
723+
flex: none !important;
724+
height: auto !important;
725+
max-height: none !important;
726+
overflow: visible !important;
727+
overflow-y: visible !important;
728+
}
729+
677730
#previewer {
678-
border:0 !important;
679-
margin:0 !important;
680-
padding:0 !important;
681-
width:auto !important;
682-
max-width:none !important;
683-
min-height:0 !important;
684-
display:block !important;
685-
zoom:0.9 !important;
686-
background: transparent !important;
687-
background-color: transparent !important;
731+
border: 0 !important;
732+
margin: 0 !important;
733+
padding: 0 !important;
734+
width: 100% !important;
735+
max-width: none !important;
736+
min-height: 0 !important;
737+
display: block !important;
738+
zoom: 0.9 !important;
739+
background: transparent !important;
740+
background-color: transparent !important;
741+
}
742+
body.view-mode #previewer.full-width {
743+
width: 100% !important;
744+
max-width: none !important;
745+
min-height: 0 !important;
688746
}
689747
body.dark #previewer {
690748
background: var(--bg-preview) !important;

‎src/kantanVersion.txt‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
v1.20160412.01
1+
v2.20260720.01

0 commit comments

Comments
 (0)