Commit 06bc3e10 authored by Julie Blanc's avatar Julie Blanc

replace position:absolute by addition of padding

parent ae43dea8
......@@ -15,7 +15,7 @@
<!-- styles -->
<link rel="stylesheet" href="css/interface.css" />
<link rel="stylesheet" href="css/baseline.css" />
<link rel="stylesheet" href="css/style.css" />
<!-- paged.js script -->
<script async src="http://localhost:9090/dist/paged.polyfill.js"></script>
......
......@@ -23,9 +23,9 @@ function snapBaseline(config){
/* baseline position + vertical Rythm of paragraphs */
const paragraph = 'p';
let baselinePosition = verticalRythm(paragraph, '', '', baselineDoc, strict);
let baselinePosition = verticalRythm(paragraph, '', '', baselineDoc, strict, 0);
let baselinePositionCSS = ':root{ --pagedjs-baseline-position : -' + baselinePosition + 'px; }'
addcss(baselinePositionCSS);
addcss(baselinePositionCSS);
/* elements to which the script applies */
["p", "h1", "h2", "h3", "h4", "h5", "h6", "ul", "li", "blockquote", "figcaption", "adress", "dt", "dd", "hr", "pre"].forEach(element => snapTextElement(element, baselinePosition, baselineDoc, strict));
......@@ -44,30 +44,24 @@ function snapTextElement(elementSelector, baselinePosition, baselineDoc, strict)
let elem = document.querySelectorAll(elementSelector);
let configStrict = strict;
// do calculation on each tag element
let gapBaselineElem = verticalRythm(elementSelector, '', '', baselineDoc, configStrict);
let newgapBaselineElem = gapBaselineElem - baselinePosition;
verticalRythm(elementSelector, '', '', baselineDoc, configStrict, baselinePosition);
for(let i = 0; i < elem.length; i++) {
elem[i].style.position = "relative";
elem[i].style.top = newgapBaselineElem + "px";
}
// do calculation for specific class or id
for (let i = 0; i < elem.length; i++) {
let allClasses = elem[i].classList;
let elemId = elem[i].id;
if(allClasses.length != 0 || elemId != ""){
let gapBaselineThisElem = verticalRythm(elementSelector, allClasses, elemId, baselineDoc, configStrict);
let newgapBaselineThisElem = gapBaselineThisElem - baselinePosition;
elem[i].style.top = newgapBaselineThisElem + "px";
verticalRythm(elementSelector, allClasses, elemId, baselineDoc, configStrict, baselinePosition);
}
}
}
......@@ -113,7 +107,7 @@ ________________________________________________________________________________
___________________________________________________________________________________________________
*/
function verticalRythm(elem, elemClass, elemId, base, strict){
function verticalRythm(elem, elemClass, elemId, base, strict, baselinePosition){
let baseline = base;
let configStrict = strict;
......@@ -162,6 +156,10 @@ function verticalRythm(elem, elemClass, elemId, base, strict){
newMarginTop = ceilMarginTop*baseline;
newMarginBottom = ceilMarginBottom*baseline;
/* distance between baseline font and baseline document */
let gapBaseline = ((computedLineHeight + baseline*ceilLineHeight)/2) - (metrics.top * -1 * styles.fontSize);
let gapBaselineElem = gapBaseline - baselinePosition;
/* New paggings */
if(configStrict){
......@@ -169,22 +167,22 @@ function verticalRythm(elem, elemClass, elemId, base, strict){
let sumPaddingBottom = styles.paddingBottom + styles.borderBottom;
let ceilSumTop = Math.ceil(sumPaddingTop/baseline);
let ceilSumBottom = Math.ceil(sumPaddingBottom/baseline);
newPaddingTop = ceilSumTop*baseline - styles.borderTop;
newPaddingTop = ceilSumTop*baseline - styles.borderTop + gapBaselineElem;
newPaddingBottom = ceilSumBottom*baseline - styles.borderBottom;
}else{
let sumPadding = styles.paddingTop + styles.borderTop + styles.paddingBottom + styles.borderBottom;
let moduloPadding = sumPadding % baseline;
if(moduloPadding == 0){
newPaddingTop = styles.paddingTop;
newPaddingTop = styles.paddingTop + gapBaselineElem;
newPaddingBottom = styles.paddingBottom;
}else{
if (moduloPadding%2 == 0){
newPaddingTop = styles.paddingTop + (baseline - moduloPadding)/2;
newPaddingTop = styles.paddingTop + (baseline - moduloPadding)/2 + gapBaselineElem;
newPaddingBottom = styles.paddingBottom + (baseline - moduloPadding)/2;
}else{
moduloPadding = moduloPadding - 1;
newPaddingTop = styles.paddingTop + (baseline - moduloPadding)/2;
newPaddingTop = styles.paddingTop + (baseline - moduloPadding)/2 + gapBaselineElem;
newPaddingBottom = styles.paddingBottom + (baseline - moduloPadding)/2 - 1;
}
}
......@@ -227,9 +225,7 @@ function verticalRythm(elem, elemClass, elemId, base, strict){
elementSpecificId.style.marginBottom = newMarginBottom + "px";
}
/* distance between baseline font and baseline document */
let gapBaseline = ((computedLineHeight + baseline*ceilLineHeight)/2) - (metrics.top * -1 * styles.fontSize);
/* return for the baseline position */
return gapBaseline;
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment