From 6a6ee9fc124ffcac86de4f745abf98b55d0b5e15 Mon Sep 17 00:00:00 2001 From: Trevor Buckner Date: Fri, 21 Oct 2022 09:27:55 -0400 Subject: [PATCH 1/3] Tweak top margins for headers --- themes/V3/5ePHB/style.less | 52 ++++++++++++++++++-------------------- themes/V3/Blank/style.less | 7 +++-- 2 files changed, 28 insertions(+), 31 deletions(-) diff --git a/themes/V3/5ePHB/style.less b/themes/V3/5ePHB/style.less index 6c45c31d0..181fec3b2 100644 --- a/themes/V3/5ePHB/style.less +++ b/themes/V3/5ePHB/style.less @@ -77,9 +77,12 @@ body { text-rendering : optimizeLegibility; page-break-before : always; page-break-after : always; +} //***************************** // * BASE // *****************************/ + +:where(.page){ p{ overflow-wrap : break-word; //TODO: MAKE ALL MARGINS TOP-ONLY. USE * + * STYLE SELECTORS display : block; @@ -175,12 +178,20 @@ body { font-size : 0.575cm; border-bottom : 2px solid var(--HB_Color_HeaderUnderline);; line-height : 0.995em; //Font is misaligned. Shift up slightly + margin-top : 0.13cm; //(0.3 - 0.17) + & + * { + margin-top: 0.17cm; + } } h4{ //margin-top : -0.02cm; //Font is misaligned. Shift up slightly //margin-bottom : 0.02cm; font-size : 0.458cm; line-height : 0.971em; //Font is misaligned. Shift up slightly + margin-top : 0.21cm; //(0.3 - 0.09) + & + * { + margin-top: 0.09cm; + } } h5{ //margin-top : -0.02cm; //Font is misaligned. Shift up slightly @@ -207,15 +218,17 @@ body { font-weight : 800; th{ vertical-align : bottom; - padding : 0.14em 0.4em; + //padding : 0.14em 0.4em; + padding : 0px 1.5px; // Both of these are temporary, just to force + //height : 16px; // PDF to render at same height until Chrome 108 } } tbody{ tr{ td{ //padding : 0.14em 0.4em; - padding : 0px 5px; // Both of these are temporary, just to force - height : 16px; // PDF to render at same height until Chrome 108 + padding : 0px 1.5px; // Both of these are temporary, just to force + //height : 16px; // PDF to render at same height until Chrome 108 } &:nth-child(odd){ background-color : var(--HB_Color_Accent); @@ -578,7 +591,7 @@ body { //***************************** // * SPELL LIST // *****************************/ -.page .spellList{ +:where(.page) .spellList{ .useSansSerif(); column-count : 2; ul+h5{ @@ -605,7 +618,7 @@ body { //***************************** // * CLASS TABLE // *****************************/ -.page .classTable{ +:where(.page) .classTable{ th[colspan]:not([rowspan]) { white-space : nowrap; } @@ -627,6 +640,9 @@ body { &.wide:first-child { margin-top: 0.12cm; } + & + * { + margin-top: 0; + } } &.decoration { position:relative; @@ -659,7 +675,7 @@ body { //***************************** // * TABLE OF CONTENTS // *****************************/ -.page { +:where(.page) { &:has(.toc):after { display: none; } @@ -733,28 +749,10 @@ body { } } -//***************************** -// * MUSTACHE DIVS/SPANS -// *****************************/ -.page { - .block { - break-inside : avoid; - display : inline-block; - .page :where(&) { - width : 100%; - } - //-webkit-transform : translateZ(0); //Prevents shadows from breaking across columns - } - .inline-block { - display : inline-block; - text-indent : initial; - } -} - //***************************** // * DEFINITION LISTS // *****************************/ -.page { +:where(.page) { dl { line-height : 1.25em; padding-left : 1em; @@ -784,7 +782,7 @@ body { //***************************** // * BLANK LINE // *****************************/ -.page { +:where(.page) { .blank { height : 1em; margin-top : 0; @@ -794,7 +792,7 @@ body { //***************************** // * WIDE // *****************************/ -.page .wide{ +:where(.page) .wide{ column-span : all; -webkit-column-span : all; -moz-column-span : all; diff --git a/themes/V3/Blank/style.less b/themes/V3/Blank/style.less index 668be712e..0a2c86321 100644 --- a/themes/V3/Blank/style.less +++ b/themes/V3/Blank/style.less @@ -78,7 +78,7 @@ body { z-index : -1; } :not(:where(.wide,.columnSplit,.blank,hr)) + :where(h1,h2,h3,h4,h5,h6,table,dl,.block) { - margin-top : 1em; //NOTE: MAKE ALL MARGINS TOP-ONLY FOR BEST RESULTS WITH COLUMN BREAKS. USE * + * STYLE SELECTORS + margin-top : 0.3cm; //NOTE: MAKE ALL MARGINS TOP-ONLY FOR BEST RESULTS WITH COLUMN BREAKS. USE * + * STYLE SELECTORS } :where(h1,h3,h3,h4,h5,h6) + * { @@ -191,6 +191,7 @@ body { -webkit-column-break-after : always; break-after : always; -moz-column-break-after : always; + margin-top : 0; } //Avoid breaking up blockquote,table{ @@ -218,9 +219,7 @@ body { .block { break-inside : avoid; display : inline-block; - .page :where(&) { - width : 100%; - } + width : 100%; } .inline-block { display : inline-block; From 047160e4ecaa968419c3319f0b17261bf9bcd3c5 Mon Sep 17 00:00:00 2001 From: Trevor Buckner Date: Mon, 24 Oct 2022 17:01:38 -0400 Subject: [PATCH 2/3] Further tweaks to table size/header spacings --- themes/V3/5ePHB/style.less | 48 +++++++++++++++++--------------------- themes/V3/Blank/style.less | 7 ++++-- 2 files changed, 26 insertions(+), 29 deletions(-) diff --git a/themes/V3/5ePHB/style.less b/themes/V3/5ePHB/style.less index 181fec3b2..b6bad7d6d 100644 --- a/themes/V3/5ePHB/style.less +++ b/themes/V3/5ePHB/style.less @@ -158,9 +158,9 @@ body { padding-bottom : 2px; margin-bottom : -20px; background-image : linear-gradient(-45deg, #322814, #998250, #322814); - background-clip : text; - -webkit-background-clip : text; - color : rgba(0, 0, 0, 0); + background-clip : text; + -webkit-background-clip : text; + color : rgba(0, 0, 0, 0); } &+p::first-line{ font-variant : small-caps; @@ -178,21 +178,25 @@ body { font-size : 0.575cm; border-bottom : 2px solid var(--HB_Color_HeaderUnderline);; line-height : 0.995em; //Font is misaligned. Shift up slightly - margin-top : 0.13cm; //(0.3 - 0.17) & + * { margin-top: 0.17cm; } } + * + h3 { + margin-top : 0.13cm; //(0.3 - 0.17) + } h4{ //margin-top : -0.02cm; //Font is misaligned. Shift up slightly //margin-bottom : 0.02cm; font-size : 0.458cm; line-height : 0.971em; //Font is misaligned. Shift up slightly - margin-top : 0.21cm; //(0.3 - 0.09) & + * { margin-top: 0.09cm; } } + * + h4 { + margin-top : 0.21cm; //(0.3 - 0.09) + } h5{ //margin-top : -0.02cm; //Font is misaligned. Shift up slightly //margin-bottom : 0.02cm; @@ -207,6 +211,9 @@ body { //***************************** // * TABLE // *****************************/ + div:has(table) { + display:block; // Inline-block divs tend to add ~5px when containing tables. Block Divs are fine (but don't work for everything else) + } table{ .useSansSerif(); width : 100%; @@ -219,16 +226,16 @@ body { th{ vertical-align : bottom; //padding : 0.14em 0.4em; - padding : 0px 1.5px; // Both of these are temporary, just to force - //height : 16px; // PDF to render at same height until Chrome 108 + padding : 0px 1.5px; // Both of these are temporary, just to force + line-height : 16px; // PDF to render at same height until Chrome 108 } } tbody{ tr{ td{ //padding : 0.14em 0.4em; - padding : 0px 1.5px; // Both of these are temporary, just to force - //height : 16px; // PDF to render at same height until Chrome 108 + padding : 0px 1.5px; // Both of these are temporary, just to force + line-height : 16px; // PDF to render at same height until Chrome 108 } &:nth-child(odd){ background-color : var(--HB_Color_Accent); @@ -779,26 +786,13 @@ body { } } -//***************************** -// * BLANK LINE -// *****************************/ -:where(.page) { - .blank { - height : 1em; - margin-top : 0; - } -} - //***************************** // * WIDE // *****************************/ :where(.page) .wide{ - column-span : all; - -webkit-column-span : all; - -moz-column-span : all; - display : block; - margin-bottom : 0.34cm; - &+* { - margin-top : 0; - } + margin-bottom : 0.3cm; +} + +:where(.page) h1 + *{ + margin-top : 0; } diff --git a/themes/V3/Blank/style.less b/themes/V3/Blank/style.less index 0a2c86321..aa5f6fcca 100644 --- a/themes/V3/Blank/style.less +++ b/themes/V3/Blank/style.less @@ -77,11 +77,11 @@ body { img{ z-index : -1; } - :not(:where(.wide,.columnSplit,.blank,hr)) + :where(h1,h2,h3,h4,h5,h6,table,dl,.block) { + :not(:where(.wide,.columnSplit,.blank,hr,h1)) + :where(h2,h3,h4,h5,h6,table,dl,.block) { margin-top : 0.3cm; //NOTE: MAKE ALL MARGINS TOP-ONLY FOR BEST RESULTS WITH COLUMN BREAKS. USE * + * STYLE SELECTORS } - :where(h1,h3,h3,h4,h5,h6) + * { + :is(h1,h3,h3,h4,h5,h6) + * { margin-top : 0; } //***************************** @@ -192,6 +192,9 @@ body { break-after : always; -moz-column-break-after : always; margin-top : 0; + & + * { + margin-top : 0; + } } //Avoid breaking up blockquote,table{ From 2d26e7cd072ea7906af6b223f36043b70fb90217 Mon Sep 17 00:00:00 2001 From: Trevor Buckner Date: Mon, 24 Oct 2022 19:29:59 -0400 Subject: [PATCH 3/3] Handle spacing at bottom of side-by-side tables --- themes/V3/5ePHB/style.less | 12 ++++++------ themes/V3/Blank/style.less | 2 +- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/themes/V3/5ePHB/style.less b/themes/V3/5ePHB/style.less index b6bad7d6d..9b85a1cee 100644 --- a/themes/V3/5ePHB/style.less +++ b/themes/V3/5ePHB/style.less @@ -183,7 +183,7 @@ body { } } * + h3 { - margin-top : 0.13cm; //(0.3 - 0.17) + margin-top : 0.155cm; //(0.325 - 0.17) } h4{ //margin-top : -0.02cm; //Font is misaligned. Shift up slightly @@ -195,7 +195,7 @@ body { } } * + h4 { - margin-top : 0.21cm; //(0.3 - 0.09) + margin-top : 0.235cm; //(0.325 - 0.09) } h5{ //margin-top : -0.02cm; //Font is misaligned. Shift up slightly @@ -211,9 +211,6 @@ body { //***************************** // * TABLE // *****************************/ - div:has(table) { - display:block; // Inline-block divs tend to add ~5px when containing tables. Block Divs are fine (but don't work for everything else) - } table{ .useSansSerif(); width : 100%; @@ -243,6 +240,9 @@ body { } } } + div table:has(~table) { // Divs with side-by-side tables add an extra line + margin-bottom: -0.325cm; // of vertical space at bottom. This works around it. + } //***************************** // * NOTE // *****************************/ @@ -790,7 +790,7 @@ body { // * WIDE // *****************************/ :where(.page) .wide{ - margin-bottom : 0.3cm; + margin-bottom : 0.325cm; } :where(.page) h1 + *{ diff --git a/themes/V3/Blank/style.less b/themes/V3/Blank/style.less index aa5f6fcca..3e834ff9f 100644 --- a/themes/V3/Blank/style.less +++ b/themes/V3/Blank/style.less @@ -78,7 +78,7 @@ body { z-index : -1; } :not(:where(.wide,.columnSplit,.blank,hr,h1)) + :where(h2,h3,h4,h5,h6,table,dl,.block) { - margin-top : 0.3cm; //NOTE: MAKE ALL MARGINS TOP-ONLY FOR BEST RESULTS WITH COLUMN BREAKS. USE * + * STYLE SELECTORS + margin-top : 0.325cm; //NOTE: MAKE ALL MARGINS TOP-ONLY FOR BEST RESULTS WITH COLUMN BREAKS. USE * + * STYLE SELECTORS } :is(h1,h3,h3,h4,h5,h6) + * {