replace position:absolute by addition of padding

baseline/index.html

@@ -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>

baseline/js/snap-text-baseline.js

@@ -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;
 
 }