1544 lines
66 KiB
HTML
1544 lines
66 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en" dir="auto">
|
||
<head>
|
||
|
||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||
<title>GFR - Proofer</title>
|
||
|
||
<style type="text/css">
|
||
|
||
|
||
html{
|
||
font-family: sans-serif;
|
||
}
|
||
.box-title{
|
||
width: 100%;
|
||
font-size: 8pt;
|
||
font-weight: 700;
|
||
border-top: 1px solid black;
|
||
padding-top: 5px;
|
||
margin-bottom: 10pt;
|
||
display: block;
|
||
}
|
||
.box{
|
||
margin-bottom: 20pt;
|
||
width: 100%;
|
||
float: left;
|
||
}
|
||
.box-text{
|
||
}
|
||
|
||
#nav{
|
||
position: fixed;
|
||
right: 20px;
|
||
z-index: 100;
|
||
}
|
||
#font-toggle{
|
||
}
|
||
.nav-item{
|
||
display: block;
|
||
cursor: pointer;
|
||
-webkit-user-select: none; /* Safari */
|
||
-moz-user-select: none; /* Firefox */
|
||
-ms-user-select: none; /* IE10+/Edge */
|
||
user-select: none; /* Standard */
|
||
text-align: center;
|
||
color: white;
|
||
background-color: black;
|
||
display: block;
|
||
font-size: 9pt;
|
||
padding: 5px;
|
||
margin: 2px;
|
||
}
|
||
.tooltip {
|
||
position: relative;
|
||
display: inline-block;
|
||
border-bottom: 1px dotted black;
|
||
}
|
||
|
||
.tooltip .tooltiptext {
|
||
font-family: sans-serif;
|
||
visibility: hidden;
|
||
width: 500px;
|
||
background-color: black;
|
||
color: #fff;
|
||
text-align: left;
|
||
font-size: 12pt;
|
||
line-height: 15pt;
|
||
border-radius: 6px;
|
||
padding: 5px 0;
|
||
|
||
/* Position the tooltip */
|
||
position: absolute;
|
||
z-index: 1;
|
||
}
|
||
|
||
.tooltip:hover .tooltiptext {
|
||
padding: 10px;
|
||
visibility: visible;
|
||
}
|
||
.tooltipleft {
|
||
float:left;
|
||
width: 249px;
|
||
}
|
||
.tooltipright {
|
||
float:right;
|
||
width:250px;
|
||
}
|
||
|
||
/* Stuff needed for the table differ */
|
||
body {
|
||
font-family: Helvetica;
|
||
}
|
||
.node {
|
||
font-family: courier;
|
||
cursor: pointer;
|
||
position: relative;
|
||
left: 30px;
|
||
padding: 5px;
|
||
display: block;
|
||
border: 1px dashed grey;
|
||
}
|
||
.header {
|
||
font-weight: bold;
|
||
}
|
||
.attrib-old{
|
||
color: red;
|
||
cursor: text;
|
||
}
|
||
.attrib-new{
|
||
color: green;
|
||
cursor: text;
|
||
}
|
||
.leaf {
|
||
font-weight: bold;
|
||
}
|
||
.old .cell .new {
|
||
display: none;
|
||
}
|
||
.new .cell .old {
|
||
display: none;
|
||
}
|
||
.both .cell .old {
|
||
opacity: 0.75;
|
||
color: red;
|
||
}
|
||
.both .cell .new {
|
||
opacity: 0.75;
|
||
position: absolute;
|
||
top: 0;
|
||
color: green;
|
||
}
|
||
.spacer {
|
||
display:block;
|
||
float:left;
|
||
width:100%;
|
||
}
|
||
|
||
|
||
|
||
|
||
|
||
|
||
@font-face{
|
||
src: url(KodeMono-Medium.ttf);
|
||
font-family: "Kode Mono";
|
||
font-weight: 500;
|
||
|
||
font-style: normal;
|
||
}
|
||
|
||
@font-face{
|
||
src: url(KodeMono-Bold.ttf);
|
||
font-family: "Kode Mono";
|
||
font-weight: 700;
|
||
|
||
font-style: normal;
|
||
}
|
||
|
||
@font-face{
|
||
src: url(KodeMono-Regular.ttf);
|
||
font-family: "Kode Mono";
|
||
font-weight: 400;
|
||
|
||
font-style: normal;
|
||
}
|
||
|
||
@font-face{
|
||
src: url(KodeMono-SemiBold.ttf);
|
||
font-family: "Kode Mono";
|
||
font-weight: 600;
|
||
|
||
font-style: normal;
|
||
}
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
.Medium{
|
||
font-family: "Kode Mono";
|
||
font-weight: 500;
|
||
font-stretch: 100%;
|
||
font-style: normal;
|
||
}
|
||
|
||
.Bold{
|
||
font-family: "Kode Mono";
|
||
font-weight: 700;
|
||
font-stretch: 100%;
|
||
font-style: normal;
|
||
}
|
||
|
||
.Regular{
|
||
font-family: "Kode Mono";
|
||
font-weight: 400;
|
||
font-stretch: 100%;
|
||
font-style: normal;
|
||
}
|
||
|
||
.SemiBold{
|
||
font-family: "Kode Mono";
|
||
font-weight: 600;
|
||
font-stretch: 100%;
|
||
font-style: normal;
|
||
}
|
||
|
||
|
||
#toolbar {
|
||
float:right;
|
||
position: fixed;
|
||
right: 20px;
|
||
top: 20px;
|
||
cursor: default;
|
||
user-select: none; /* Standard */
|
||
border: 1px solid black;
|
||
font-size: 9pt;
|
||
}
|
||
#view-button {
|
||
}
|
||
#pt-dropdown {
|
||
padding: 5px;
|
||
}
|
||
#pt-selector {
|
||
background-color: black;
|
||
color: white;
|
||
}
|
||
#side-by-side {
|
||
width: 6000px;
|
||
}
|
||
.box-side-by-side {
|
||
word-break: break-all;
|
||
float: left;
|
||
min-width: 200px;
|
||
max-width: 500px;
|
||
}
|
||
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div id="nav">
|
||
|
||
|
||
<div class="nav-item" id="view-button">Line by line</div>
|
||
<div class="nav-item" id="pt-dropdown">
|
||
<label for="pt-size">Font Size:</label>
|
||
<select id="pt-selector" name="pt">
|
||
<option value="10pt">10pt</option>
|
||
<option selected="selected" value="20pt">20pt</option>
|
||
<option value="48pt">48pt</option>
|
||
<option value="96pt">96pt</option>
|
||
</select>
|
||
</div>
|
||
|
||
</div>
|
||
<div id="content">
|
||
<h2>
|
||
<b>Proofer</b>
|
||
</h2>
|
||
|
||
<div id="line-by-line" style="display: block;">
|
||
|
||
<h3>Glyphset: GF_Latin_Core</h3>
|
||
|
||
<div class="box">
|
||
<div class="box-title">Letter Groups</div>
|
||
|
||
|
||
<div class="box-text Medium" style="font-size: 20pt">
|
||
{'string': 'EFHIJLTU AVWXZ KMNY', 'lang': 'en'}<br>
|
||
</div>
|
||
|
||
<div class="box-text Bold" style="font-size: 20pt">
|
||
{'string': 'EFHIJLTU AVWXZ KMNY', 'lang': 'en'}<br>
|
||
</div>
|
||
|
||
<div class="box-text Regular" style="font-size: 20pt">
|
||
{'string': 'EFHIJLTU AVWXZ KMNY', 'lang': 'en'}<br>
|
||
</div>
|
||
|
||
<div class="box-text SemiBold" style="font-size: 20pt">
|
||
{'string': 'EFHIJLTU AVWXZ KMNY', 'lang': 'en'}<br>
|
||
</div>
|
||
|
||
<br>
|
||
|
||
|
||
<div class="box-text Medium" style="font-size: 20pt">
|
||
{'string': 'COQS BPRDGÞẞ', 'lang': 'en'}<br>
|
||
</div>
|
||
|
||
<div class="box-text Bold" style="font-size: 20pt">
|
||
{'string': 'COQS BPRDGÞẞ', 'lang': 'en'}<br>
|
||
</div>
|
||
|
||
<div class="box-text Regular" style="font-size: 20pt">
|
||
{'string': 'COQS BPRDGÞẞ', 'lang': 'en'}<br>
|
||
</div>
|
||
|
||
<div class="box-text SemiBold" style="font-size: 20pt">
|
||
{'string': 'COQS BPRDGÞẞ', 'lang': 'en'}<br>
|
||
</div>
|
||
|
||
<br>
|
||
|
||
|
||
<div class="box-text Medium" style="font-size: 20pt">
|
||
{'string': 'hmnu ceogðsß abdpqþ', 'lang': 'en'}<br>
|
||
</div>
|
||
|
||
<div class="box-text Bold" style="font-size: 20pt">
|
||
{'string': 'hmnu ceogðsß abdpqþ', 'lang': 'en'}<br>
|
||
</div>
|
||
|
||
<div class="box-text Regular" style="font-size: 20pt">
|
||
{'string': 'hmnu ceogðsß abdpqþ', 'lang': 'en'}<br>
|
||
</div>
|
||
|
||
<div class="box-text SemiBold" style="font-size: 20pt">
|
||
{'string': 'hmnu ceogðsß abdpqþ', 'lang': 'en'}<br>
|
||
</div>
|
||
|
||
<br>
|
||
|
||
|
||
<div class="box-text Medium" style="font-size: 20pt">
|
||
{'string': 'kvwxyz fijltr', 'lang': 'en'}<br>
|
||
</div>
|
||
|
||
<div class="box-text Bold" style="font-size: 20pt">
|
||
{'string': 'kvwxyz fijltr', 'lang': 'en'}<br>
|
||
</div>
|
||
|
||
<div class="box-text Regular" style="font-size: 20pt">
|
||
{'string': 'kvwxyz fijltr', 'lang': 'en'}<br>
|
||
</div>
|
||
|
||
<div class="box-text SemiBold" style="font-size: 20pt">
|
||
{'string': 'kvwxyz fijltr', 'lang': 'en'}<br>
|
||
</div>
|
||
|
||
<br>
|
||
|
||
|
||
<div class="box-text Medium" style="font-size: 20pt">
|
||
{'string': '0123456789', 'lang': 'en'}<br>
|
||
</div>
|
||
|
||
<div class="box-text Bold" style="font-size: 20pt">
|
||
{'string': '0123456789', 'lang': 'en'}<br>
|
||
</div>
|
||
|
||
<div class="box-text Regular" style="font-size: 20pt">
|
||
{'string': '0123456789', 'lang': 'en'}<br>
|
||
</div>
|
||
|
||
<div class="box-text SemiBold" style="font-size: 20pt">
|
||
{'string': '0123456789', 'lang': 'en'}<br>
|
||
</div>
|
||
|
||
<br>
|
||
|
||
|
||
<div class="box-text Medium" style="font-size: 20pt">
|
||
{'string': '.,:;/|?!-–—&@%([{}])°', 'lang': 'en'}<br>
|
||
</div>
|
||
|
||
<div class="box-text Bold" style="font-size: 20pt">
|
||
{'string': '.,:;/|?!-–—&@%([{}])°', 'lang': 'en'}<br>
|
||
</div>
|
||
|
||
<div class="box-text Regular" style="font-size: 20pt">
|
||
{'string': '.,:;/|?!-–—&@%([{}])°', 'lang': 'en'}<br>
|
||
</div>
|
||
|
||
<div class="box-text SemiBold" style="font-size: 20pt">
|
||
{'string': '.,:;/|?!-–—&@%([{}])°', 'lang': 'en'}<br>
|
||
</div>
|
||
|
||
<br>
|
||
|
||
|
||
<div class="box-text Medium" style="font-size: 20pt">
|
||
{'string': '+−×÷=≠><≥≤±≈~¬∞', 'lang': 'en'}<br>
|
||
</div>
|
||
|
||
<div class="box-text Bold" style="font-size: 20pt">
|
||
{'string': '+−×÷=≠><≥≤±≈~¬∞', 'lang': 'en'}<br>
|
||
</div>
|
||
|
||
<div class="box-text Regular" style="font-size: 20pt">
|
||
{'string': '+−×÷=≠><≥≤±≈~¬∞', 'lang': 'en'}<br>
|
||
</div>
|
||
|
||
<div class="box-text SemiBold" style="font-size: 20pt">
|
||
{'string': '+−×÷=≠><≥≤±≈~¬∞', 'lang': 'en'}<br>
|
||
</div>
|
||
|
||
<br>
|
||
|
||
</div>
|
||
|
||
<div class="box">
|
||
<div class="box-title">Spacing</div>
|
||
|
||
|
||
<div class="box-text Medium" style="font-size: 20pt">
|
||
{'string': 'HHOHHOOHOO HIHOIO', 'lang': 'en'}<br>
|
||
</div>
|
||
|
||
<div class="box-text Bold" style="font-size: 20pt">
|
||
{'string': 'HHOHHOOHOO HIHOIO', 'lang': 'en'}<br>
|
||
</div>
|
||
|
||
<div class="box-text Regular" style="font-size: 20pt">
|
||
{'string': 'HHOHHOOHOO HIHOIO', 'lang': 'en'}<br>
|
||
</div>
|
||
|
||
<div class="box-text SemiBold" style="font-size: 20pt">
|
||
{'string': 'HHOHHOOHOO HIHOIO', 'lang': 'en'}<br>
|
||
</div>
|
||
|
||
<br>
|
||
|
||
|
||
<div class="box-text Medium" style="font-size: 20pt">
|
||
{'string': 'uuonouonoo ninoioolonlniuo', 'lang': 'en'}<br>
|
||
</div>
|
||
|
||
<div class="box-text Bold" style="font-size: 20pt">
|
||
{'string': 'uuonouonoo ninoioolonlniuo', 'lang': 'en'}<br>
|
||
</div>
|
||
|
||
<div class="box-text Regular" style="font-size: 20pt">
|
||
{'string': 'uuonouonoo ninoioolonlniuo', 'lang': 'en'}<br>
|
||
</div>
|
||
|
||
<div class="box-text SemiBold" style="font-size: 20pt">
|
||
{'string': 'uuonouonoo ninoioolonlniuo', 'lang': 'en'}<br>
|
||
</div>
|
||
|
||
<br>
|
||
|
||
|
||
<div class="box-text Medium" style="font-size: 20pt">
|
||
{'string': '010 080 030 020 050 060 070', 'lang': 'en'}<br>
|
||
</div>
|
||
|
||
<div class="box-text Bold" style="font-size: 20pt">
|
||
{'string': '010 080 030 020 050 060 070', 'lang': 'en'}<br>
|
||
</div>
|
||
|
||
<div class="box-text Regular" style="font-size: 20pt">
|
||
{'string': '010 080 030 020 050 060 070', 'lang': 'en'}<br>
|
||
</div>
|
||
|
||
<div class="box-text SemiBold" style="font-size: 20pt">
|
||
{'string': '010 080 030 020 050 060 070', 'lang': 'en'}<br>
|
||
</div>
|
||
|
||
<br>
|
||
|
||
|
||
<div class="box-text Medium" style="font-size: 20pt">
|
||
{'string': '3+4=7 5>2 2x²−(8×7)÷9≈1', 'lang': 'en'}<br>
|
||
</div>
|
||
|
||
<div class="box-text Bold" style="font-size: 20pt">
|
||
{'string': '3+4=7 5>2 2x²−(8×7)÷9≈1', 'lang': 'en'}<br>
|
||
</div>
|
||
|
||
<div class="box-text Regular" style="font-size: 20pt">
|
||
{'string': '3+4=7 5>2 2x²−(8×7)÷9≈1', 'lang': 'en'}<br>
|
||
</div>
|
||
|
||
<div class="box-text SemiBold" style="font-size: 20pt">
|
||
{'string': '3+4=7 5>2 2x²−(8×7)÷9≈1', 'lang': 'en'}<br>
|
||
</div>
|
||
|
||
<br>
|
||
|
||
|
||
<div class="box-text Medium" style="font-size: 20pt">
|
||
{'string': 'L·L l·l', 'lang': 'ca'}<br>
|
||
</div>
|
||
|
||
<div class="box-text Bold" style="font-size: 20pt">
|
||
{'string': 'L·L l·l', 'lang': 'ca'}<br>
|
||
</div>
|
||
|
||
<div class="box-text Regular" style="font-size: 20pt">
|
||
{'string': 'L·L l·l', 'lang': 'ca'}<br>
|
||
</div>
|
||
|
||
<div class="box-text SemiBold" style="font-size: 20pt">
|
||
{'string': 'L·L l·l', 'lang': 'ca'}<br>
|
||
</div>
|
||
|
||
<br>
|
||
|
||
</div>
|
||
|
||
<div class="box">
|
||
<div class="box-title">Kerning</div>
|
||
|
||
|
||
<div class="box-text Medium" style="font-size: 20pt">
|
||
{'string': 'HHAVAHH OXOWAFAPATAUAYAÞYLYTJLVÆAVAOYO HH', 'lang': 'en'}<br>
|
||
</div>
|
||
|
||
<div class="box-text Bold" style="font-size: 20pt">
|
||
{'string': 'HHAVAHH OXOWAFAPATAUAYAÞYLYTJLVÆAVAOYO HH', 'lang': 'en'}<br>
|
||
</div>
|
||
|
||
<div class="box-text Regular" style="font-size: 20pt">
|
||
{'string': 'HHAVAHH OXOWAFAPATAUAYAÞYLYTJLVÆAVAOYO HH', 'lang': 'en'}<br>
|
||
</div>
|
||
|
||
<div class="box-text SemiBold" style="font-size: 20pt">
|
||
{'string': 'HHAVAHH OXOWAFAPATAUAYAÞYLYTJLVÆAVAOYO HH', 'lang': 'en'}<br>
|
||
</div>
|
||
|
||
<br>
|
||
|
||
|
||
<div class="box-text Medium" style="font-size: 20pt">
|
||
{'string': 'Ti Tí Tî Tï Tì Tī Vă Tä Tü Tõ Tŭ Tř', 'lang': 'en'}<br>
|
||
</div>
|
||
|
||
<div class="box-text Bold" style="font-size: 20pt">
|
||
{'string': 'Ti Tí Tî Tï Tì Tī Vă Tä Tü Tõ Tŭ Tř', 'lang': 'en'}<br>
|
||
</div>
|
||
|
||
<div class="box-text Regular" style="font-size: 20pt">
|
||
{'string': 'Ti Tí Tî Tï Tì Tī Vă Tä Tü Tõ Tŭ Tř', 'lang': 'en'}<br>
|
||
</div>
|
||
|
||
<div class="box-text SemiBold" style="font-size: 20pt">
|
||
{'string': 'Ti Tí Tî Tï Tì Tī Vă Tä Tü Tõ Tŭ Tř', 'lang': 'en'}<br>
|
||
</div>
|
||
|
||
<br>
|
||
|
||
|
||
<div class="box-text Medium" style="font-size: 20pt">
|
||
{'string': 'HHTan oTo yTy vAv oVo oWo eYe Ly Ky Ac Ay gj', 'lang': 'en'}<br>
|
||
</div>
|
||
|
||
<div class="box-text Bold" style="font-size: 20pt">
|
||
{'string': 'HHTan oTo yTy vAv oVo oWo eYe Ly Ky Ac Ay gj', 'lang': 'en'}<br>
|
||
</div>
|
||
|
||
<div class="box-text Regular" style="font-size: 20pt">
|
||
{'string': 'HHTan oTo yTy vAv oVo oWo eYe Ly Ky Ac Ay gj', 'lang': 'en'}<br>
|
||
</div>
|
||
|
||
<div class="box-text SemiBold" style="font-size: 20pt">
|
||
{'string': 'HHTan oTo yTy vAv oVo oWo eYe Ly Ky Ac Ay gj', 'lang': 'en'}<br>
|
||
</div>
|
||
|
||
<br>
|
||
|
||
|
||
<div class="box-text Medium" style="font-size: 20pt">
|
||
{'string': 'nin non nvn ovo oxo ayn fl fi fj ft gj ko rento', 'lang': 'en'}<br>
|
||
</div>
|
||
|
||
<div class="box-text Bold" style="font-size: 20pt">
|
||
{'string': 'nin non nvn ovo oxo ayn fl fi fj ft gj ko rento', 'lang': 'en'}<br>
|
||
</div>
|
||
|
||
<div class="box-text Regular" style="font-size: 20pt">
|
||
{'string': 'nin non nvn ovo oxo ayn fl fi fj ft gj ko rento', 'lang': 'en'}<br>
|
||
</div>
|
||
|
||
<div class="box-text SemiBold" style="font-size: 20pt">
|
||
{'string': 'nin non nvn ovo oxo ayn fl fi fj ft gj ko rento', 'lang': 'en'}<br>
|
||
</div>
|
||
|
||
<br>
|
||
|
||
|
||
<div class="box-text Medium" style="font-size: 20pt">
|
||
{'string': 'ďá ďu gj ľk włw yły ółr fħ ílïlîl', 'lang': 'en'}<br>
|
||
</div>
|
||
|
||
<div class="box-text Bold" style="font-size: 20pt">
|
||
{'string': 'ďá ďu gj ľk włw yły ółr fħ ílïlîl', 'lang': 'en'}<br>
|
||
</div>
|
||
|
||
<div class="box-text Regular" style="font-size: 20pt">
|
||
{'string': 'ďá ďu gj ľk włw yły ółr fħ ílïlîl', 'lang': 'en'}<br>
|
||
</div>
|
||
|
||
<div class="box-text SemiBold" style="font-size: 20pt">
|
||
{'string': 'ďá ďu gj ľk włw yły ółr fħ ílïlîl', 'lang': 'en'}<br>
|
||
</div>
|
||
|
||
<br>
|
||
|
||
|
||
<div class="box-text Medium" style="font-size: 20pt">
|
||
{'string': 'H.Y-Y.T,F.P,V:Y„V-T-A*A’A“A’A-AL–L—L-', 'lang': 'en'}<br>
|
||
</div>
|
||
|
||
<div class="box-text Bold" style="font-size: 20pt">
|
||
{'string': 'H.Y-Y.T,F.P,V:Y„V-T-A*A’A“A’A-AL–L—L-', 'lang': 'en'}<br>
|
||
</div>
|
||
|
||
<div class="box-text Regular" style="font-size: 20pt">
|
||
{'string': 'H.Y-Y.T,F.P,V:Y„V-T-A*A’A“A’A-AL–L—L-', 'lang': 'en'}<br>
|
||
</div>
|
||
|
||
<div class="box-text SemiBold" style="font-size: 20pt">
|
||
{'string': 'H.Y-Y.T,F.P,V:Y„V-T-A*A’A“A’A-AL–L—L-', 'lang': 'en'}<br>
|
||
</div>
|
||
|
||
<br>
|
||
|
||
|
||
<div class="box-text Medium" style="font-size: 20pt">
|
||
{'string': 'n.r.r,y.y,(o)(i)(d)(j)(f)[j]{f}', 'lang': 'en'}<br>
|
||
</div>
|
||
|
||
<div class="box-text Bold" style="font-size: 20pt">
|
||
{'string': 'n.r.r,y.y,(o)(i)(d)(j)(f)[j]{f}', 'lang': 'en'}<br>
|
||
</div>
|
||
|
||
<div class="box-text Regular" style="font-size: 20pt">
|
||
{'string': 'n.r.r,y.y,(o)(i)(d)(j)(f)[j]{f}', 'lang': 'en'}<br>
|
||
</div>
|
||
|
||
<div class="box-text SemiBold" style="font-size: 20pt">
|
||
{'string': 'n.r.r,y.y,(o)(i)(d)(j)(f)[j]{f}', 'lang': 'en'}<br>
|
||
</div>
|
||
|
||
<br>
|
||
|
||
|
||
<div class="box-text Medium" style="font-size: 20pt">
|
||
{'string': '¿o,O? w@y «n•n» n*', 'lang': 'en'}<br>
|
||
</div>
|
||
|
||
<div class="box-text Bold" style="font-size: 20pt">
|
||
{'string': '¿o,O? w@y «n•n» n*', 'lang': 'en'}<br>
|
||
</div>
|
||
|
||
<div class="box-text Regular" style="font-size: 20pt">
|
||
{'string': '¿o,O? w@y «n•n» n*', 'lang': 'en'}<br>
|
||
</div>
|
||
|
||
<div class="box-text SemiBold" style="font-size: 20pt">
|
||
{'string': '¿o,O? w@y «n•n» n*', 'lang': 'en'}<br>
|
||
</div>
|
||
|
||
<br>
|
||
|
||
|
||
<div class="box-text Medium" style="font-size: 20pt">
|
||
{'string': '080 076 474 973 94 7078 54 24 272 679', 'lang': 'en'}<br>
|
||
</div>
|
||
|
||
<div class="box-text Bold" style="font-size: 20pt">
|
||
{'string': '080 076 474 973 94 7078 54 24 272 679', 'lang': 'en'}<br>
|
||
</div>
|
||
|
||
<div class="box-text Regular" style="font-size: 20pt">
|
||
{'string': '080 076 474 973 94 7078 54 24 272 679', 'lang': 'en'}<br>
|
||
</div>
|
||
|
||
<div class="box-text SemiBold" style="font-size: 20pt">
|
||
{'string': '080 076 474 973 94 7078 54 24 272 679', 'lang': 'en'}<br>
|
||
</div>
|
||
|
||
<br>
|
||
|
||
|
||
<div class="box-text Medium" style="font-size: 20pt">
|
||
{'string': 'P4T47A .47,9.7-»4', 'lang': 'en'}<br>
|
||
</div>
|
||
|
||
<div class="box-text Bold" style="font-size: 20pt">
|
||
{'string': 'P4T47A .47,9.7-»4', 'lang': 'en'}<br>
|
||
</div>
|
||
|
||
<div class="box-text Regular" style="font-size: 20pt">
|
||
{'string': 'P4T47A .47,9.7-»4', 'lang': 'en'}<br>
|
||
</div>
|
||
|
||
<div class="box-text SemiBold" style="font-size: 20pt">
|
||
{'string': 'P4T47A .47,9.7-»4', 'lang': 'en'}<br>
|
||
</div>
|
||
|
||
<br>
|
||
|
||
|
||
<div class="box-text Medium" style="font-size: 20pt">
|
||
{'string': '42°21′29″N 71°03′49″W', 'lang': 'en'}<br>
|
||
</div>
|
||
|
||
<div class="box-text Bold" style="font-size: 20pt">
|
||
{'string': '42°21′29″N 71°03′49″W', 'lang': 'en'}<br>
|
||
</div>
|
||
|
||
<div class="box-text Regular" style="font-size: 20pt">
|
||
{'string': '42°21′29″N 71°03′49″W', 'lang': 'en'}<br>
|
||
</div>
|
||
|
||
<div class="box-text SemiBold" style="font-size: 20pt">
|
||
{'string': '42°21′29″N 71°03′49″W', 'lang': 'en'}<br>
|
||
</div>
|
||
|
||
<br>
|
||
|
||
|
||
<div class="box-text Medium" style="font-size: 20pt">
|
||
{'string': 'd² m³ 15°C/26°F', 'lang': 'en'}<br>
|
||
</div>
|
||
|
||
<div class="box-text Bold" style="font-size: 20pt">
|
||
{'string': 'd² m³ 15°C/26°F', 'lang': 'en'}<br>
|
||
</div>
|
||
|
||
<div class="box-text Regular" style="font-size: 20pt">
|
||
{'string': 'd² m³ 15°C/26°F', 'lang': 'en'}<br>
|
||
</div>
|
||
|
||
<div class="box-text SemiBold" style="font-size: 20pt">
|
||
{'string': 'd² m³ 15°C/26°F', 'lang': 'en'}<br>
|
||
</div>
|
||
|
||
<br>
|
||
|
||
|
||
<div class="box-text Medium" style="font-size: 20pt">
|
||
{'string': '0/0\\0', 'lang': 'en'}<br>
|
||
</div>
|
||
|
||
<div class="box-text Bold" style="font-size: 20pt">
|
||
{'string': '0/0\\0', 'lang': 'en'}<br>
|
||
</div>
|
||
|
||
<div class="box-text Regular" style="font-size: 20pt">
|
||
{'string': '0/0\\0', 'lang': 'en'}<br>
|
||
</div>
|
||
|
||
<div class="box-text SemiBold" style="font-size: 20pt">
|
||
{'string': '0/0\\0', 'lang': 'en'}<br>
|
||
</div>
|
||
|
||
<br>
|
||
|
||
</div>
|
||
|
||
|
||
</div>
|
||
|
||
|
||
|
||
<div id="font-by-font" style="display: none;">
|
||
|
||
<h3>Glyphset: GF_Latin_Core</h3>
|
||
|
||
<div class="box-title">Medium 20pt</div>
|
||
|
||
<div class="box">
|
||
<div class="box-title">Letter Groups</div>
|
||
|
||
<div class="box-text Medium" style="font-size: 20pt">{'string': 'EFHIJLTU AVWXZ KMNY', 'lang': 'en'}</div>
|
||
|
||
<div class="box-text Medium" style="font-size: 20pt">{'string': 'COQS BPRDGÞẞ', 'lang': 'en'}</div>
|
||
|
||
<div class="box-text Medium" style="font-size: 20pt">{'string': 'hmnu ceogðsß abdpqþ', 'lang': 'en'}</div>
|
||
|
||
<div class="box-text Medium" style="font-size: 20pt">{'string': 'kvwxyz fijltr', 'lang': 'en'}</div>
|
||
|
||
<div class="box-text Medium" style="font-size: 20pt">{'string': '0123456789', 'lang': 'en'}</div>
|
||
|
||
<div class="box-text Medium" style="font-size: 20pt">{'string': '.,:;/|?!-–—&@%([{}])°', 'lang': 'en'}</div>
|
||
|
||
<div class="box-text Medium" style="font-size: 20pt">{'string': '+−×÷=≠><≥≤±≈~¬∞', 'lang': 'en'}</div>
|
||
|
||
</div>
|
||
|
||
<div class="box">
|
||
<div class="box-title">Spacing</div>
|
||
|
||
<div class="box-text Medium" style="font-size: 20pt">{'string': 'HHOHHOOHOO HIHOIO', 'lang': 'en'}</div>
|
||
|
||
<div class="box-text Medium" style="font-size: 20pt">{'string': 'uuonouonoo ninoioolonlniuo', 'lang': 'en'}</div>
|
||
|
||
<div class="box-text Medium" style="font-size: 20pt">{'string': '010 080 030 020 050 060 070', 'lang': 'en'}</div>
|
||
|
||
<div class="box-text Medium" style="font-size: 20pt">{'string': '3+4=7 5>2 2x²−(8×7)÷9≈1', 'lang': 'en'}</div>
|
||
|
||
<div class="box-text Medium" style="font-size: 20pt">{'string': 'L·L l·l', 'lang': 'ca'}</div>
|
||
|
||
</div>
|
||
|
||
<div class="box">
|
||
<div class="box-title">Kerning</div>
|
||
|
||
<div class="box-text Medium" style="font-size: 20pt">{'string': 'HHAVAHH OXOWAFAPATAUAYAÞYLYTJLVÆAVAOYO HH', 'lang': 'en'}</div>
|
||
|
||
<div class="box-text Medium" style="font-size: 20pt">{'string': 'Ti Tí Tî Tï Tì Tī Vă Tä Tü Tõ Tŭ Tř', 'lang': 'en'}</div>
|
||
|
||
<div class="box-text Medium" style="font-size: 20pt">{'string': 'HHTan oTo yTy vAv oVo oWo eYe Ly Ky Ac Ay gj', 'lang': 'en'}</div>
|
||
|
||
<div class="box-text Medium" style="font-size: 20pt">{'string': 'nin non nvn ovo oxo ayn fl fi fj ft gj ko rento', 'lang': 'en'}</div>
|
||
|
||
<div class="box-text Medium" style="font-size: 20pt">{'string': 'ďá ďu gj ľk włw yły ółr fħ ílïlîl', 'lang': 'en'}</div>
|
||
|
||
<div class="box-text Medium" style="font-size: 20pt">{'string': 'H.Y-Y.T,F.P,V:Y„V-T-A*A’A“A’A-AL–L—L-', 'lang': 'en'}</div>
|
||
|
||
<div class="box-text Medium" style="font-size: 20pt">{'string': 'n.r.r,y.y,(o)(i)(d)(j)(f)[j]{f}', 'lang': 'en'}</div>
|
||
|
||
<div class="box-text Medium" style="font-size: 20pt">{'string': '¿o,O? w@y «n•n» n*', 'lang': 'en'}</div>
|
||
|
||
<div class="box-text Medium" style="font-size: 20pt">{'string': '080 076 474 973 94 7078 54 24 272 679', 'lang': 'en'}</div>
|
||
|
||
<div class="box-text Medium" style="font-size: 20pt">{'string': 'P4T47A .47,9.7-»4', 'lang': 'en'}</div>
|
||
|
||
<div class="box-text Medium" style="font-size: 20pt">{'string': '42°21′29″N 71°03′49″W', 'lang': 'en'}</div>
|
||
|
||
<div class="box-text Medium" style="font-size: 20pt">{'string': 'd² m³ 15°C/26°F', 'lang': 'en'}</div>
|
||
|
||
<div class="box-text Medium" style="font-size: 20pt">{'string': '0/0\\0', 'lang': 'en'}</div>
|
||
|
||
</div>
|
||
|
||
|
||
<div class="box-title">Bold 20pt</div>
|
||
|
||
<div class="box">
|
||
<div class="box-title">Letter Groups</div>
|
||
|
||
<div class="box-text Bold" style="font-size: 20pt">{'string': 'EFHIJLTU AVWXZ KMNY', 'lang': 'en'}</div>
|
||
|
||
<div class="box-text Bold" style="font-size: 20pt">{'string': 'COQS BPRDGÞẞ', 'lang': 'en'}</div>
|
||
|
||
<div class="box-text Bold" style="font-size: 20pt">{'string': 'hmnu ceogðsß abdpqþ', 'lang': 'en'}</div>
|
||
|
||
<div class="box-text Bold" style="font-size: 20pt">{'string': 'kvwxyz fijltr', 'lang': 'en'}</div>
|
||
|
||
<div class="box-text Bold" style="font-size: 20pt">{'string': '0123456789', 'lang': 'en'}</div>
|
||
|
||
<div class="box-text Bold" style="font-size: 20pt">{'string': '.,:;/|?!-–—&@%([{}])°', 'lang': 'en'}</div>
|
||
|
||
<div class="box-text Bold" style="font-size: 20pt">{'string': '+−×÷=≠><≥≤±≈~¬∞', 'lang': 'en'}</div>
|
||
|
||
</div>
|
||
|
||
<div class="box">
|
||
<div class="box-title">Spacing</div>
|
||
|
||
<div class="box-text Bold" style="font-size: 20pt">{'string': 'HHOHHOOHOO HIHOIO', 'lang': 'en'}</div>
|
||
|
||
<div class="box-text Bold" style="font-size: 20pt">{'string': 'uuonouonoo ninoioolonlniuo', 'lang': 'en'}</div>
|
||
|
||
<div class="box-text Bold" style="font-size: 20pt">{'string': '010 080 030 020 050 060 070', 'lang': 'en'}</div>
|
||
|
||
<div class="box-text Bold" style="font-size: 20pt">{'string': '3+4=7 5>2 2x²−(8×7)÷9≈1', 'lang': 'en'}</div>
|
||
|
||
<div class="box-text Bold" style="font-size: 20pt">{'string': 'L·L l·l', 'lang': 'ca'}</div>
|
||
|
||
</div>
|
||
|
||
<div class="box">
|
||
<div class="box-title">Kerning</div>
|
||
|
||
<div class="box-text Bold" style="font-size: 20pt">{'string': 'HHAVAHH OXOWAFAPATAUAYAÞYLYTJLVÆAVAOYO HH', 'lang': 'en'}</div>
|
||
|
||
<div class="box-text Bold" style="font-size: 20pt">{'string': 'Ti Tí Tî Tï Tì Tī Vă Tä Tü Tõ Tŭ Tř', 'lang': 'en'}</div>
|
||
|
||
<div class="box-text Bold" style="font-size: 20pt">{'string': 'HHTan oTo yTy vAv oVo oWo eYe Ly Ky Ac Ay gj', 'lang': 'en'}</div>
|
||
|
||
<div class="box-text Bold" style="font-size: 20pt">{'string': 'nin non nvn ovo oxo ayn fl fi fj ft gj ko rento', 'lang': 'en'}</div>
|
||
|
||
<div class="box-text Bold" style="font-size: 20pt">{'string': 'ďá ďu gj ľk włw yły ółr fħ ílïlîl', 'lang': 'en'}</div>
|
||
|
||
<div class="box-text Bold" style="font-size: 20pt">{'string': 'H.Y-Y.T,F.P,V:Y„V-T-A*A’A“A’A-AL–L—L-', 'lang': 'en'}</div>
|
||
|
||
<div class="box-text Bold" style="font-size: 20pt">{'string': 'n.r.r,y.y,(o)(i)(d)(j)(f)[j]{f}', 'lang': 'en'}</div>
|
||
|
||
<div class="box-text Bold" style="font-size: 20pt">{'string': '¿o,O? w@y «n•n» n*', 'lang': 'en'}</div>
|
||
|
||
<div class="box-text Bold" style="font-size: 20pt">{'string': '080 076 474 973 94 7078 54 24 272 679', 'lang': 'en'}</div>
|
||
|
||
<div class="box-text Bold" style="font-size: 20pt">{'string': 'P4T47A .47,9.7-»4', 'lang': 'en'}</div>
|
||
|
||
<div class="box-text Bold" style="font-size: 20pt">{'string': '42°21′29″N 71°03′49″W', 'lang': 'en'}</div>
|
||
|
||
<div class="box-text Bold" style="font-size: 20pt">{'string': 'd² m³ 15°C/26°F', 'lang': 'en'}</div>
|
||
|
||
<div class="box-text Bold" style="font-size: 20pt">{'string': '0/0\\0', 'lang': 'en'}</div>
|
||
|
||
</div>
|
||
|
||
|
||
<div class="box-title">Regular 20pt</div>
|
||
|
||
<div class="box">
|
||
<div class="box-title">Letter Groups</div>
|
||
|
||
<div class="box-text Regular" style="font-size: 20pt">{'string': 'EFHIJLTU AVWXZ KMNY', 'lang': 'en'}</div>
|
||
|
||
<div class="box-text Regular" style="font-size: 20pt">{'string': 'COQS BPRDGÞẞ', 'lang': 'en'}</div>
|
||
|
||
<div class="box-text Regular" style="font-size: 20pt">{'string': 'hmnu ceogðsß abdpqþ', 'lang': 'en'}</div>
|
||
|
||
<div class="box-text Regular" style="font-size: 20pt">{'string': 'kvwxyz fijltr', 'lang': 'en'}</div>
|
||
|
||
<div class="box-text Regular" style="font-size: 20pt">{'string': '0123456789', 'lang': 'en'}</div>
|
||
|
||
<div class="box-text Regular" style="font-size: 20pt">{'string': '.,:;/|?!-–—&@%([{}])°', 'lang': 'en'}</div>
|
||
|
||
<div class="box-text Regular" style="font-size: 20pt">{'string': '+−×÷=≠><≥≤±≈~¬∞', 'lang': 'en'}</div>
|
||
|
||
</div>
|
||
|
||
<div class="box">
|
||
<div class="box-title">Spacing</div>
|
||
|
||
<div class="box-text Regular" style="font-size: 20pt">{'string': 'HHOHHOOHOO HIHOIO', 'lang': 'en'}</div>
|
||
|
||
<div class="box-text Regular" style="font-size: 20pt">{'string': 'uuonouonoo ninoioolonlniuo', 'lang': 'en'}</div>
|
||
|
||
<div class="box-text Regular" style="font-size: 20pt">{'string': '010 080 030 020 050 060 070', 'lang': 'en'}</div>
|
||
|
||
<div class="box-text Regular" style="font-size: 20pt">{'string': '3+4=7 5>2 2x²−(8×7)÷9≈1', 'lang': 'en'}</div>
|
||
|
||
<div class="box-text Regular" style="font-size: 20pt">{'string': 'L·L l·l', 'lang': 'ca'}</div>
|
||
|
||
</div>
|
||
|
||
<div class="box">
|
||
<div class="box-title">Kerning</div>
|
||
|
||
<div class="box-text Regular" style="font-size: 20pt">{'string': 'HHAVAHH OXOWAFAPATAUAYAÞYLYTJLVÆAVAOYO HH', 'lang': 'en'}</div>
|
||
|
||
<div class="box-text Regular" style="font-size: 20pt">{'string': 'Ti Tí Tî Tï Tì Tī Vă Tä Tü Tõ Tŭ Tř', 'lang': 'en'}</div>
|
||
|
||
<div class="box-text Regular" style="font-size: 20pt">{'string': 'HHTan oTo yTy vAv oVo oWo eYe Ly Ky Ac Ay gj', 'lang': 'en'}</div>
|
||
|
||
<div class="box-text Regular" style="font-size: 20pt">{'string': 'nin non nvn ovo oxo ayn fl fi fj ft gj ko rento', 'lang': 'en'}</div>
|
||
|
||
<div class="box-text Regular" style="font-size: 20pt">{'string': 'ďá ďu gj ľk włw yły ółr fħ ílïlîl', 'lang': 'en'}</div>
|
||
|
||
<div class="box-text Regular" style="font-size: 20pt">{'string': 'H.Y-Y.T,F.P,V:Y„V-T-A*A’A“A’A-AL–L—L-', 'lang': 'en'}</div>
|
||
|
||
<div class="box-text Regular" style="font-size: 20pt">{'string': 'n.r.r,y.y,(o)(i)(d)(j)(f)[j]{f}', 'lang': 'en'}</div>
|
||
|
||
<div class="box-text Regular" style="font-size: 20pt">{'string': '¿o,O? w@y «n•n» n*', 'lang': 'en'}</div>
|
||
|
||
<div class="box-text Regular" style="font-size: 20pt">{'string': '080 076 474 973 94 7078 54 24 272 679', 'lang': 'en'}</div>
|
||
|
||
<div class="box-text Regular" style="font-size: 20pt">{'string': 'P4T47A .47,9.7-»4', 'lang': 'en'}</div>
|
||
|
||
<div class="box-text Regular" style="font-size: 20pt">{'string': '42°21′29″N 71°03′49″W', 'lang': 'en'}</div>
|
||
|
||
<div class="box-text Regular" style="font-size: 20pt">{'string': 'd² m³ 15°C/26°F', 'lang': 'en'}</div>
|
||
|
||
<div class="box-text Regular" style="font-size: 20pt">{'string': '0/0\\0', 'lang': 'en'}</div>
|
||
|
||
</div>
|
||
|
||
|
||
<div class="box-title">SemiBold 20pt</div>
|
||
|
||
<div class="box">
|
||
<div class="box-title">Letter Groups</div>
|
||
|
||
<div class="box-text SemiBold" style="font-size: 20pt">{'string': 'EFHIJLTU AVWXZ KMNY', 'lang': 'en'}</div>
|
||
|
||
<div class="box-text SemiBold" style="font-size: 20pt">{'string': 'COQS BPRDGÞẞ', 'lang': 'en'}</div>
|
||
|
||
<div class="box-text SemiBold" style="font-size: 20pt">{'string': 'hmnu ceogðsß abdpqþ', 'lang': 'en'}</div>
|
||
|
||
<div class="box-text SemiBold" style="font-size: 20pt">{'string': 'kvwxyz fijltr', 'lang': 'en'}</div>
|
||
|
||
<div class="box-text SemiBold" style="font-size: 20pt">{'string': '0123456789', 'lang': 'en'}</div>
|
||
|
||
<div class="box-text SemiBold" style="font-size: 20pt">{'string': '.,:;/|?!-–—&@%([{}])°', 'lang': 'en'}</div>
|
||
|
||
<div class="box-text SemiBold" style="font-size: 20pt">{'string': '+−×÷=≠><≥≤±≈~¬∞', 'lang': 'en'}</div>
|
||
|
||
</div>
|
||
|
||
<div class="box">
|
||
<div class="box-title">Spacing</div>
|
||
|
||
<div class="box-text SemiBold" style="font-size: 20pt">{'string': 'HHOHHOOHOO HIHOIO', 'lang': 'en'}</div>
|
||
|
||
<div class="box-text SemiBold" style="font-size: 20pt">{'string': 'uuonouonoo ninoioolonlniuo', 'lang': 'en'}</div>
|
||
|
||
<div class="box-text SemiBold" style="font-size: 20pt">{'string': '010 080 030 020 050 060 070', 'lang': 'en'}</div>
|
||
|
||
<div class="box-text SemiBold" style="font-size: 20pt">{'string': '3+4=7 5>2 2x²−(8×7)÷9≈1', 'lang': 'en'}</div>
|
||
|
||
<div class="box-text SemiBold" style="font-size: 20pt">{'string': 'L·L l·l', 'lang': 'ca'}</div>
|
||
|
||
</div>
|
||
|
||
<div class="box">
|
||
<div class="box-title">Kerning</div>
|
||
|
||
<div class="box-text SemiBold" style="font-size: 20pt">{'string': 'HHAVAHH OXOWAFAPATAUAYAÞYLYTJLVÆAVAOYO HH', 'lang': 'en'}</div>
|
||
|
||
<div class="box-text SemiBold" style="font-size: 20pt">{'string': 'Ti Tí Tî Tï Tì Tī Vă Tä Tü Tõ Tŭ Tř', 'lang': 'en'}</div>
|
||
|
||
<div class="box-text SemiBold" style="font-size: 20pt">{'string': 'HHTan oTo yTy vAv oVo oWo eYe Ly Ky Ac Ay gj', 'lang': 'en'}</div>
|
||
|
||
<div class="box-text SemiBold" style="font-size: 20pt">{'string': 'nin non nvn ovo oxo ayn fl fi fj ft gj ko rento', 'lang': 'en'}</div>
|
||
|
||
<div class="box-text SemiBold" style="font-size: 20pt">{'string': 'ďá ďu gj ľk włw yły ółr fħ ílïlîl', 'lang': 'en'}</div>
|
||
|
||
<div class="box-text SemiBold" style="font-size: 20pt">{'string': 'H.Y-Y.T,F.P,V:Y„V-T-A*A’A“A’A-AL–L—L-', 'lang': 'en'}</div>
|
||
|
||
<div class="box-text SemiBold" style="font-size: 20pt">{'string': 'n.r.r,y.y,(o)(i)(d)(j)(f)[j]{f}', 'lang': 'en'}</div>
|
||
|
||
<div class="box-text SemiBold" style="font-size: 20pt">{'string': '¿o,O? w@y «n•n» n*', 'lang': 'en'}</div>
|
||
|
||
<div class="box-text SemiBold" style="font-size: 20pt">{'string': '080 076 474 973 94 7078 54 24 272 679', 'lang': 'en'}</div>
|
||
|
||
<div class="box-text SemiBold" style="font-size: 20pt">{'string': 'P4T47A .47,9.7-»4', 'lang': 'en'}</div>
|
||
|
||
<div class="box-text SemiBold" style="font-size: 20pt">{'string': '42°21′29″N 71°03′49″W', 'lang': 'en'}</div>
|
||
|
||
<div class="box-text SemiBold" style="font-size: 20pt">{'string': 'd² m³ 15°C/26°F', 'lang': 'en'}</div>
|
||
|
||
<div class="box-text SemiBold" style="font-size: 20pt">{'string': '0/0\\0', 'lang': 'en'}</div>
|
||
|
||
</div>
|
||
|
||
|
||
|
||
</div>
|
||
|
||
|
||
<div id="side-by-side" style="display: none;">
|
||
|
||
<h3>Glyphset: GF_Latin_Core</h3>
|
||
|
||
<div class="box-side-by-side">
|
||
<div class="box-title">Medium 20pt</div>
|
||
|
||
<div class="box">
|
||
<div class="box-title">Letter Groups</div>
|
||
|
||
<div class="box-text Medium box-text" style="font-size: 20pt">{'string': 'EFHIJLTU AVWXZ KMNY', 'lang': 'en'}</div>
|
||
|
||
<div class="box-text Medium box-text" style="font-size: 20pt">{'string': 'COQS BPRDGÞẞ', 'lang': 'en'}</div>
|
||
|
||
<div class="box-text Medium box-text" style="font-size: 20pt">{'string': 'hmnu ceogðsß abdpqþ', 'lang': 'en'}</div>
|
||
|
||
<div class="box-text Medium box-text" style="font-size: 20pt">{'string': 'kvwxyz fijltr', 'lang': 'en'}</div>
|
||
|
||
<div class="box-text Medium box-text" style="font-size: 20pt">{'string': '0123456789', 'lang': 'en'}</div>
|
||
|
||
<div class="box-text Medium box-text" style="font-size: 20pt">{'string': '.,:;/|?!-–—&@%([{}])°', 'lang': 'en'}</div>
|
||
|
||
<div class="box-text Medium box-text" style="font-size: 20pt">{'string': '+−×÷=≠><≥≤±≈~¬∞', 'lang': 'en'}</div>
|
||
|
||
</div>
|
||
|
||
<div class="box">
|
||
<div class="box-title">Spacing</div>
|
||
|
||
<div class="box-text Medium box-text" style="font-size: 20pt">{'string': 'HHOHHOOHOO HIHOIO', 'lang': 'en'}</div>
|
||
|
||
<div class="box-text Medium box-text" style="font-size: 20pt">{'string': 'uuonouonoo ninoioolonlniuo', 'lang': 'en'}</div>
|
||
|
||
<div class="box-text Medium box-text" style="font-size: 20pt">{'string': '010 080 030 020 050 060 070', 'lang': 'en'}</div>
|
||
|
||
<div class="box-text Medium box-text" style="font-size: 20pt">{'string': '3+4=7 5>2 2x²−(8×7)÷9≈1', 'lang': 'en'}</div>
|
||
|
||
<div class="box-text Medium box-text" style="font-size: 20pt">{'string': 'L·L l·l', 'lang': 'ca'}</div>
|
||
|
||
</div>
|
||
|
||
<div class="box">
|
||
<div class="box-title">Kerning</div>
|
||
|
||
<div class="box-text Medium box-text" style="font-size: 20pt">{'string': 'HHAVAHH OXOWAFAPATAUAYAÞYLYTJLVÆAVAOYO HH', 'lang': 'en'}</div>
|
||
|
||
<div class="box-text Medium box-text" style="font-size: 20pt">{'string': 'Ti Tí Tî Tï Tì Tī Vă Tä Tü Tõ Tŭ Tř', 'lang': 'en'}</div>
|
||
|
||
<div class="box-text Medium box-text" style="font-size: 20pt">{'string': 'HHTan oTo yTy vAv oVo oWo eYe Ly Ky Ac Ay gj', 'lang': 'en'}</div>
|
||
|
||
<div class="box-text Medium box-text" style="font-size: 20pt">{'string': 'nin non nvn ovo oxo ayn fl fi fj ft gj ko rento', 'lang': 'en'}</div>
|
||
|
||
<div class="box-text Medium box-text" style="font-size: 20pt">{'string': 'ďá ďu gj ľk włw yły ółr fħ ílïlîl', 'lang': 'en'}</div>
|
||
|
||
<div class="box-text Medium box-text" style="font-size: 20pt">{'string': 'H.Y-Y.T,F.P,V:Y„V-T-A*A’A“A’A-AL–L—L-', 'lang': 'en'}</div>
|
||
|
||
<div class="box-text Medium box-text" style="font-size: 20pt">{'string': 'n.r.r,y.y,(o)(i)(d)(j)(f)[j]{f}', 'lang': 'en'}</div>
|
||
|
||
<div class="box-text Medium box-text" style="font-size: 20pt">{'string': '¿o,O? w@y «n•n» n*', 'lang': 'en'}</div>
|
||
|
||
<div class="box-text Medium box-text" style="font-size: 20pt">{'string': '080 076 474 973 94 7078 54 24 272 679', 'lang': 'en'}</div>
|
||
|
||
<div class="box-text Medium box-text" style="font-size: 20pt">{'string': 'P4T47A .47,9.7-»4', 'lang': 'en'}</div>
|
||
|
||
<div class="box-text Medium box-text" style="font-size: 20pt">{'string': '42°21′29″N 71°03′49″W', 'lang': 'en'}</div>
|
||
|
||
<div class="box-text Medium box-text" style="font-size: 20pt">{'string': 'd² m³ 15°C/26°F', 'lang': 'en'}</div>
|
||
|
||
<div class="box-text Medium box-text" style="font-size: 20pt">{'string': '0/0\\0', 'lang': 'en'}</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="box-side-by-side">
|
||
<div class="box-title">Bold 20pt</div>
|
||
|
||
<div class="box">
|
||
<div class="box-title">Letter Groups</div>
|
||
|
||
<div class="box-text Bold box-text" style="font-size: 20pt">{'string': 'EFHIJLTU AVWXZ KMNY', 'lang': 'en'}</div>
|
||
|
||
<div class="box-text Bold box-text" style="font-size: 20pt">{'string': 'COQS BPRDGÞẞ', 'lang': 'en'}</div>
|
||
|
||
<div class="box-text Bold box-text" style="font-size: 20pt">{'string': 'hmnu ceogðsß abdpqþ', 'lang': 'en'}</div>
|
||
|
||
<div class="box-text Bold box-text" style="font-size: 20pt">{'string': 'kvwxyz fijltr', 'lang': 'en'}</div>
|
||
|
||
<div class="box-text Bold box-text" style="font-size: 20pt">{'string': '0123456789', 'lang': 'en'}</div>
|
||
|
||
<div class="box-text Bold box-text" style="font-size: 20pt">{'string': '.,:;/|?!-–—&@%([{}])°', 'lang': 'en'}</div>
|
||
|
||
<div class="box-text Bold box-text" style="font-size: 20pt">{'string': '+−×÷=≠><≥≤±≈~¬∞', 'lang': 'en'}</div>
|
||
|
||
</div>
|
||
|
||
<div class="box">
|
||
<div class="box-title">Spacing</div>
|
||
|
||
<div class="box-text Bold box-text" style="font-size: 20pt">{'string': 'HHOHHOOHOO HIHOIO', 'lang': 'en'}</div>
|
||
|
||
<div class="box-text Bold box-text" style="font-size: 20pt">{'string': 'uuonouonoo ninoioolonlniuo', 'lang': 'en'}</div>
|
||
|
||
<div class="box-text Bold box-text" style="font-size: 20pt">{'string': '010 080 030 020 050 060 070', 'lang': 'en'}</div>
|
||
|
||
<div class="box-text Bold box-text" style="font-size: 20pt">{'string': '3+4=7 5>2 2x²−(8×7)÷9≈1', 'lang': 'en'}</div>
|
||
|
||
<div class="box-text Bold box-text" style="font-size: 20pt">{'string': 'L·L l·l', 'lang': 'ca'}</div>
|
||
|
||
</div>
|
||
|
||
<div class="box">
|
||
<div class="box-title">Kerning</div>
|
||
|
||
<div class="box-text Bold box-text" style="font-size: 20pt">{'string': 'HHAVAHH OXOWAFAPATAUAYAÞYLYTJLVÆAVAOYO HH', 'lang': 'en'}</div>
|
||
|
||
<div class="box-text Bold box-text" style="font-size: 20pt">{'string': 'Ti Tí Tî Tï Tì Tī Vă Tä Tü Tõ Tŭ Tř', 'lang': 'en'}</div>
|
||
|
||
<div class="box-text Bold box-text" style="font-size: 20pt">{'string': 'HHTan oTo yTy vAv oVo oWo eYe Ly Ky Ac Ay gj', 'lang': 'en'}</div>
|
||
|
||
<div class="box-text Bold box-text" style="font-size: 20pt">{'string': 'nin non nvn ovo oxo ayn fl fi fj ft gj ko rento', 'lang': 'en'}</div>
|
||
|
||
<div class="box-text Bold box-text" style="font-size: 20pt">{'string': 'ďá ďu gj ľk włw yły ółr fħ ílïlîl', 'lang': 'en'}</div>
|
||
|
||
<div class="box-text Bold box-text" style="font-size: 20pt">{'string': 'H.Y-Y.T,F.P,V:Y„V-T-A*A’A“A’A-AL–L—L-', 'lang': 'en'}</div>
|
||
|
||
<div class="box-text Bold box-text" style="font-size: 20pt">{'string': 'n.r.r,y.y,(o)(i)(d)(j)(f)[j]{f}', 'lang': 'en'}</div>
|
||
|
||
<div class="box-text Bold box-text" style="font-size: 20pt">{'string': '¿o,O? w@y «n•n» n*', 'lang': 'en'}</div>
|
||
|
||
<div class="box-text Bold box-text" style="font-size: 20pt">{'string': '080 076 474 973 94 7078 54 24 272 679', 'lang': 'en'}</div>
|
||
|
||
<div class="box-text Bold box-text" style="font-size: 20pt">{'string': 'P4T47A .47,9.7-»4', 'lang': 'en'}</div>
|
||
|
||
<div class="box-text Bold box-text" style="font-size: 20pt">{'string': '42°21′29″N 71°03′49″W', 'lang': 'en'}</div>
|
||
|
||
<div class="box-text Bold box-text" style="font-size: 20pt">{'string': 'd² m³ 15°C/26°F', 'lang': 'en'}</div>
|
||
|
||
<div class="box-text Bold box-text" style="font-size: 20pt">{'string': '0/0\\0', 'lang': 'en'}</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="box-side-by-side">
|
||
<div class="box-title">Regular 20pt</div>
|
||
|
||
<div class="box">
|
||
<div class="box-title">Letter Groups</div>
|
||
|
||
<div class="box-text Regular box-text" style="font-size: 20pt">{'string': 'EFHIJLTU AVWXZ KMNY', 'lang': 'en'}</div>
|
||
|
||
<div class="box-text Regular box-text" style="font-size: 20pt">{'string': 'COQS BPRDGÞẞ', 'lang': 'en'}</div>
|
||
|
||
<div class="box-text Regular box-text" style="font-size: 20pt">{'string': 'hmnu ceogðsß abdpqþ', 'lang': 'en'}</div>
|
||
|
||
<div class="box-text Regular box-text" style="font-size: 20pt">{'string': 'kvwxyz fijltr', 'lang': 'en'}</div>
|
||
|
||
<div class="box-text Regular box-text" style="font-size: 20pt">{'string': '0123456789', 'lang': 'en'}</div>
|
||
|
||
<div class="box-text Regular box-text" style="font-size: 20pt">{'string': '.,:;/|?!-–—&@%([{}])°', 'lang': 'en'}</div>
|
||
|
||
<div class="box-text Regular box-text" style="font-size: 20pt">{'string': '+−×÷=≠><≥≤±≈~¬∞', 'lang': 'en'}</div>
|
||
|
||
</div>
|
||
|
||
<div class="box">
|
||
<div class="box-title">Spacing</div>
|
||
|
||
<div class="box-text Regular box-text" style="font-size: 20pt">{'string': 'HHOHHOOHOO HIHOIO', 'lang': 'en'}</div>
|
||
|
||
<div class="box-text Regular box-text" style="font-size: 20pt">{'string': 'uuonouonoo ninoioolonlniuo', 'lang': 'en'}</div>
|
||
|
||
<div class="box-text Regular box-text" style="font-size: 20pt">{'string': '010 080 030 020 050 060 070', 'lang': 'en'}</div>
|
||
|
||
<div class="box-text Regular box-text" style="font-size: 20pt">{'string': '3+4=7 5>2 2x²−(8×7)÷9≈1', 'lang': 'en'}</div>
|
||
|
||
<div class="box-text Regular box-text" style="font-size: 20pt">{'string': 'L·L l·l', 'lang': 'ca'}</div>
|
||
|
||
</div>
|
||
|
||
<div class="box">
|
||
<div class="box-title">Kerning</div>
|
||
|
||
<div class="box-text Regular box-text" style="font-size: 20pt">{'string': 'HHAVAHH OXOWAFAPATAUAYAÞYLYTJLVÆAVAOYO HH', 'lang': 'en'}</div>
|
||
|
||
<div class="box-text Regular box-text" style="font-size: 20pt">{'string': 'Ti Tí Tî Tï Tì Tī Vă Tä Tü Tõ Tŭ Tř', 'lang': 'en'}</div>
|
||
|
||
<div class="box-text Regular box-text" style="font-size: 20pt">{'string': 'HHTan oTo yTy vAv oVo oWo eYe Ly Ky Ac Ay gj', 'lang': 'en'}</div>
|
||
|
||
<div class="box-text Regular box-text" style="font-size: 20pt">{'string': 'nin non nvn ovo oxo ayn fl fi fj ft gj ko rento', 'lang': 'en'}</div>
|
||
|
||
<div class="box-text Regular box-text" style="font-size: 20pt">{'string': 'ďá ďu gj ľk włw yły ółr fħ ílïlîl', 'lang': 'en'}</div>
|
||
|
||
<div class="box-text Regular box-text" style="font-size: 20pt">{'string': 'H.Y-Y.T,F.P,V:Y„V-T-A*A’A“A’A-AL–L—L-', 'lang': 'en'}</div>
|
||
|
||
<div class="box-text Regular box-text" style="font-size: 20pt">{'string': 'n.r.r,y.y,(o)(i)(d)(j)(f)[j]{f}', 'lang': 'en'}</div>
|
||
|
||
<div class="box-text Regular box-text" style="font-size: 20pt">{'string': '¿o,O? w@y «n•n» n*', 'lang': 'en'}</div>
|
||
|
||
<div class="box-text Regular box-text" style="font-size: 20pt">{'string': '080 076 474 973 94 7078 54 24 272 679', 'lang': 'en'}</div>
|
||
|
||
<div class="box-text Regular box-text" style="font-size: 20pt">{'string': 'P4T47A .47,9.7-»4', 'lang': 'en'}</div>
|
||
|
||
<div class="box-text Regular box-text" style="font-size: 20pt">{'string': '42°21′29″N 71°03′49″W', 'lang': 'en'}</div>
|
||
|
||
<div class="box-text Regular box-text" style="font-size: 20pt">{'string': 'd² m³ 15°C/26°F', 'lang': 'en'}</div>
|
||
|
||
<div class="box-text Regular box-text" style="font-size: 20pt">{'string': '0/0\\0', 'lang': 'en'}</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="box-side-by-side">
|
||
<div class="box-title">SemiBold 20pt</div>
|
||
|
||
<div class="box">
|
||
<div class="box-title">Letter Groups</div>
|
||
|
||
<div class="box-text SemiBold box-text" style="font-size: 20pt">{'string': 'EFHIJLTU AVWXZ KMNY', 'lang': 'en'}</div>
|
||
|
||
<div class="box-text SemiBold box-text" style="font-size: 20pt">{'string': 'COQS BPRDGÞẞ', 'lang': 'en'}</div>
|
||
|
||
<div class="box-text SemiBold box-text" style="font-size: 20pt">{'string': 'hmnu ceogðsß abdpqþ', 'lang': 'en'}</div>
|
||
|
||
<div class="box-text SemiBold box-text" style="font-size: 20pt">{'string': 'kvwxyz fijltr', 'lang': 'en'}</div>
|
||
|
||
<div class="box-text SemiBold box-text" style="font-size: 20pt">{'string': '0123456789', 'lang': 'en'}</div>
|
||
|
||
<div class="box-text SemiBold box-text" style="font-size: 20pt">{'string': '.,:;/|?!-–—&@%([{}])°', 'lang': 'en'}</div>
|
||
|
||
<div class="box-text SemiBold box-text" style="font-size: 20pt">{'string': '+−×÷=≠><≥≤±≈~¬∞', 'lang': 'en'}</div>
|
||
|
||
</div>
|
||
|
||
<div class="box">
|
||
<div class="box-title">Spacing</div>
|
||
|
||
<div class="box-text SemiBold box-text" style="font-size: 20pt">{'string': 'HHOHHOOHOO HIHOIO', 'lang': 'en'}</div>
|
||
|
||
<div class="box-text SemiBold box-text" style="font-size: 20pt">{'string': 'uuonouonoo ninoioolonlniuo', 'lang': 'en'}</div>
|
||
|
||
<div class="box-text SemiBold box-text" style="font-size: 20pt">{'string': '010 080 030 020 050 060 070', 'lang': 'en'}</div>
|
||
|
||
<div class="box-text SemiBold box-text" style="font-size: 20pt">{'string': '3+4=7 5>2 2x²−(8×7)÷9≈1', 'lang': 'en'}</div>
|
||
|
||
<div class="box-text SemiBold box-text" style="font-size: 20pt">{'string': 'L·L l·l', 'lang': 'ca'}</div>
|
||
|
||
</div>
|
||
|
||
<div class="box">
|
||
<div class="box-title">Kerning</div>
|
||
|
||
<div class="box-text SemiBold box-text" style="font-size: 20pt">{'string': 'HHAVAHH OXOWAFAPATAUAYAÞYLYTJLVÆAVAOYO HH', 'lang': 'en'}</div>
|
||
|
||
<div class="box-text SemiBold box-text" style="font-size: 20pt">{'string': 'Ti Tí Tî Tï Tì Tī Vă Tä Tü Tõ Tŭ Tř', 'lang': 'en'}</div>
|
||
|
||
<div class="box-text SemiBold box-text" style="font-size: 20pt">{'string': 'HHTan oTo yTy vAv oVo oWo eYe Ly Ky Ac Ay gj', 'lang': 'en'}</div>
|
||
|
||
<div class="box-text SemiBold box-text" style="font-size: 20pt">{'string': 'nin non nvn ovo oxo ayn fl fi fj ft gj ko rento', 'lang': 'en'}</div>
|
||
|
||
<div class="box-text SemiBold box-text" style="font-size: 20pt">{'string': 'ďá ďu gj ľk włw yły ółr fħ ílïlîl', 'lang': 'en'}</div>
|
||
|
||
<div class="box-text SemiBold box-text" style="font-size: 20pt">{'string': 'H.Y-Y.T,F.P,V:Y„V-T-A*A’A“A’A-AL–L—L-', 'lang': 'en'}</div>
|
||
|
||
<div class="box-text SemiBold box-text" style="font-size: 20pt">{'string': 'n.r.r,y.y,(o)(i)(d)(j)(f)[j]{f}', 'lang': 'en'}</div>
|
||
|
||
<div class="box-text SemiBold box-text" style="font-size: 20pt">{'string': '¿o,O? w@y «n•n» n*', 'lang': 'en'}</div>
|
||
|
||
<div class="box-text SemiBold box-text" style="font-size: 20pt">{'string': '080 076 474 973 94 7078 54 24 272 679', 'lang': 'en'}</div>
|
||
|
||
<div class="box-text SemiBold box-text" style="font-size: 20pt">{'string': 'P4T47A .47,9.7-»4', 'lang': 'en'}</div>
|
||
|
||
<div class="box-text SemiBold box-text" style="font-size: 20pt">{'string': '42°21′29″N 71°03′49″W', 'lang': 'en'}</div>
|
||
|
||
<div class="box-text SemiBold box-text" style="font-size: 20pt">{'string': 'd² m³ 15°C/26°F', 'lang': 'en'}</div>
|
||
|
||
<div class="box-text SemiBold box-text" style="font-size: 20pt">{'string': '0/0\\0', 'lang': 'en'}</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
|
||
</div>
|
||
|
||
|
||
|
||
</div>
|
||
</body>
|
||
<script>
|
||
|
||
POSITION = "old"
|
||
fontToggle = document.getElementById("font-toggle")
|
||
function switchFonts() {
|
||
boxTitles = document.getElementsByClassName("box-title")
|
||
items = document.getElementsByClassName("box-text");
|
||
|
||
if (POSITION === "old") {
|
||
POSITION = "new"
|
||
for (item of boxTitles) {
|
||
item.textContent = item.textContent.replace("old", "new")
|
||
fontToggle.textContent = "new"
|
||
}
|
||
for (item of items) {
|
||
item.className = item.className.replace("old", "new")
|
||
}
|
||
|
||
} else {
|
||
POSITION = "old"
|
||
for (item of boxTitles) {
|
||
item.textContent = item.textContent.replace("new", "old")
|
||
fontToggle.textContent = "old"
|
||
}
|
||
for (item of items) {
|
||
item.className = item.className.replace("new", "old")
|
||
}
|
||
}
|
||
}
|
||
if (fontToggle !== null) {
|
||
fontToggle.addEventListener("click", switchFonts);
|
||
}
|
||
|
||
const divs = document.querySelectorAll('.node');
|
||
divs.forEach(el => el.addEventListener('click', event => {
|
||
var children = event.target.querySelectorAll(".node");
|
||
children.forEach(function(e) {
|
||
if (e.style.display === "none") {
|
||
e.style.display = "block";
|
||
} else {
|
||
e.style.display = "none";
|
||
}
|
||
})
|
||
}));
|
||
|
||
|
||
state = "line-by-line"
|
||
function viewMode() {
|
||
var viewButton = document.getElementById("view-button")
|
||
if (state === "line-by-line") {
|
||
document.getElementById("line-by-line").style.display = "none"
|
||
document.getElementById("font-by-font").style.display = "block"
|
||
document.getElementById("side-by-side").style.display = "none"
|
||
state = "font-by-font"
|
||
viewButton.innerHTML = "Font by font"
|
||
} else if (state === "font-by-font") {
|
||
document.getElementById("line-by-line").style.display = "none"
|
||
document.getElementById("font-by-font").style.display = "none"
|
||
document.getElementById("side-by-side").style.display = "block"
|
||
state = "side-by-side"
|
||
setWidth()
|
||
viewButton.innerHTML = "Side by side"
|
||
} else if (state === "side-by-side") {
|
||
document.getElementById("line-by-line").style.display = "block"
|
||
document.getElementById("font-by-font").style.display = "none"
|
||
document.getElementById("side-by-side").style.display = "none"
|
||
state = "line-by-line"
|
||
viewButton.innerHTML = "Line by line"
|
||
}
|
||
}
|
||
document.getElementById("view-button").addEventListener("click", viewMode)
|
||
|
||
var ptSelector = document.getElementById("pt-selector");
|
||
ptSelector.addEventListener("change", function(e) {
|
||
var newPtSize = e.target.value
|
||
textBoxes = document.getElementsByClassName("box-text")
|
||
for (i=0; i<textBoxes.length; i++) {
|
||
var textBox = textBoxes[i]
|
||
textBox.style.fontSize = newPtSize
|
||
}
|
||
setWidth()
|
||
})
|
||
|
||
// break text for side by side view
|
||
async function breakText() {
|
||
var boxContent = document.getElementsByClassName("box-side-by-side")
|
||
var paragraphs = boxContent[0].getElementsByClassName("box-text")
|
||
|
||
for (j=0; j<paragraphs.length; j++) {
|
||
res = []
|
||
for (i=0; i<boxContent.length; i++) {
|
||
box = boxContent[i]
|
||
paras = box.getElementsByClassName("box-text")
|
||
para = paras[j]
|
||
breaks = getLineBreaks(para)
|
||
// populate if empty
|
||
if (res.length === 0) {
|
||
res = breaks
|
||
// replace tighter linebreaks
|
||
} else {
|
||
for (k=0; k<breaks.length; k++) {
|
||
if (k >= res.length) {
|
||
res.push(breaks[k])
|
||
} else if (breaks[k] <= res[k]) {
|
||
res[k] = breaks[k]
|
||
}
|
||
}
|
||
}
|
||
|
||
}
|
||
for (ii=0; ii<boxContent.length; ii++) {
|
||
box = boxContent[ii]
|
||
paras = box.getElementsByClassName("box-text")
|
||
para = paras[j]
|
||
insertBreaks(para, res)
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
function getLineBreaks(elem) {
|
||
const nodes = grabTextNodes(elem);
|
||
for (const node of nodes) { // each node is a big block of text
|
||
let rangeIndex = 1;
|
||
let textIndex = 0;
|
||
let nodeText = node.textContent;
|
||
const textLength = nodeText.length;
|
||
|
||
linebreaks = []
|
||
prevTop = 0;
|
||
while (rangeIndex <= textLength) {
|
||
const range = document.createRange();
|
||
range.setStart(node, rangeIndex-1);
|
||
range.setEnd(node, rangeIndex)
|
||
currentTop = range.getBoundingClientRect().top
|
||
if (currentTop > prevTop) {
|
||
if (rangeIndex-2 !== -1) {
|
||
linebreaks.push(rangeIndex-2)
|
||
}
|
||
}
|
||
rangeIndex += 1;
|
||
prevTop = currentTop
|
||
}
|
||
}
|
||
return linebreaks
|
||
}
|
||
|
||
function grabTextNodes(elem) {
|
||
const walker = document.createTreeWalker(elem, NodeFilter.SHOW_TEXT, null);
|
||
const nodes = [];
|
||
while (walker.nextNode()) {
|
||
nodes.push(walker.currentNode);
|
||
}
|
||
return nodes;
|
||
}
|
||
|
||
function insertBreaks(node, breaks) {
|
||
console.log(node.innerHTML, breaks)
|
||
newText = ""
|
||
currentText = node.textContent
|
||
for (jj=0; jj<currentText.length; jj++) {
|
||
if (breaks.includes(jj)) {
|
||
newText += "<br>"
|
||
} else {
|
||
newText += currentText[jj]
|
||
}
|
||
}
|
||
node.innerHTML = newText
|
||
}
|
||
|
||
function longestLine() {
|
||
var paragraphs = document.getElementsByClassName("box-text")
|
||
var res = 0
|
||
for (i=0; i<paragraphs.length; i++) {
|
||
var cur = lineLength(paragraphs[i])
|
||
res = Math.max(cur, res)
|
||
}
|
||
return res
|
||
}
|
||
|
||
function lineLength(elem) {
|
||
var node = grabTextNodes(elem)[0]
|
||
var range = document.createRange()
|
||
var width = 0
|
||
for (j=1; j<=node.textContent.length; j++) {
|
||
var p = j - 1
|
||
range.setStart(node, p)
|
||
range.setEnd(node, j)
|
||
width += range.getBoundingClientRect().width
|
||
}
|
||
return width
|
||
}
|
||
|
||
function setWidth() {
|
||
var width = longestLine()
|
||
var container = document.getElementById("side-by-side")
|
||
var subContainers = container.getElementsByClassName("box-side-by-side")
|
||
|
||
var containerWidth = (width * subContainers.length) + 100
|
||
container.style.width = containerWidth + "pt"
|
||
|
||
for (i=0; i<subContainers.length; i++) {
|
||
subContainer = subContainers[i]
|
||
var dist = Math.ceil(width) + "pt"
|
||
subContainer.style.maxWidth = dist
|
||
}
|
||
}
|
||
|
||
|
||
|
||
|
||
</script>
|
||
</html>
|