Commit 18aa3753 authored by Julie Blanc's avatar Julie Blanc

add management of baseline for elements with class and/or id

parent 6c012989
...@@ -9,15 +9,15 @@ function snapBaseline(config){ ...@@ -9,15 +9,15 @@ function snapBaseline(config){
const elementBaseline = config.element; const elementBaseline = config.element;
/* set the baseline*/ /* set the baseline*/
let setBaseline = ':root{ --baseline: ' + baselineDoc + 'px}' let setBaseline = ':root{ --pagedjs-baseline: ' + baselineDoc + 'px}'
addcss(setBaseline) addcss(setBaseline)
/* Visibility of the baseline */ /* Visibility of the baseline */
let showBaselineCSS = elementBaseline + `{ let showBaselineCSS = elementBaseline + `{
background: linear-gradient( white 0%, white calc(var(--baseline) - 1px), #999 calc(var(--baseline) - 1px), #999 var(--baseline)), transparent; background: linear-gradient( white 0%, white calc(var(--pagedjs-baseline) - 1px), #999 calc(var(--pagedjs-baseline) - 1px), #999 var(--pagedjs-baseline)), transparent;
background-size: 100% var(--baseline); background-size: 100% var(--pagedjs-baseline);
background-repeat: repeat-y; background-repeat: repeat-y;
background-position-y: var(--baseline-position); background-position-y: var(--pagedjs-baseline-position);
}` }`
if(showBaseline) { if(showBaseline) {
...@@ -26,13 +26,13 @@ function snapBaseline(config){ ...@@ -26,13 +26,13 @@ function snapBaseline(config){
/* baseline position + vertical Rythm of paragraphs */ /* baseline position + vertical Rythm of paragraphs */
const paragraph = 'p'; const paragraph = 'p';
verticalRythm(paragraph, baselineDoc, strict); // verticalRythm(paragraph, '', '', baselineDoc, strict);
let baselinePosition = verticalRythm(paragraph, baselineDoc, strict); let baselinePosition = verticalRythm(paragraph, '', '', baselineDoc, strict);
let baselinePositionCSS = ':root{ --baseline-position : -' + baselinePosition + 'px; }' let baselinePositionCSS = ':root{ --pagedjs-baseline-position : -' + baselinePosition + 'px; }'
addcss(baselinePositionCSS); addcss(baselinePositionCSS);
/* elements to which the script applies */ /* elements to which the script applies */
["h1", "h2", "h3", "h4", "h5", "h6", "ul", "li", "blockquote", "figcaption", "adress", "dt", "dd", "hr", "pre"].forEach(element => snapTextElement(element, baselinePosition, baselineDoc, strict)); ["p", "h1", "h2", "h3", "h4", "h5", "h6", "ul", "li", "blockquote", "figcaption", "adress", "dt", "dd", "hr", "pre"].forEach(element => snapTextElement(element, baselinePosition, baselineDoc, strict));
} }
...@@ -46,17 +46,34 @@ ________________________________________________________________________________ ...@@ -46,17 +46,34 @@ ________________________________________________________________________________
function snapTextElement(elementSelector, baselinePosition, baselineDoc, strict) { function snapTextElement(elementSelector, baselinePosition, baselineDoc, strict) {
let elem = document.querySelectorAll(elementSelector);
let configStrict = strict; let configStrict = strict;
verticalRythm(elementSelector, baselineDoc, configStrict);
let gapBaselineElem = verticalRythm(elementSelector, baselineDoc, configStrict);
// do calculation on each tag element
// verticalRythm(elementSelector, '', '', baselineDoc, configStrict);
let gapBaselineElem = verticalRythm(elementSelector, '', '', baselineDoc, configStrict);
let newgapBaselineElem = gapBaselineElem - baselinePosition; let newgapBaselineElem = gapBaselineElem - baselinePosition;
let elem = document.querySelectorAll(elementSelector);
console.log(elem);
for(var i = 0; i < elem.length; i++) { for(let i = 0; i < elem.length; i++) {
elem[i].style.position = "relative"; elem[i].style.position = "relative";
elem[i].style.top = newgapBaselineElem + "px"; 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 != ""){
// verticalRythm(elementSelector, allClasses, elemId, baselineDoc, configStrict);
let gapBaselineThisElem = verticalRythm(elementSelector, allClasses, elemId, baselineDoc, configStrict);
let newgapBaselineThisElem = gapBaselineThisElem - baselinePosition;
elem[i].style.top = newgapBaselineThisElem + "px";
}
}
} }
...@@ -102,13 +119,16 @@ ________________________________________________________________________________ ...@@ -102,13 +119,16 @@ ________________________________________________________________________________
___________________________________________________________________________________________________ ___________________________________________________________________________________________________
*/ */
function verticalRythm(elem, base, strict){ function verticalRythm(elem, elemClass, elemId, base, strict){
let baseline = base; let baseline = base;
let configStrict = strict; let configStrict = strict;
// let elemClass = elemClass;
// let elemId = elemId;
/* render element */ /* render element */
let element = document.createElement(elem); let element = document.createElement(elem);
element.setAttribute("id", "font-metrics" + elem); element.setAttribute("id", elemId);
element.setAttribute("class", elemClass);
document.body.prepend(element); document.body.prepend(element);
/* get styles of the font */ /* get styles of the font */
...@@ -137,7 +157,7 @@ function verticalRythm(elem, base, strict){ ...@@ -137,7 +157,7 @@ function verticalRythm(elem, base, strict){
/* New line-height of the font (multiple of baseline)*/ /* New line-height of the font (multiple of baseline)*/
let ceilLineHeight = Math.ceil(styles.lineHeight/baseline); let ceilLineHeight = Math.ceil(styles.lineHeight/baseline);
var newLineHeight = ceilLineHeight*baseline; let newLineHeight = ceilLineHeight*baseline;
let newPaddingTop; let newPaddingTop;
let newPaddingBottom; let newPaddingBottom;
...@@ -180,19 +200,47 @@ function verticalRythm(elem, base, strict){ ...@@ -180,19 +200,47 @@ function verticalRythm(elem, base, strict){
} }
/* set new paddings and margins for all element */ /* set new paddings and margins for the element */
let elementTag = document.querySelectorAll(elem); if(elemClass == "" && elemId == ""){
// tag element without class and id
for(var i = 0; i < elementTag.length; i++) { let elementTag = document.querySelectorAll(elem);
elementTag[i].style.lineHeight = newLineHeight + "px"; for(let i = 0; i < elementTag.length; i++) {
elementTag[i].style.paddingTop = newPaddingTop + "px"; elementTag[i].style.lineHeight = newLineHeight + "px";
elementTag[i].style.paddingBottom = newPaddingBottom + "px"; elementTag[i].style.paddingTop = newPaddingTop + "px";
elementTag[i].style.marginTop = newMarginTop + "px"; elementTag[i].style.paddingBottom = newPaddingBottom + "px";
elementTag[i].style.marginBottom = newMarginBottom + "px"; elementTag[i].style.marginTop = newMarginTop + "px";
elementTag[i].style.marginBottom = newMarginBottom + "px";
}
}else if(elemId == ""){
// element with class(es)
let elementSpecificClass = document.getElementsByClassName(elemClass);
for(let i = 0; i < elementSpecificClass.length; i++) {
let elementSpecificId = elementSpecificClass[i].id;
if(elementSpecificId == "") {
elementSpecificClass[i].style.lineHeight = newLineHeight + "px";
elementSpecificClass[i].style.paddingTop = newPaddingTop + "px";
elementSpecificClass[i].style.paddingBottom = newPaddingBottom + "px";
elementSpecificClass[i].style.marginTop = newMarginTop + "px";
elementSpecificClass[i].style.marginBottom = newMarginBottom + "px";
}
}
}else{
// element with id
let elementSpecificId = document.getElementById(elemId);
elementSpecificId.style.lineHeight = newLineHeight + "px";
elementSpecificId.style.paddingTop = newPaddingTop + "px";
elementSpecificId.style.paddingBottom = newPaddingBottom + "px";
elementSpecificId.style.marginTop = newMarginTop + "px";
elementSpecificId.style.marginBottom = newMarginBottom + "px";
} }
/* distance between baseline font and baseline document */ /* distance between baseline font and baseline document */
var gapBaseline = ((computedLineHeight + baseline*ceilLineHeight)/2) - (metrics.top * -1 * styles.fontSize); let gapBaseline = ((computedLineHeight + baseline*ceilLineHeight)/2) - (metrics.top * -1 * styles.fontSize);
return gapBaseline; return gapBaseline;
} }
...@@ -206,8 +254,8 @@ ________________________________________________________________________________ ...@@ -206,8 +254,8 @@ ________________________________________________________________________________
*/ */
function addcss(css){ function addcss(css){
var head = document.getElementsByTagName('head')[0]; let head = document.getElementsByTagName('head')[0];
var s = document.createElement('style'); let s = document.createElement('style');
s.setAttribute('type', 'text/css'); s.setAttribute('type', 'text/css');
if (s.styleSheet) { // IE if (s.styleSheet) { // IE
s.styleSheet.cssText = css; s.styleSheet.cssText = css;
......
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