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){
const elementBaseline = config.element;
/* set the baseline*/
let setBaseline = ':root{ --baseline: ' + baselineDoc + 'px}'
let setBaseline = ':root{ --pagedjs-baseline: ' + baselineDoc + 'px}'
addcss(setBaseline)
/* Visibility of the baseline */
let showBaselineCSS = elementBaseline + `{
background: linear-gradient( white 0%, white calc(var(--baseline) - 1px), #999 calc(var(--baseline) - 1px), #999 var(--baseline)), transparent;
background-size: 100% var(--baseline);
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(--pagedjs-baseline);
background-repeat: repeat-y;
background-position-y: var(--baseline-position);
background-position-y: var(--pagedjs-baseline-position);
}`
if(showBaseline) {
......@@ -26,13 +26,13 @@ function snapBaseline(config){
/* baseline position + vertical Rythm of paragraphs */
const paragraph = 'p';
verticalRythm(paragraph, baselineDoc, strict);
let baselinePosition = verticalRythm(paragraph, baselineDoc, strict);
let baselinePositionCSS = ':root{ --baseline-position : -' + baselinePosition + 'px; }'
// verticalRythm(paragraph, '', '', baselineDoc, strict);
let baselinePosition = verticalRythm(paragraph, '', '', baselineDoc, strict);
let baselinePositionCSS = ':root{ --pagedjs-baseline-position : -' + baselinePosition + 'px; }'
addcss(baselinePositionCSS);
/* 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 @@ ________________________________________________________________________________
function snapTextElement(elementSelector, baselinePosition, baselineDoc, strict) {
let elem = document.querySelectorAll(elementSelector);
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 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.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 @@ ________________________________________________________________________________
___________________________________________________________________________________________________
*/
function verticalRythm(elem, base, strict){
function verticalRythm(elem, elemClass, elemId, base, strict){
let baseline = base;
let configStrict = strict;
// let elemClass = elemClass;
// let elemId = elemId;
/* render element */
let element = document.createElement(elem);
element.setAttribute("id", "font-metrics" + elem);
element.setAttribute("id", elemId);
element.setAttribute("class", elemClass);
document.body.prepend(element);
/* get styles of the font */
......@@ -137,7 +157,7 @@ function verticalRythm(elem, base, strict){
/* New line-height of the font (multiple of baseline)*/
let ceilLineHeight = Math.ceil(styles.lineHeight/baseline);
var newLineHeight = ceilLineHeight*baseline;
let newLineHeight = ceilLineHeight*baseline;
let newPaddingTop;
let newPaddingBottom;
......@@ -180,19 +200,47 @@ function verticalRythm(elem, base, strict){
}
/* set new paddings and margins for all element */
let elementTag = document.querySelectorAll(elem);
for(var i = 0; i < elementTag.length; i++) {
elementTag[i].style.lineHeight = newLineHeight + "px";
elementTag[i].style.paddingTop = newPaddingTop + "px";
elementTag[i].style.paddingBottom = newPaddingBottom + "px";
elementTag[i].style.marginTop = newMarginTop + "px";
elementTag[i].style.marginBottom = newMarginBottom + "px";
/* set new paddings and margins for the element */
if(elemClass == "" && elemId == ""){
// tag element without class and id
let elementTag = document.querySelectorAll(elem);
for(let i = 0; i < elementTag.length; i++) {
elementTag[i].style.lineHeight = newLineHeight + "px";
elementTag[i].style.paddingTop = newPaddingTop + "px";
elementTag[i].style.paddingBottom = newPaddingBottom + "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 */
var gapBaseline = ((computedLineHeight + baseline*ceilLineHeight)/2) - (metrics.top * -1 * styles.fontSize);
let gapBaseline = ((computedLineHeight + baseline*ceilLineHeight)/2) - (metrics.top * -1 * styles.fontSize);
return gapBaseline;
}
......@@ -206,8 +254,8 @@ ________________________________________________________________________________
*/
function addcss(css){
var head = document.getElementsByTagName('head')[0];
var s = document.createElement('style');
let head = document.getElementsByTagName('head')[0];
let s = document.createElement('style');
s.setAttribute('type', 'text/css');
if (s.styleSheet) { // IE
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