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

clean baseline folder

parent dbc9c0f6
:root{
@page{
size: A5;
margin-top: 80px;
margin-bottom: 80px;
margin-left: 20mm;
margin-right: 20mm;
}
:root{
/* main font (specified all in px) */
--main-font-size: 22px;
......@@ -25,30 +38,35 @@ span{ background-color: rgba(255, 80, 80, 0.5); }
p{
/* margin-top: 6px;
padding-top: 5px;*/
border-top: 10px solid black;
margin-top: 10px;
margin-bottom: 50px;
margin-bottom: 20px;
padding-top: 16px;
/* padding-bottom: 20px; */
}
h1{
font-family: 'ibm-plex-sans';
break-after: right;
font-family: 'gap-sans';
font-weight: 800;
font-size: 3rem;
line-height: 80px;
/* margin-bottom: 23px; */
border-top: solid 8px black;
border-bottom: solid 8px black;
padding-top: 50px;
padding-bottom: 50px;
}
h2{
font-family: 'gap-sans';
}
ul{
margin-bottom: 30px;
}
li{
padding-top: 3px;
/* padding-bottom: 24px; */
padding-top: 10px;
}
blockquote{
......@@ -61,3 +79,24 @@ blockquote{
font-weight: 600;
line-height: 60px;
} */
.intro{
font-size: 40px;
line-height: 50px;
color: green;
break-after: page;
}
.coucou{
font-size: 20px;
line-height: 60px;
font-family: 'Courier New', Courier, monospace;
color: red;
}
#monintro{
line-height: 20px;
}
\ No newline at end of file
@page{
size: A5;
margin: 0mm 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 async src="http://localhost:9090/dist/paged.polyfill.js"></script>
<script src="js/FontMetrics.js" type="text/javascript"></script>
<script src="js/baseline.js" type="text/javascript"></script>
<script>
window.PagedConfig = {
before: function() {
snapBaseline({
baseline: 40,
strict: true,
showBaseline: true,
element: '.pagedjs_page'
});
}
};
<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>
<!-- fonts -->
<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" />
<!-- styles -->
<link rel="stylesheet" href="css/interface.css" />
<link rel="stylesheet" href="css/baseline.css" />
<!-- paged.js script -->
<script async src="http://localhost:9090/dist/paged.polyfill.js"></script>
<!-- snap-text-baselin -->
<script src="js/FontMetrics.js" type="text/javascript"></script>
<script src="js/snap-text-baseline.js" type="text/javascript"></script>
<script>
window.PagedConfig = {
before: function () {
snapBaseline({
baseline: 40,
strict: true,
showBaseline: true,
element: '.pagedjs_page'
});
}
};
/* whitout paged.js
window.onload = function(){
......@@ -43,50 +50,74 @@
*/
</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 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>
<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
</script>
</head>
<body>
<h1>Test baseline</h1>
<p class="coucou intro" id="monintro">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>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.</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 class="intro"> intro Lorem ipsum dolor sit
<span>amet</span>, consectetur
<span>Madipiscing</span> elit. </p>
<ul>
<li>pomme</li>
<li>poire</li>
<li>abricot</li>
</ul>
<blockquote class="aside">
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>
<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>
<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>
</body>
\ No newline at end of file
(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
// ——————————————————————————————————————————————————
// Variables
// ——————————————————————————————————————————————————
let initialized = false
let padding
let context
let canvas
// ——————————————————————————————————————————————————
// Settings
// ——————————————————————————————————————————————————
const settings = {
chars: {
capHeight: 'S',
baseline: 'n',
xHeight: 'x',
descent: 'p',
ascent: 'h',
tittle: 'i'
}
}
// ——————————————————————————————————————————————————
// Methods
// ——————————————————————————————————————————————————
const initialize = () => {
canvas = document.createElement('canvas')
context = canvas.getContext('2d')
initialized = true
}
const 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'
}
const setAlignment = (baseline = 'top') => {
const ty = baseline === 'bottom' ? canvas.height : 0
context.setTransform(1, 0, 0, 1, 0, ty)
context.textBaseline = baseline
}
const updateText = (text) => {
context.clearRect(0, 0, canvas.width, canvas.height)
context.fillText(text, canvas.width / 2, padding, canvas.width)
}
const computeLineHeight = () => {
const letter = 'A'
setAlignment('bottom')
const gutter = canvas.height - measureBottom(letter)
setAlignment('top')
return measureBottom(letter) + gutter
}
const getPixels = (text) => {
updateText(text)
return context.getImageData(0, 0, canvas.width, canvas.height).data
}
const getFirstIndex = (pixels) => {
for (let i = 3, n = pixels.length; i < n; i += 4) {
if (pixels[i] > 0) return (i - 3) / 4
} return pixels.length
}
const getLastIndex = (pixels) => {
for (let i = pixels.length - 1; i >= 3; i -= 4) {
if (pixels[i] > 0) return i / 4
} return 0
}
const normalize = (metrics, fontSize, origin) => {
const result = {}
const offset = metrics[origin]
for (let key in metrics) { result[key] = (metrics[key] - offset) / fontSize }
return result
}
const measureTop = (text) => (
Math.round(
getFirstIndex(
getPixels(text)
) / canvas.width
) - padding
)
const measureBottom = (text) => (
Math.round(
getLastIndex(
getPixels(text)
) / canvas.width
) - padding
)
const getMetrics = (chars = settings.chars) => ({
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
// ——————————————————————————————————————————————————
const FontMetrics = ({
fontFamily = 'Times',
fontWeight = 'normal',
fontSize = 200,
origin = 'baseline'