Commit 6949926e authored by Julie Blanc's avatar Julie Blanc

add controls of the baseline: visibility, strict/permissive + set the baseline in js

parent 3e452cf4
......@@ -6,8 +6,7 @@
--main-font-family: 'ibm-plex-sans';
--main-font-weight: 400;
--baseline: 40px;
--baseline-position: 0px;
/* --baseline: 40px; */
font-size: var(--main-font-size);
font-family: var(--main-font-family);
......@@ -39,18 +38,22 @@ span{ background-color: rgba(255, 80, 80, 0.5); }
}
} */
body{
/* body{
--baseline-position: 0px;
background: linear-gradient( transparent 0%, transparent calc(var(--baseline) - 1px), #999 calc(var(--baseline) - 1px), #999 var(--baseline)), 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: 20px;
padding-top: 5px;*/
border-top: 10px solid black;
margin-top: 10px;
margin-bottom: 50px;
padding-top: 16px;
/* padding-bottom: 20px; */
}
h1{
......@@ -58,7 +61,7 @@ h1{
font-weight: 800;
font-size: 60px;
line-height: 80px;
margin-bottom: 23px;
/* margin-bottom: 23px; */
}
h2{
......@@ -66,11 +69,16 @@ h2{
}
li{
padding-bottom: 24px;
/* padding-bottom: 24px; */
}
blockquote{
font-family: 'gap-sans';
padding: 10px 50px;
/* padding: 10px 50px; */
}
.intro{
font-size: 1.5rem;
font-weight: 600;
line-height: 60px;
}
......@@ -32,7 +32,7 @@
<body>
<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>
<p class="intro">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 line 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>
......
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);
snapBaseline(40, 'strict', 'visible');
}
function snapBaseline(baseline, snap, visibility){
function snapBaseline(){
const baselineDoc = baseline;
const configSnap = snap;
// 'strict' = all the text elements snap strictly on the baseline (by default)
// 'permissive' = If the element have padding, it's not snap on the baseline
const visibilityBaseline = visibility;
// 'visible' (by defaut) or 'hidden'
const baselineDoc = parseInt(getComputedStyle(document.documentElement).getPropertyValue('--baseline').replace("px", ""));
/* set the baseline*/
let setBaseline = ':root{ --baseline: ' + baselineDoc + 'px}'
addcss(setBaseline)
/* Visibility of the baseline */
let showBaseline = `body{
--baseline-position: 0px;
background: linear-gradient( transparent 0%, transparent calc(var(--baseline) - 1px), #999 calc(var(--baseline) - 1px), #999 var(--baseline)), transparent;
background-size: 100% var(--baseline);
background-repeat: repeat-y;
background-position-y: var(--baseline-position);
}`
if(visibility == 'hidden'){ }else{ addcss(showBaseline); }
/* 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");
verticalRythm(paragraph, baselineDoc, configSnap);
let baselinePosition = verticalRythm(paragraph, baselineDoc, configSnap);
document.getElementsByTagName('body')[0].style.setProperty('--baseline-position', "-" + baselinePosition + "px");
/* baseline position + vertical Rythm of text elements */
["h1", "h2", "h3", "h4", "h5", "h6", "li", "blockquote", "figcaption", "adress", "dt", "dd", "hr", "pre"].forEach(element => snapTextElement(element, baselinePosition, baselineDoc));
/* elements to which the script applies */
["h1", "h2", "h3", "h4", "h5", "h6", "li", "blockquote", "figcaption", "adress", "dt", "dd", "hr", "pre"].forEach(element => snapTextElement(element, baselinePosition, baselineDoc, configSnap));
}
function snapTextElement(elementSelector, baselinePosition, baselineDoc) {
verticalRythm(elementSelector, baselineDoc);
let gapBaselineElem = verticalRythm(elementSelector, baselineDoc);
/* snapTextElement() ________________________________________________________________________________
___________________________________________________________________________________________________
___________________________________________________________________________________________________
*/
function snapTextElement(elementSelector, baselinePosition, baselineDoc, snap) {
const configSnap = snap;
verticalRythm(elementSelector, baselineDoc, configSnap);
let gapBaselineElem = verticalRythm(elementSelector, baselineDoc, configSnap);
let newgapBaselineElem = gapBaselineElem - baselinePosition;
let elem = document.querySelectorAll(elementSelector);
......@@ -33,6 +60,13 @@ function snapTextElement(elementSelector, baselinePosition, baselineDoc) {
}
}
/* getStyle() _____________________________________________________________________________________
___________________________________________________________________________________________________
___________________________________________________________________________________________________
*/
function getStyle(elem) {
let fontFamily = window.getComputedStyle(elem).fontFamily;
......@@ -46,16 +80,6 @@ function getStyle(elem) {
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{
sumBottom = (marginBottom - marginTop) + paddingBottom + borderBottom;
}
let styles = {
fontFamily: fontFamily,
fontSize: fontSize,
......@@ -66,9 +90,7 @@ function getStyle(elem) {
paddingTop: paddingTop,
paddingBottom: paddingBottom,
borderBottom: borderBottom,
borderTop: borderTop,
sumTop: sumTop,
sumBottom: sumBottom
borderTop: borderTop
};
return styles;
......@@ -76,9 +98,14 @@ function getStyle(elem) {
/* vertivalRythm() ________________________________________________________________________________
___________________________________________________________________________________________________
___________________________________________________________________________________________________
*/
function verticalRythm(elem, base){
function verticalRythm(elem, base, snap){
let baseline = base;
const configSnap = snap;
/* render element */
let element = document.createElement(elem);
......@@ -108,38 +135,56 @@ function verticalRythm(elem, base){
/* delete rendered element */
element.parentNode.removeChild(element);
/* 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);
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;
}
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;
let newPaddingTop;
let newPaddingBottom;
let newMarginTop;
let newMarginBottom;
/* New margins */
let ceilMarginTop = Math.ceil(styles.marginTop/baseline);
let ceilMarginBottom = Math.ceil(styles.marginBottom/baseline);
newMarginTop = ceilMarginTop*baseline;
newMarginBottom = ceilMarginBottom*baseline;
/* New paggings */
if(configSnap == 'permissive'){
let sumPadding = styles.paddingTop + styles.borderTop + styles.paddingBottom + styles.borderBottom;
let moduloPadding = sumPadding % baseline;
if(moduloPadding == 0){
newPaddingTop = styles.paddingTop;
newPaddingBottom = styles.paddingBottom;
}else{
if (moduloPadding%2 == 0){
newPaddingTop = styles.paddingTop + (baseline - moduloPadding)/2;
newPaddingBottom = styles.paddingBottom + (baseline - moduloPadding)/2;
}else{
moduloPadding = moduloPadding - 1;
newPaddingTop = styles.paddingTop + (baseline - moduloPadding)/2;
newPaddingBottom = styles.paddingBottom + (baseline - moduloPadding)/2 - 1;
}
}
}else{
newMarginBottom = (baseline - moduloBottom) + styles.marginBottom;
let sumPaddingTop = styles.paddingTop + styles.borderTop;
let sumPaddingBottom = styles.paddingBottom + styles.borderBottom;
let ceilSumTop = Math.ceil(sumPaddingTop/baseline);
let ceilSumBottom = Math.ceil(sumPaddingBottom/baseline);
newPaddingTop = ceilSumTop*baseline - styles.borderTop;
newPaddingBottom = ceilSumBottom*baseline - styles.borderBottom;
}
/* 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";
}
......@@ -147,4 +192,24 @@ function verticalRythm(elem, base){
var gapBaseline = ((computedLineHeight + baseline*ceilLineHeight)/2) - (metrics.top * -1 * styles.fontSize);
return gapBaseline;
}
/* addcss() ________________________________________________________________________________
___________________________________________________________________________________________________
___________________________________________________________________________________________________
*/
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));
}
head.appendChild(s);
}
\ 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