fontdue-js 2.5.0 → 2.7.0

package/dist/fontdue.css

@@ -470,7 +470,8 @@ div[data-component=TypeTesters] {
 .type-tester__toolbar__label {
   display: flex;
   align-items: baseline;
-  margin-right: 1em;
+  margin: 0 1em 0 0;
+  font-weight: inherit;
 }
 .type-tester__toolbar__input {
   background: none;
@@ -746,7 +747,8 @@ div[data-component=TypeTesters] {
   display: flex;
 }
 .type-tester-select .select {
-  margin-right: 1em;
+  margin: 0 1em 0 0;
+  font-weight: inherit;
 }
 
 .select-button {
@@ -827,6 +829,9 @@ div[data-component=TypeTesters] {
 }
 
 .character-viewer {
+  --size: calc(var(--monitor-width) * 1/2);
+  --half-gap: calc(var(--line-gap) / 2);
+  --scale: calc(var(--size) / var(--units-per-em));
   font-size: 1rem;
   line-height: normal;
 }
@@ -834,6 +839,11 @@ div[data-component=TypeTesters] {
 .character-viewer__character-map {
   margin-bottom: 30px;
 }
+@media screen and (min-width: 600px) {
+  .character-viewer__character-map {
+    margin-bottom: 120px;
+  }
+}
 
 .character-viewer__character-map,
 .character-viewer__features-map {
@@ -867,18 +877,52 @@ div[data-component=TypeTesters] {
   top: var(--character_viewer_sticky_top, 16px);
 }
 
+.character-viewer__monitor__character-container {
+  position: relative;
+  margin-bottom: 32px;
+}
+
 .character-viewer__monitor__character {
-  font-size: calc(1px * var(--width) * 2 / 3);
+  font-size: calc(1px * var(--size));
+  line-height: normal;
   text-align: center;
-  border: 1px solid;
-  margin-bottom: 16px;
   white-space: pre;
+  position: relative;
+  z-index: 1;
+}
+
+.character-viewer__monitor__line {
+  position: absolute;
+  font-size: 9px;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 0;
+  border-top: 1px solid var(--horizontal_rule_color, currentcolor);
+  display: flex;
+  justify-content: space-between;
+}
+.character-viewer__monitor__line[data-name=baseline] {
+  top: calc(1px * (var(--ascender) + var(--half-gap)) * var(--scale));
+}
+.character-viewer__monitor__line[data-name=ascender] {
+  top: calc(1px * var(--half-gap) * var(--scale));
+}
+.character-viewer__monitor__line[data-name=cap-height] {
+  top: calc(1px * (var(--ascender) + var(--half-gap) - var(--cap-height)) * var(--scale));
+}
+.character-viewer__monitor__line[data-name=x-height] {
+  top: calc(1px * (var(--ascender) - var(--x-height) + var(--half-gap)) * var(--scale));
+}
+.character-viewer__monitor__line[data-name=descender] {
+  top: calc(1px * (var(--ascender) - var(--descender) + var(--half-gap)) * var(--scale));
 }
 
 .character-viewer__monitor__details {
   display: grid;
   grid-template-columns: max-content auto;
   grid-column-gap: 20px;
+  line-height: 1.6;
 }
 .character-viewer__monitor__details span {
   white-space: nowrap;
@@ -894,37 +938,43 @@ div[data-component=TypeTesters] {
   }
 }
 
-.character-viewer__feature-monitor__characters {
+.character-viewer__feature-monitor__characters,
+.character-viewer__feature-monitor__labels {
   display: grid;
   grid-template-columns: minmax(0, 1fr) 1fr;
-  grid-gap: 20px;
-  margin-bottom: 16px;
 }
-.character-viewer__feature-monitor__characters > div {
-  border: 1px solid;
+
+.character-viewer__feature-monitor__characters {
+  --size: calc(var(--monitor-width) * 1/3);
+  --scale: calc(var(--size) / var(--units-per-em));
+  margin-top: 12px;
+  margin-bottom: 32px;
+  position: relative;
+}
+
+.character-viewer__feature-monitor__characters__on,
+.character-viewer__feature-monitor__characters__off {
   padding: 0 10px;
   position: relative;
 }
-.character-viewer__feature-monitor__characters > div > div {
+
+.character-viewer__feature-monitor__character {
   display: block;
-  font-size: calc(1px * var(--width) * 1 / 3);
+  font-size: calc(1px * var(--size));
   text-align: center;
   white-space: pre;
+  position: relative;
+  z-index: 1;
 }
 
 .character-viewer__feature-monitor__characters__off {
   overflow: auto;
+  border-right: 1px solid var(--horizontal_rule_color, currentcolor);
 }
 .character-viewer__feature-monitor__characters__off > div {
   opacity: 0.3;
 }
 
-.character-viewer__feature-monitor__label {
-  position: absolute;
-  top: 0;
-  left: 5px;
-}
-
 .character-viewer__block__name {
   height: 30px;
 }
@@ -962,9 +1012,9 @@ div[data-component=TypeTesters] {
 }
 @media screen and (min-width: 600px) {
   .character-viewer__block__characters > div:hover, .character-viewer__block__characters > div[data-selected=true] {
-    background: var(--primary_text_color);
-    border-color: var(--primary_text_color);
-    color: var(--primary_background_color);
+    background: var(--character_viewer_selected_background_color, var(--primary_text_color));
+    border-color: var(--character_viewer_selected_border_color, var(--primary_text_color));
+    color: var(--character_viewer_selected_text_color, var(--primary_background_color));
   }
 }
 
@@ -1045,8 +1095,8 @@ input:checked + .checkbox__icon {
   font-size: 14px;
   vertical-align: baseline;
   position: relative;
-  bottom: -2px;
-  margin-right: 4px;
+  bottom: -3px;
+  margin-right: 8px;
 }
 
 body[data-fontdue-store-modal=open] {

package/dist/reducer.js

@@ -223,7 +223,6 @@ const reducer = (state, action) => {
         // sort is important here since moving stylesheets around causes them to
         // get re-fetched
       };
-
     case 'STORE_MODAL_NAVIGATE':
       return storeModalNavigate(state, action);
     case 'STORE_MODAL_REPLACE':

package/dist/scripts/updateUnicodeData.js

@@ -0,0 +1,49 @@
+"use strict";
+
+const https = require('https');
+const fs = require('fs');
+const path = require('path');
+
+// URL from which to fetch the Unicode data
+const UNICODE_DATA_URL = 'https://www.unicode.org/Public/UCD/latest/ucd/UnicodeData.txt';
+
+// Function to fetch the Unicode data
+function fetchUnicodeData() {
+  return new Promise((resolve, reject) => {
+    https.get(UNICODE_DATA_URL, res => {
+      let data = '';
+      res.on('data', chunk => data += chunk);
+      res.on('end', () => resolve(data));
+    }).on('error', err => reject(err));
+  });
+}
+
+// Function to parse the Unicode data and convert it into the desired JSON format
+function parseAndConvertData(data) {
+  const lines = data.split('\n');
+  const result = {};
+  lines.forEach(line => {
+    const parts = line.split(';');
+    if (parts.length > 1) {
+      const code = parseInt(parts[0], 16);
+      const name = parts[1].toLowerCase().replace(/\b\w/g, char => char.toUpperCase());
+      result[code] = name;
+    }
+  });
+  return result;
+}
+
+// Main function to fetch, parse, and write the Unicode data to a JSON file
+async function main() {
+  try {
+    const data = await fetchUnicodeData();
+    const jsonData = parseAndConvertData(data);
+    fs.writeFileSync(path.join(__dirname, '../data/unicodeData.ts'), `const data: { [code: string]: string} = ${JSON.stringify(jsonData)}; export default data;`);
+    console.log('unicode data has been written to unicodeData.ts');
+  } catch (error) {
+    console.error('Error:', error);
+  }
+}
+
+// Run the main function
+main();

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "fontdue-js",
-  "version": "2.5.0",
+  "version": "2.7.0",
   "scripts": {
     "build": "npm run relay && run-p build-js build-css build-ts-declarations",
     "build-js": "babel src --out-dir dist --extensions .ts,.tsx,.js,.jsx",
     "build-ts-declarations": "tsc",
     "build-css": "sass --load-path=node_modules --no-source-map src/index.scss dist/fontdue.css",
     "relay": "relay-compiler",
+    "update-unicode-data": "node src/scripts/updateUnicodeData.js",
     "prepublishOnly": "npm run build"
   },
   "author": "Fontdue",