diff options
author | Rasmus Andersson <rasmus@notion.se> | 2018-09-06 20:42:43 +0300 |
---|---|---|
committer | Rasmus Andersson <rasmus@notion.se> | 2018-09-06 20:43:28 +0300 |
commit | 310a2dff1d265ffc902f5fbe4938918695932175 (patch) | |
tree | 5eac0966afc68554709a65d0c4050cba11c82122 /docs | |
parent | f55c5bcf52b387966f834748e161d47f59c1394a (diff) | |
download | inter-310a2dff1d265ffc902f5fbe4938918695932175.tar.xz |
glyphorder, alignment zones and some minor glyph adjustments ("harmonization")
Diffstat (limited to 'docs')
-rw-r--r-- | docs/lab/index.html | 285 |
1 files changed, 4 insertions, 281 deletions
diff --git a/docs/lab/index.html b/docs/lab/index.html index 924e1b7c6..8c1295516 100644 --- a/docs/lab/index.html +++ b/docs/lab/index.html @@ -10,6 +10,9 @@ const samples = new Map() let sampleVar = null // BoundVar samples.set('Default', ` +ABCDEFGHIJKLMNOPQRSTUVWXYZ +abcdefghijklmnopqrstuvwxyz +0123456789!?. Pixel preview Resize to fit zenith zone Frame Group Feedback Reset Day day Month month Year year @@ -810,288 +813,8 @@ for (const ch of uniqueChars) { font-family: 'Inter-UI-VERSION', 'Inter UI', serif !important; } -</style> -<style type="text/css"> - -* { margin:0; padding:0; } -html { } -body { - background-color: white; - color:#111; - font:11px serif; - font-weight:400; /*300=light, 400=regular, 500=medium, 600=semibold*/ -} -.robotoFont { - font-family: "Roboto", serif; -} -.systemFont { - font-family: system-ui,-apple-system,"SF Pro Text","SF UI Text",BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;, serif; -} -.italic { - font-style: italic; -} -.de-emphasize { - color:#555; -} -a { - color:#2984AA; - text-decoration:inherit; - display:inline-block; - padding:0 0.3em; - margin:0 -0.3em; - border-radius:5px; -} -a:hover { color:#30C2FF; } - -p { - padding: 24px; - padding-top:12px; -} -h2 { - font-weight:500; - margin: 42px 18px 0 18px; - padding: 6px; -} -.options { - width: 275px; - box-sizing:border-box; - position:fixed; - top:0; right:0; bottom:0; - background:#f4f4f4; - border-left:1px solid #ddd; - /*border-bottom:1px solid rgba(0,0,0,0.15);*/ - /*margin-bottom:24px;*/ - padding: 24px; - user-select:none; - font-family: sans-serif !important; - overflow: auto; - letter-spacing:0.01em; -} -.options > * { - display: block; - margin-bottom:10px; - line-height: 18px; -} - .options small { - opacity: 0.6; - } - .options input[type="radio"], .options input[type="checkbox"] { - margin-right:4px; - } - .options .label-and-value { - display: flex; - flex-wrap: nowrap; - justify-content: flex-start; - } - .options .label-and-value span { - /*flex: 1 1 auto;*/ - /*background:salmon;*/ - text-align: left; - margin-right:6px; - width:90px; - } - .options .label-and-value input { - width:50px; - } - .options .label-and-value select { - min-width:50px; - max-width:130px; - } - .options select[name="sample"] { - width:225px; - } - .options label.rasterizePhrase { - margin-left:20px; - margin-bottom:20px; - } - .options label.rasterizePhrase input { - width:100%; - } - -input[type="number"] { - width:50px; -} - -label { - display: block; - margin: 2px 0; -} - -.checkbox-group label { - margin: 0; -} - -.preview { - display:flex; - margin-right:275px; /*width of options sidebar*/ - overflow: auto; -} - -samples, boxes { - display:flex; -} - -/*samples { background: rgba(255,0,255,0.4); } sample { background: rgba(100,100,255,0.4); }*/ -samples { - display: flex; - padding: 24px 0; - width:100%; -} - sample { - margin: 0; - /*white-space: pre;*/ - padding: 0 24px; - min-width:100px; - /*max-width:450px;*/ - white-space: pre-wrap; - } - sample p { - white-space: pre-wrap; - } - sample :focus { - outline: 2px solid #30C2FF; - } - sample .glyphlist { - display: flex; - flex-wrap: wrap; - letter-spacing:0; - line-height: normal; - } - sample .glyphlist g { - margin:1px; - background:#f9f9f9; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - overflow:hidden; - width:2em; - height:2em; - page-break-inside: avoid; break-inside: avoid; - } - sample .glyphlist g span.glyph { - flex: 1 0 auto; - display: flex; - justify-content: center; - align-items: center; - /*margin-top:16px;*/ - /*background:salmon;*/ - } - sample .glyphlist g span.name { - /*background:lightblue;*/ - text-align: center; - flex: 0 0 auto; - font-size:9px; - color: rgba(0,0,0,0.3); - font-weight: 400; - padding-bottom:2px; - /*height: 16px;*/ - } - sample .glyphlist.hideNames g span.name { - display:none; - } - -body.secondarySampleDisabled .showOnlyWithSecondarySample { - display: none; -} - -body.font-weight-400 b { - font-weight: 500; -} -body.font-weight-500 b { - font-weight: 700; -} -body.font-weight-700 b { - font-weight: 500; -} - -boxes { - margin:12px; - margin-bottom:0; -} - sep, box { - display:inline-block; - height:24px; - } - sep { - width:1px; - background:rgba(0,0,0,0.1); - margin:12px 0 12px 12px; - } - box { - display:inline-block; - background:#222; - color:white; - line-height:24px; - padding:0 12px; - margin:12px 0 0 12px; - min-width:100px; - border-top: 8px solid rgba(255,30,0,0.1); - border-bottom: 8px solid rgba(255,30,0,0.1); - box-sizing: border-box; - outline: none; - } - box span { - display: block; - margin: -8px 0; - } - box.positive { - background:#eee; - color:black; - } - box.centered { - text-align:center; - } - box.tight { - display: flex; - align-items: center; - line-height: normal; - border-color:rgba(0,30,255,0.1); - } - box.tight span { - margin:0; - display:inline-block; - background:rgba(30,255,30,0.1);; - } - - -canvas { - image-rendering: optimizeSpeed; /* Older versions of FF */ - image-rendering: -moz-crisp-edges; /* FF 6.0+ */ - image-rendering: -webkit-optimize-contrast; /* Webkit (non standard naming) */ - image-rendering: -o-crisp-edges; /* OS X & Windows Opera (12.02+) */ - image-rendering: crisp-edges; /* Possible future browsers. */ - -ms-interpolation-mode: nearest-neighbor; /* IE (non standard naming) */ -} - -#renderCanvas { - position: fixed; - top: 0; - left: 0; - pointer-events: none; - visibility: hidden; -} - -#displayCanvas { - display: inline-block; - vertical-align: top; -} - -#measure { - position:absolute; - left:0; top:0; - background:salmon; - visibility:hidden; - pointer-events:none; -} - -@media print { - .options { display:none; } - .preview { margin:0; } - boxes { display:none; } - samples { padding:0; } -} </style> + <link href="lab.css" rel="stylesheet"> <script type="text/javascript"> const fontVersion = Math.round(Date.now()).toString(36) |