Skip to content

Commit

Permalink
Changed to local copy of opentype.js
Browse files Browse the repository at this point in the history
  • Loading branch information
clauseggers committed Dec 19, 2024
1 parent 082f9cf commit e7dea64
Show file tree
Hide file tree
Showing 4 changed files with 16,343 additions and 86 deletions.
75 changes: 38 additions & 37 deletions http_root/GalleyProofBX90000Zenith.html
Original file line number Diff line number Diff line change
@@ -1,75 +1,76 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="manifest" href="/manifest.webmanifest">
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<title>Galley Proof BX90000 Zenith</title>
<!-- Import the OpenType.js library first -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/opentype.js/1.3.4/opentype.min.js"></script>
<!-- Import our modular JavaScript as a module -->
<script type="module" src="./galleyproof/GalleyProof.js"></script>
<!-- Original CSS remains the same -->
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="./galleyproof/GalleyProof.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="manifest" href="/manifest.webmanifest">
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<title>Galley Proof BX90000 Zenith</title>
<!-- Import the OpenType.js library first -->
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/opentype.js/1.3.4/opentype.min.js"></script> -->
<script src="./opentypejs/opentype.js"></script>
<!-- Import our modular JavaScript as a module -->
<script type="module" src="./galleyproof/GalleyProof.js"></script>
<!-- Original CSS remains the same -->
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="./galleyproof/GalleyProof.css">
</head>
<body>
<div id="fullScreen">
<button>Fullscreen</button>
<button>Fullscreen</button>
</div>

<div id="drop-text">
Drop your TTF or OTF font here
Drop your TTF or OTF font here
</div>

<div class="display-container">
<div id="galley"></div>
<div id="glyph-display" class="glyph-buffer"></div>
<div id="galley"></div>
<div id="glyph-display" class="glyph-buffer"></div>
</div>

<div id="font-info" style="display: none;">
<div id="font-info-content"></div>
<div id="font-info-content"></div>
</div>

<div id="controls">
<div class="buttons-container">
<button id="font-info-toggle">Show font info</button>
<button id="background-toggle">Swap colours</button>
<button id="font-info-toggle">Show font info</button>
<button id="background-toggle">Swap colours</button>
</div>

<div class="slider-container">
<label>Font size</label>
<input type="range" min="0.3" max="8" step="0.01" value="1">
<span class="value">1 rem</span>
<label>Font size</label>
<input type="range" min="0.3" max="8" step="0.01" value="1">
<span class="value">1 rem</span>
</div>

<div class="slider-container">
<label>Leading</label>
<input type="range" min="0.5" max="4" step="0.01" value="1.20">
<span class="value">1.20×</span>
<label>Leading</label>
<input type="range" min="0.5" max="4" step="0.01" value="1.20">
<span class="value">1.20×</span>
</div>

<div class="slider-container">
<label>Column width</label>
<input type="range" min="20" max="100" value="60">
<span class="value">60%</span>
<label>Column width</label>
<input type="range" min="20" max="100" value="60">
<span class="value">60%</span>
</div>

<div class="slider-container">
<label>Letter spacing</label>
<input type="range" min="-0.2" max="0.5" step="0.001" value="0">
<span class="value">0 em</span>
<label>Letter spacing</label>
<input type="range" min="-0.2" max="0.5" step="0.001" value="0">
<span class="value">0 em</span>
</div>

<div class="slider-container">
<label>Word spacing</label>
<input type="range" min="-1" max="2" step="0.001" value="0">
<span class="value">0 em</span>
<label>Word spacing</label>
<input type="range" min="-1" max="2" step="0.001" value="0">
<span class="value">0 em</span>
</div>
</div>
</div>
</div>
</body>
</html>
6 changes: 2 additions & 4 deletions http_root/HyperFlipBX90000Dominator.html
Original file line number Diff line number Diff line change
Expand Up @@ -8,13 +8,11 @@
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<title>HyperFlip BX90000 Dominator</title>

<!-- Import the OpenType.js library first -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/opentype.js/1.3.4/opentype.min.js"></script>

<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/opentype.js/1.3.4/opentype.min.js"></script> -->
<script src="./opentypejs/opentype.js"></script>
<!-- Import our modular JavaScript as a module -->
<script type="module" src="./hyperflip/HyperFlip.js"></script>

<!-- Original CSS remains the same -->
<link rel="stylesheet" href="styles.css">
</head>
Expand Down
91 changes: 46 additions & 45 deletions http_root/WordMasterBX90000Excelsior.html
Original file line number Diff line number Diff line change
@@ -1,57 +1,58 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="manifest" href="/manifest.webmanifest">
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<title>WordMaster BX90000 Excelsior</title>
<!-- Import the OpenType.js library first -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/opentype.js/1.3.4/opentype.min.js"></script>
<!-- Import our modular JavaScript as a module -->
<script type="module" src="./wordmaster/WordMaster.js"></script>
<!-- Original CSS remains the same -->
<link rel="stylesheet" href="styles.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="manifest" href="/manifest.webmanifest">
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<title>WordMaster BX90000 Excelsior</title>
<!-- Import the OpenType.js library first -->
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/opentype.js/1.3.4/opentype.min.js"></script> -->
<script src="./opentypejs/opentype.js"></script>
<!-- Import our modular JavaScript as a module -->
<script type="module" src="./wordmaster/WordMaster.js"></script>
<!-- Original CSS remains the same -->
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="fullScreen">
<button>Fullscreen</button>
</div>
<div id="fullScreen">
<button>Fullscreen</button>
</div>

<div id="drop-text">
Drop your TTF or OTF font here
</div>
<div id="drop-text">
Drop your TTF or OTF font here
</div>

<div class="display-container">
<div id="word"></div>
<div id="glyph-display" class="glyph-buffer"></div>
</div>
<div class="display-container">
<div id="word"></div>
<div id="glyph-display" class="glyph-buffer"></div>
</div>

<div id="font-info" style="display: none;">
<div id="font-info-content"></div>
</div>
<div id="font-info" style="display: none;">
<div id="font-info-content"></div>
</div>

<div id="font-metrics-overlay"></div>
<div id="font-metrics-overlay"></div>

<div id="controls">
<div class="buttons-container">
<button id="font-info-toggle">Show font info</button>
<button id="background-toggle">Swap colours</button>
<!-- Here the OpenType feature buttons are placed -->
</div>
<div id="controls">
<div class="buttons-container">
<button id="font-info-toggle">Show font info</button>
<button id="background-toggle">Swap colours</button>
<!-- Here the OpenType feature buttons are placed -->
</div>

<div class="slider-container">
<label>Font size</label>
<input type="range" min="10" max="1000" value="600">
<span class="value">600px</span>
</div>
<div class="slider-container">
<label>Font size</label>
<input type="range" min="10" max="1000" value="600">
<span class="value">600px</span>
</div>

<div class="slider-container">
<label>Animation delay</label>
<input type="range" min="100" max="10000" value="3000">
<span class="value">3000ms</span>
</div>
</body>
</html>
<div class="slider-container">
<label>Animation delay</label>
<input type="range" min="100" max="10000" value="3000">
<span class="value">3000ms</span>
</div>
</body>
</html>
Loading

0 comments on commit e7dea64

Please sign in to comment.