Commit c15d53fb authored by Julie Blanc's avatar Julie Blanc
Browse files

snap all text elements on baseline (array + position relative)

parent 86a47e43
.DS_store
baseline/fonts
\ No newline at end of file
......@@ -7,16 +7,13 @@
--main-font-weight: 400;
--baseline: 30px;
--baseline-position: 0px;
/* dont't touch */
/* --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;
}
......@@ -32,34 +29,48 @@ span{ background-color: rgba(255, 80, 80, 0.5); }
/* adding a visual helper for the baseline grid */
/* for paged js */
/* @media screen {
.pagedjs_page {
background: linear-gradient( transparent 0%, transparent 96%, #999 96%, #999 100%), transparent;
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;
}
} */
body{
background: linear-gradient( transparent 0%, transparent 96%, #999 96%, #999 100%), transparent;
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;
/* margin-top: 6px;
padding-top: 5px;
border-top: 3px solid black;
margin-bottom: 30px;
border-top: 3px solid black; */
margin-bottom: 20px;
}
h1{
font-family: 'ibm-plex-sans';
font-weight: 800;
font-size: 30px;
font-size: 60px;
line-height: 80px;
margin-bottom: 60px;
margin-bottom: 23px;
}
h2{
font-family: 'gap-sans';
}
li{
padding-bottom: 24px;
}
blockquote{
font-family: 'gap-sans';
padding: 10px 50px;
}
......@@ -33,16 +33,28 @@
<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>
<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>
<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>
<ul>
<li>pomme</li>
<li>poire</li>
<li>abricot</li>
</ul>
<blockquote>
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.
</blockquote>
<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>
<h2>Proin vel turpis ut nunc tempor</h2>
<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>
<hr>
<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>
<pre>Hello
world
</pre>
<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>
......
......@@ -17,21 +17,21 @@ function snapBaseline(){
let baselinePosition = verticalRythm(paragraph, baselineDoc);
document.documentElement.style.setProperty('--baseline-position', "-" + baselinePosition + "px");
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 */
/* 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));
}
function snapTextElement(elementSelector, baselinePosition, baselineDoc) {
verticalRythm(elementSelector, baselineDoc);
let gapBaselineElem = verticalRythm(elementSelector, baselineDoc);
let newgapBaselineElem = gapBaselineElem - baselinePosition;
let elem = document.querySelectorAll(elementSelector);
for(var i = 0; i < elem.length; i++) {
elem[i].style.position = "relative";
elem[i].style.top = newgapBaselineElem + "px";
}
}
function getStyle(elem) {
......@@ -71,7 +71,6 @@ function getStyle(elem) {
sumBottom: sumBottom
};
console.log(styles);
return styles;
}
......@@ -136,7 +135,7 @@ function verticalRythm(elem, base){
newMarginBottom = (baseline - moduloBottom) + styles.marginBottom;
}
let elementTag = document.getElementsByTagName(elem);
let elementTag = document.querySelectorAll(elem);
for(var i = 0; i < elementTag.length; i++) {
elementTag[i].style.lineHeight = newLineHeight + "px";
......
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