Commit 9518f5b0 authored by Julie Blanc's avatar Julie Blanc

initial

parents
:root{
/* main font (specified all in px) */
--main-font-size: 20px;
--main-line-height: 20px;
--main-font-family: 'ibm-plex-sans';
--main-font-weight: 400;
/* 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);
}
*{
margin: 0;
padding: 0;
}
span{ background-color: rgba(255, 80, 80, 0.5); }
/* adding a visual helper for the baseline grid */
@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
/* To define how the book look on the screen: */
@media screen {
body {
background-color:whitesmoke;
}
.pagedjs_pages {
display: flex;
width: calc(var(--width) * 2);
flex: 0;
flex-wrap: wrap;
margin: 0 auto;
}
.pagedjs_page {
background-color: white;
box-shadow: 0 0 0 2px #888;
margin: 0;
flex-shrink: 0;
flex-grow: 0;
margin-top: 10mm;
}
.pagedjs_first_page {
margin-left: 50%;
}
/* show the margin-box */
.pagedjs_margin-content
{
box-shadow: 0 0 0 1px inset #cc99ff;
}
/* uncomment for recto/verso book.
--------------------------------------------------- */
/* .pagedjs_pages {
flex-direction: column;
width: 100%;
}
.pagedjs_first_page {
margin-left: 0;
}
.pagedjs_page {
margin: 0 auto;
margin-top: 10mm;
} */
#pagedjs_interface_header{
position: fixed;
background-color: #888;
width: 100vw;
height: 30px;
top: 0;
left: 0;
}
}
\ No newline at end of file
@page{
size: A5;
margin: 0mm 20mm;
/* margin: calc(var(--baseline)*2) 20mm; */
}
<!DOCTYPE html PUBLIC>
<html lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>
Snap Baseline
</title>
<link rel="stylesheet" href="fonts/ibm-plex-sans/stylesheet.css" />
<link rel="stylesheet" href="fonts/gap-sans/stylesheet.css" />
<link rel="stylesheet" href="fonts/muli/stylesheet.css" />
<link rel="stylesheet" href="css/interface.css" />
<link rel="stylesheet" href="css/baseline.css" />
<link rel="stylesheet" href="css/layout.css" />
<script src="js/FontMetrics.js" type="text/javascript"></script>
<script src="js/baseline.js" type="text/javascript"></script>
</head>
<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>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>
<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>
<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>
<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>
</body>
(function webpackUniversalModuleDefinition(root, factory) {
if(typeof exports === 'object' && typeof module === 'object')
module.exports = factory();
else if(typeof define === 'function' && define.amd)
define("FontMetrics", [], factory);
else if(typeof exports === 'object')
exports["FontMetrics"] = factory();
else
root["FontMetrics"] = factory();
})(this, function() {
return /******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId])
/******/ return installedModules[moduleId].exports;
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ exports: {},
/******/ id: moduleId,
/******/ loaded: false
/******/ };
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/ // Flag the module as loaded
/******/ module.loaded = true;
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "/output/";
/******/ // Load entry module and return exports
/******/ return __webpack_require__(0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ function(module, exports) {
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
// ——————————————————————————————————————————————————
// Variables
// ——————————————————————————————————————————————————
var initialized = false;
var padding = void 0;
var context = void 0;
var canvas = void 0;
// ——————————————————————————————————————————————————
// Settings
// ——————————————————————————————————————————————————
var settings = {
chars: {
capHeight: 'S',
baseline: 'n',
xHeight: 'x',
descent: 'p',
ascent: 'h',
tittle: 'i'
}
};
// ——————————————————————————————————————————————————
// Methods
// ——————————————————————————————————————————————————
var initialize = function initialize() {
canvas = document.createElement('canvas');
context = canvas.getContext('2d');
initialized = true;
};
var setFont = function setFont(fontFamily, fontSize, fontWeight) {
if (!initialized) initialize();
padding = fontSize * 0.5;
canvas.width = fontSize * 2;
canvas.height = fontSize * 2 + padding;
context.font = fontWeight + ' ' + fontSize + 'px ' + fontFamily;
context.textBaseline = 'top';
context.textAlign = 'center';
};
var setAlignment = function setAlignment() {
var baseline = arguments.length <= 0 || arguments[0] === undefined ? 'top' : arguments[0];
var ty = baseline === 'bottom' ? canvas.height : 0;
context.setTransform(1, 0, 0, 1, 0, ty);
context.textBaseline = baseline;
};
var updateText = function updateText(text) {
context.clearRect(0, 0, canvas.width, canvas.height);
context.fillText(text, canvas.width / 2, padding, canvas.width);
};
var computeLineHeight = function computeLineHeight() {
var letter = 'A';
setAlignment('bottom');
var gutter = canvas.height - measureBottom(letter);
setAlignment('top');
return measureBottom(letter) + gutter;
};
var getPixels = function getPixels(text) {
updateText(text);
return context.getImageData(0, 0, canvas.width, canvas.height).data;
};
var getFirstIndex = function getFirstIndex(pixels) {
for (var i = 3, n = pixels.length; i < n; i += 4) {
if (pixels[i] > 0) return (i - 3) / 4;
}return pixels.length;
};
var getLastIndex = function getLastIndex(pixels) {
for (var i = pixels.length - 1; i >= 3; i -= 4) {
if (pixels[i] > 0) return i / 4;
}return 0;
};
var normalize = function normalize(metrics, fontSize, origin) {
var result = {};
var offset = metrics[origin];
for (var key in metrics) {
result[key] = (metrics[key] - offset) / fontSize;
}
return result;
};
var measureTop = function measureTop(text) {
return Math.round(getFirstIndex(getPixels(text)) / canvas.width) - padding;
};
var measureBottom = function measureBottom(text) {
return Math.round(getLastIndex(getPixels(text)) / canvas.width) - padding;
};
var getMetrics = function getMetrics() {
var chars = arguments.length <= 0 || arguments[0] === undefined ? settings.chars : arguments[0];
return {
capHeight: measureTop(chars.capHeight),
baseline: measureBottom(chars.baseline),
xHeight: measureTop(chars.xHeight),
descent: measureBottom(chars.descent),
bottom: computeLineHeight(),
ascent: measureTop(chars.ascent),
tittle: measureTop(chars.tittle),
top: 0
};
};
// ——————————————————————————————————————————————————
// FontMetrics
// ——————————————————————————————————————————————————
var FontMetrics = function FontMetrics() {
var _ref = arguments.length <= 0 || arguments[0] === undefined ? {} : arguments[0];
var _ref$fontFamily = _ref.fontFamily;
var fontFamily = _ref$fontFamily === undefined ? 'Times' : _ref$fontFamily;
var _ref$fontWeight = _ref.fontWeight;
var fontWeight = _ref$fontWeight === undefined ? 'normal' : _ref$fontWeight;
var _ref$fontSize = _ref.fontSize;
var fontSize = _ref$fontSize === undefined ? 200 : _ref$fontSize;
var _ref$origin = _ref.origin;
var origin = _ref$origin === undefined ? 'baseline' : _ref$origin;
return setFont(fontFamily, fontSize, fontWeight), _extends({}, normalize(getMetrics(), fontSize, origin), {
fontFamily: fontFamily,
fontWeight: fontWeight,
fontSize: fontSize
});
};
FontMetrics.settings = settings;
// ——————————————————————————————————————————————————
// Exports
// ——————————————————————————————————————————————————
exports.default = FontMetrics;
module.exports = exports['default'];
/***/ }
/******/ ])
});
;
\ No newline at end of file
window.onload = function () {
snapBaseline();
/* render pagedjs after a first render in the browser (need to calculete the computed line-height and font-metrics */
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;
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(" ", "");
const metricsMain = FontMetrics({
fontFamily: mainFontFamily,
fontWeight: mainFontWeight,
fontSize: mainFontSize,
origin: '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);
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";
}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";
}
let addGapBaseline = ".pagedjs_page_content{ padding-top: " + gapBaseline + "; }"
addcss(addGapBaseline);
}
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