Commit 86a47e43 authored by Julie Blanc's avatar Julie Blanc

new calcul for snap-baseline

parent ec0fa35d
......@@ -6,16 +6,17 @@
--main-font-family: 'ibm-plex-sans';
--main-font-weight: 400;
--baseline: 30px;
/* dont't touch */
--baseline: var(--main-line-height);
/* --baseline: var(--main-line-height); */
font-size: var(--main-font-size);
font-family: var(--main-font-family);
font-weight: var(--main-font-weight);
line-height: var(--main-line-height);
--baseline-position: 0px;
}
......@@ -31,13 +32,34 @@ span{ background-color: rgba(255, 80, 80, 0.5); }
/* adding a visual helper for the baseline grid */
@media screen {
/* @media screen {
.pagedjs_page {
background: linear-gradient( transparent 0%, transparent 96%, #999 96%, #999 100%), transparent;
background-size: 100% var(--baseline);
background-repeat: repeat-y;
}
}
\ No newline at end of file
} */
body{
background: linear-gradient( transparent 0%, transparent 96%, #999 96%, #999 100%), transparent;
background-size: 100% var(--baseline);
background-repeat: repeat-y;
background-position-y: var(--baseline-position);
}
p{
margin-top: 6px;
padding-top: 5px;
border-top: 3px solid black;
margin-bottom: 30px;
}
h1{
font-family: 'ibm-plex-sans';
font-weight: 800;
font-size: 30px;
line-height: 80px;
margin-bottom: 60px;
}
\ No newline at end of file
......@@ -33,6 +33,7 @@
<p>Lorem ipsum dolor sit <span>amet</span>, consectetur <span>Madipiscing</span> elit. Praesent dictum ipsum id lacus cursus ultricies. Phasellus commodo, ex eget egestas malesuada, lacus velit elementum eros, ac placerat justo orci non sapien. Curabitur id pulvinar turpis. Praesent consequat vitae magna id aliquet. Aenean vehicula luctus velit, eget dignissim libero aliquet a. Praesent convallis ante a neque fringilla, in tincidunt tortor auctor. Donec lacinia lectus vel est tincidunt, ut egestas nisl congue.</p>
<p>Nam ullamcorper tellus vitae euismod sagittis. Aliquam et cursus diam. Ut hendrerit consequat enim, ut porta erat. Morbi hendrerit ornare dolor eget viverra. Donec non lacinia neque, a faucibus magna. Pellentesque ornare blandit fringilla. Fusce porta congue ex quis eleifend. Integer quis nisl et diam ultrices iaculis.</p>
<h1>This is a title<br/>This is a title 2</h1>
<p>Proin vel turpis ut nunc tempor sollicitudin. Suspendisse dapibus lectus quis enim mattis eleifend. Vestibulum consequat lobortis lacus id aliquam. Aenean sit amet vehicula velit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aenean felis urna, eleifend eget orci ac, convallis venenatis arcu. Donec a fringilla est. Nunc sit amet lectus vel arcu ullamcorper interdum. Mauris at ante molestie, consequat risus sit amet, tincidunt justo.</p>
<p>Lorem ipsum dolor sit <span>amet</span>, consectetur <span>Madipiscing</span> elit. Praesent dictum ipsum id lacus cursus ultricies. Phasellus commodo, ex eget egestas malesuada, lacus velit elementum eros, ac placerat justo orci non sapien. Curabitur id pulvinar turpis. Praesent consequat vitae magna id aliquet. Aenean vehicula luctus velit, eget dignissim libero aliquet a. Praesent convallis ante a neque fringilla, in tincidunt tortor auctor. Donec lacinia lectus vel est tincidunt, ut egestas nisl congue.</p>
<p>Nam ullamcorper tellus vitae euismod sagittis. Aliquam et cursus diam. Ut hendrerit consequat enim, ut porta erat. Morbi hendrerit ornare dolor eget viverra. Donec non lacinia neque, a faucibus magna. Pellentesque ornare blandit fringilla. Fusce porta congue ex quis eleifend. Integer quis nisl et diam ultrices iaculis.</p>
......
window.onload = function () {
snapBaseline();
/* render pagedjs after a first render in the browser (need to calculate the computed line-height and font-metrics */
setTimeout(pagedjs, 100);
// setTimeout(pagedjs, 100);
}
/* add script for pagedjs */
function pagedjs(){
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "https://unpkg.com/pagedjs/dist/paged.polyfill.js";
document.getElementsByTagName("head")[0].appendChild(script);
}
function snapBaseline(){
let root = document.documentElement;
const baselineDoc = parseInt(getComputedStyle(document.documentElement).getPropertyValue('--baseline').replace("px", ""));
let mainFontSize = parseInt(getComputedStyle(root).getPropertyValue('--main-font-size').replace("px", ""));
let mainFontFamily = getComputedStyle(root).getPropertyValue('--main-font-family').replace('"', '').replace('"', '').replace(' ', '');
let mainFontWeight = getComputedStyle(root).getPropertyValue('--main-font-weight').replace(" ", "");
/* baseline position + vertical Rythm of paragraphs */
const paragraph = 'p';
verticalRythm(paragraph, baselineDoc);
let baselinePosition = verticalRythm(paragraph, baselineDoc);
document.documentElement.style.setProperty('--baseline-position', "-" + baselinePosition + "px");
const metricsMain = FontMetrics({
fontFamily: mainFontFamily,
fontWeight: mainFontWeight,
fontSize: mainFontSize,
origin: 'baseline'
})
const h1 = 'h1';
verticalRythm(h1, baselineDoc);
let gapBaselineh1 = verticalRythm(h1, baselineDoc);
/* ToDO = snap to main baseline */
const h2 = 'h2';
verticalRythm(h2, baselineDoc);
let gapBaselineh2 = verticalRythm(h2, baselineDoc);
/* ToDO = snap to main baseline */
/* rendering paragraph to calculate computed line-height of the main font */
let paragraphTestMain = document.createElement('p');
paragraphTestMain.setAttribute("id", "font-metrics-main");
document.body.prepend(paragraphTestMain);
paragraphTestMain.innerHTML = "x";
paragraphTestMain.style.backgroundColor = "yellow";
paragraphTestMain.style.lineHeight = "normal";
/* computed line-height (line-height: normal) of the main font */
computedLineHeight = paragraphTestMain.clientHeight;
/* remove paragraph */
paragraphTestMain.parentNode.removeChild(paragraphTestMain);
}
let mainLineHeight = getComputedStyle(root).getPropertyValue('--main-line-height').replace(' ', '').replace(' ', '');
console.log(mainLineHeight);
function getStyle(elem) {
if(mainLineHeight == '"normal"'){
/* set the baseline */
root.style.setProperty('--baseline', computedLineHeight + "px");
/* snap main text on the baseline */
var gapBaseline = computedLineHeight - (metricsMain.top * -1 * mainFontSize) + "px";
let fontFamily = window.getComputedStyle(elem).fontFamily;
let fontSize = parseInt(window.getComputedStyle(elem).fontSize);
let lineHeight = parseInt(window.getComputedStyle(elem).lineHeight);
let fontWeight = parseInt(window.getComputedStyle(elem).fontWeight);
let marginTop = parseInt(window.getComputedStyle(elem).marginTop);
let marginBottom = parseInt(window.getComputedStyle(elem).marginBottom);
let paddingTop = parseInt(window.getComputedStyle(elem).paddingTop);
let paddingBottom = parseInt(window.getComputedStyle(elem).paddingBottom);
let borderBottom = parseInt(window.getComputedStyle(elem).borderBottomWidth);
let borderTop = parseInt(window.getComputedStyle(elem).borderTopWidth);
let sumTop = marginTop + paddingTop + borderTop;
let sumBottom;
if(marginBottom <= 0){
sumBottom = paddingBottom + borderBottom;
}else{
/* get the line-height */
let mainLineHeightBis = parseInt(mainLineHeight.replace("px", ""));
/* snap main text on the baseline */
var gapBaseline = ((computedLineHeight + mainLineHeightBis)/2) - (metricsMain.top * -1 * mainFontSize) + "px";
sumBottom = (marginBottom - marginTop) + paddingBottom + borderBottom;
}
let styles = {
fontFamily: fontFamily,
fontSize: fontSize,
fontWeight: fontWeight,
lineHeight: lineHeight,
marginTop: marginTop,
marginBottom: marginBottom,
paddingTop: paddingTop,
paddingBottom: paddingBottom,
borderBottom: borderBottom,
borderTop: borderTop,
sumTop: sumTop,
sumBottom: sumBottom
};
console.log(styles);
return styles;
}
let addGapBaseline = ".pagedjs_page_content{ padding-top: " + gapBaseline + "; }"
addcss(addGapBaseline);
}
function verticalRythm(elem, base){
let baseline = base;
/* render element */
let element = document.createElement(elem);
element.setAttribute("id", "font-metrics" + elem);
document.body.prepend(element);
/* get styles of the font */
let styles = getStyle(element);
/* get font metrics */
const metrics = FontMetrics({
fontFamily: styles.fontFamily,
fontWeight: styles.fontWeight,
fontSize: styles.fontSize,
origin: 'baseline'
})
/* calculate computed line-height (line-height: normal) of the main font */
element.innerHTML = "x";
element.style.lineHeight = "normal";
element.style.paddingTop = "0px";
element.style.paddingBottom = "0px";
element.style.height = "auto";
computedLineHeight = element.clientHeight;
function addcss(css){
var head = document.getElementsByTagName('head')[0];
var s = document.createElement('style');
s.setAttribute('type', 'text/css');
if (s.styleSheet) { // IE
s.styleSheet.cssText = css;
} else {// the world
s.appendChild(document.createTextNode(css));
/* delete rendered element */
element.parentNode.removeChild(element);
/* new line-height of the font (multiple of baseline)*/
let ceilLineHeight = Math.ceil(styles.lineHeight/baseline);
var newLineHeight = ceilLineHeight*baseline;
/* add padding top (sumTop = multiple of baseline) */
let moduloTop = styles.sumTop % baseline;
let newPaddingTop;
if(moduloTop < 0){
newPaddingTop = 0;
}else if(moduloTop == 0){
newPaddingTop = styles.paddingTop;
}
head.appendChild(s);
else{
newPaddingTop = (baseline - moduloTop) + styles.paddingTop;
}
/* add margin bottom (sumBottom = multiple of baseline) */
let moduloBottom = styles.sumBottom % baseline;
let newMarginBottom;
if(moduloBottom < 0){
newMarginBottom = 0;
}else if(moduloBottom == 0){
newMarginBottom = styles.marginBottom;
}else{
newMarginBottom = (baseline - moduloBottom) + styles.marginBottom;
}
let elementTag = document.getElementsByTagName(elem);
for(var i = 0; i < elementTag.length; i++) {
elementTag[i].style.lineHeight = newLineHeight + "px";
elementTag[i].style.paddingTop = newPaddingTop + "px";
elementTag[i].style.marginBottom = newMarginBottom + "px";
}
/* distance between baseline font and baseline document */
var gapBaseline = ((computedLineHeight + baseline*ceilLineHeight)/2) - (metrics.top * -1 * styles.fontSize);
return gapBaseline;
}
\ No newline at end of file
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