mirror of
https://github.com/rsms/inter.git
synced 2024-12-12 15:22:36 +03:00
708 lines
23 KiB
HTML
708 lines
23 KiB
HTML
---
|
||
layout: default
|
||
---
|
||
{%
|
||
|
||
for file in site.static_files %}{%
|
||
assign _path = file.path | remove_first: "/inter" %}{%
|
||
if _path == "/index.css" %}{%
|
||
assign index_css_v = file.modified_time | date: "%Y%m%d%H%M%S" %}{%
|
||
elsif _path == "/index-var.css" %}{%
|
||
assign index_var_css_v = file.modified_time | date: "%Y%m%d%H%M%S" %}{%
|
||
elsif _path == "/index-var.js" %}{%
|
||
assign index_var_js_v = file.modified_time | date: "%Y%m%d%H%M%S" %}{%
|
||
endif %}{%
|
||
endfor
|
||
|
||
%}
|
||
<link rel="stylesheet" href="index.css?v={{ index_css_v }}">
|
||
<link rel="stylesheet" href="index-var.css?v={{ index_var_css_v }}">
|
||
<input type="text" id="hidden-text-input">
|
||
|
||
<div class="row white"><div>
|
||
<!-- <h1>The Inter<br>typeface family</h1> -->
|
||
<grid columns=8>
|
||
<c span=row>
|
||
<h1>The Inter typeface family</h1>
|
||
</c>
|
||
<c span=1-2 span-s=row>
|
||
Inter is a typeface carefully crafted & designed for
|
||
computer screens.
|
||
</c>
|
||
<c span=3.. span-s=row>
|
||
<!-- <p>Inter is a typeface specially designed for computer screens.</p> -->
|
||
<p>
|
||
Inter features a tall x-height to aid in readability of mixed-case and
|
||
lower-case text. Several OpenType features are provided as well,
|
||
like contextual alternates that adjusts punctuation depending on the
|
||
shape of surrounding glyphs, slashed zero for when you need to
|
||
disambiguate "0" from "o", tabular numbers, etc.
|
||
</p>
|
||
</c>
|
||
|
||
<c span=3.. span-s=row style="margin:3rem 0 5rem 0">
|
||
<div id="subway-nav">
|
||
<a class="dest dest1" href="#charset">
|
||
<div class="disc">2.5k</div>
|
||
<div class="label">Glyphs</div>
|
||
</a>
|
||
<a class="dest dest2" href="#weights">
|
||
<div class="disc">18</div>
|
||
<div class="label">Styles</div>
|
||
</a>
|
||
<a class="dest dest3" href="#features">
|
||
<div class="disc">33</div>
|
||
<div class="label">Features</div>
|
||
</a>
|
||
</div>
|
||
</c>
|
||
|
||
<c span=2 span-s=row class="only-large-screen">
|
||
<h3>Inter Regular<br>Sample</h3>
|
||
</c>
|
||
<c span=3.. span-s=row>
|
||
<a href="samples/" class="plain"><img src="samples/img/a-z-regular.svg" width="100%"></a>
|
||
</c>
|
||
<c class="spacer"></c>
|
||
<c span=2 span-s=row class="only-large-screen">
|
||
<h3>Inter Bold<br>Sample</h3>
|
||
</c>
|
||
<c span=3.. span-s=row>
|
||
<a href="samples/" class="plain"><img src="samples/img/lineup-bold-black.svg" width="100%"></a>
|
||
</c>
|
||
<c class="spacer"></c>
|
||
<c span=3.. span-s=row>
|
||
<a href="samples/" class="plain"><img src="samples/img/regular-text.png" srcset="samples/img/regular-text@2x.png 2x" width="100%"></a>
|
||
</c>
|
||
|
||
<c class="spacer"></c>
|
||
|
||
<c span=2 span-s=row>
|
||
<h3><a id="usage" href="#usage">Using</a></h3>
|
||
</c>
|
||
<c span=3.. span-s=row>
|
||
<p>
|
||
Using Inter is as easy as
|
||
<a class="download-link" href="download/">downloading & installing</a>
|
||
the font files. If you're making a web thing, you can use the following CSS.
|
||
<!-- or get it from <a href="https://fonts.google.com/specimen/Inter">Google Fonts</a>. -->
|
||
</p>
|
||
<pre><link rel="preconnect" href="https://rsms.me/">
|
||
<link rel="stylesheet" href="https://rsms.me/inter/inter.css"></pre>
|
||
<pre>html {
|
||
font-family: 'Inter', sans-serif;
|
||
}
|
||
|
||
@supports (font-variation-settings: normal) {
|
||
html {
|
||
font-family: 'Inter var', sans-serif;
|
||
}
|
||
}</pre>
|
||
</c>
|
||
|
||
<c class="spacer"></c>
|
||
|
||
<c span=2 span-s=row>
|
||
<h3 id="dynamic-metrics"><a href="dynmetrics/">Dynamic Metrics</a></h3>
|
||
</c>
|
||
<c span=3.. span-s=row>
|
||
<p class="dynmet-calc">
|
||
Size
|
||
<input id="dynmet-font-size" type="number" value="16" min="4" max="99" autocomplete="off" spellcheck="false"
|
||
><span title='Display points — "px" in CSS, "pt" on iOS, "sp" on Android, and "pt" (1/72 of an inch) in print'>dp</span>
|
||
<span class="arrow">=</span>
|
||
<span title='letter-spacing in CSS; also called "tracking" in some software.'>spacing
|
||
<input id="dynmet-tracking" type="number" value="0.008" autocomplete="off" spellcheck="false">
|
||
<span id="dynmet-unit">em</span>
|
||
</p>
|
||
<p>
|
||
There's of course no absolute right or wrong when it comes to expressing yourself with typography, but Inter <em>Dynamic Metrics</em> provides guidelines for good typography. You simply provide the optical font size, and the tracking and leading is calculated for you to produce the best results.
|
||
</p>
|
||
<p>
|
||
<a href="dynmetrics/" class="plain">Explore dynamic metrics →</a>
|
||
</p>
|
||
</c>
|
||
|
||
<c class="spacer"></c>
|
||
|
||
<c span=2 span-s=row>
|
||
<h3><a id="free" href="#free">Free & <br class="only-large-screen">Open source</a></h3>
|
||
</c>
|
||
<c span=3.. span-s=row>
|
||
<p>
|
||
Inter is a <a href="https://github.com/rsms/inter">free and open source</a> font family.<br>
|
||
You are free to use this font in almost any way imaginable.<br>
|
||
Refer to the <a href="https://choosealicense.com/licenses/ofl-1.1/">SIL Open Font License 1.1</a> for exact details on what the conditions and restrictions are.
|
||
</p>
|
||
<p>
|
||
<a id="sponsor-button"
|
||
title="Help Inter by becoming a sponsor and donating a coffee or two"
|
||
href="https://github.com/sponsors/rsms">
|
||
<span>Sponsor</span>
|
||
</a>
|
||
</p>
|
||
</c>
|
||
|
||
</grid>
|
||
</div></div>
|
||
|
||
|
||
<div id="weights" class="row yellow"><div>
|
||
<h2><a href="#weights">Weights & Styles</a></h2>
|
||
<p>
|
||
There are nine weights, each with italic counterparts,
|
||
making a total of 18 styles.
|
||
</p>
|
||
<img src="res/weights-and-styles.svg" class="weights-and-styles">
|
||
</div></div>
|
||
|
||
|
||
|
||
<div id="variable" class="row white variable"><div>
|
||
<h2><a href="#variable">Variable</a></h2>
|
||
|
||
<p flow-cols=2 flow-cols-s=1>
|
||
Inter is offered as both traditional constant font files
|
||
(one per style, e.g. Bold Italic, Medium, etc.) as well as a
|
||
<a href="https://en.wikipedia.org/wiki/Variable_fonts">Variable Font</a>
|
||
which contains all styles in a much smaller file size.
|
||
Additionally, a variable font is ...variable! You can mix and match weight
|
||
and italic angle as you please, forming theoretically infinite variations.
|
||
</p>
|
||
|
||
<div class="unsupported-message">
|
||
<p>Variable Fonts not supported by this web browser</p>
|
||
</div>
|
||
|
||
<div class="ctrl">
|
||
<div class="ctrlrow">
|
||
<label title="Weight in the range of 100 to 900">
|
||
<span class="label var">Weight:</span>
|
||
<input type="range" value="400" min="100" max="900" name="weight">
|
||
</label>
|
||
<label title="Slant angle in the range of 0° to 10°">
|
||
<span class="label var">Slant:</span>
|
||
<input type="range" value="0" min="0" max="10" step="0.01" name="slant">
|
||
</label>
|
||
<label class="tight">
|
||
<input type="checkbox" name="animate"> Animate weight & slant
|
||
</label>
|
||
<label class="tight">
|
||
<input type="checkbox" name="invert"> Negative
|
||
</label>
|
||
</div>
|
||
<div class="ctrlrow">
|
||
<label title="Font size">
|
||
<span class="label">Size:</span>
|
||
<input type="range" value="96" min="11" max="400" name="size">
|
||
</label>
|
||
<label title="Space between letters">
|
||
<span class="label">Tracking:</span>
|
||
<input type="range" value="0" min="-0.1" max="0.1" step="0.001" name="letterSpacing">
|
||
</label>
|
||
<label>
|
||
<span class="label">Line height:</span>
|
||
<input type="range" value="1.2" min="0.7" max="2" step="0.01" name="lineHeight">
|
||
</label>
|
||
</div>
|
||
</div>
|
||
</div></div>
|
||
<div class="row white variable-sample-row">
|
||
<div class="variable-sample" contenteditable spellcheck="false">
|
||
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890
|
||
?!()[]{}&*^%$#@~
|
||
</div>
|
||
</div>
|
||
<script src="index-var.js?v={{ index_var_js_v }}"></script>
|
||
<div class="row white"><div>
|
||
<p>
|
||
Variable fonts is a new and emerging technology.<br>
|
||
<a href="var-test.html">This test</a> can be used to discover
|
||
what a web browser is capable of.
|
||
</p>
|
||
</div></div>
|
||
|
||
|
||
|
||
<div id="features" class="row features"><div>
|
||
<h2><a href="#features">Features</a></h2>
|
||
<p style="max-width:38rem">
|
||
Inter comes with many OpenType features that can be used to
|
||
tailor functionality and aesthetics to your specific needs.
|
||
Some of these features can be combined to form a great number of
|
||
alternative variations.
|
||
</p>
|
||
<boxes class="features">
|
||
{% for f in site.data.feature_samples %}
|
||
<box class="feat-{{f.tag}}" id="features/{{f.tag}}">
|
||
<h3><a href="#features/{{f.tag}}"><q title='OpenType feature ID'>{{f.tag}}</q> {{f.title}}</a></h3>
|
||
{%
|
||
|
||
if f.description %}
|
||
<p>{{f.description}}</p>
|
||
{% endif %}{%
|
||
|
||
assign feat_tag = f.tag %}{%
|
||
assign has_feature_col = false %}{%
|
||
for s in f.samples %}{%
|
||
if s.feat %}{%
|
||
assign has_feature_col = true %}{%
|
||
break %}{%
|
||
endif %}{%
|
||
endfor
|
||
|
||
%}
|
||
{% if has_feature_col %}
|
||
<grid columns=7>
|
||
<c span=1 class="low-contrast ">Feature</c>
|
||
<c span=3 class="low-contrast">Disabled</c>
|
||
<c span=3 class="low-contrast">Enabled</c>
|
||
{% else %}
|
||
<grid columns=8>
|
||
<c span=4 class="low-contrast">Disabled</c>
|
||
<c span=4 class="low-contrast">Enabled</c>
|
||
{% endif %}
|
||
{% for s in f.samples %}
|
||
{%
|
||
|
||
if has_feature_col %}{%
|
||
assign sample = s.sample %}{%
|
||
assign feat_tag = s.feat %}{%
|
||
else %}{%
|
||
assign sample = s %}{%
|
||
endif %}{%
|
||
|
||
assign sample_in = sample | replace: "›", "<em>" | replace: "‹", "</em>" %}{%
|
||
assign sample_out = sample | remove: "›" | remove: "‹"
|
||
|
||
%} {% if has_feature_col %}
|
||
<c span=1 class="">{{feat_tag}}</c>
|
||
<c span=3 class="sample ff-none">{{sample_in}}</c>
|
||
<c span=3 class="sample ff-{{feat_tag}}">{{sample_out}}</c>
|
||
{% else %}
|
||
<c span=4 class="sample ff-none">{{sample_in}}</c>
|
||
<c span=4 class="sample ff-{{feat_tag}}">{{sample_out}}</c>
|
||
{% endif %}
|
||
{% endfor %}
|
||
</grid>
|
||
|
||
<br>
|
||
<!-- <p class="example" title="CSS code">
|
||
<tt>font-feature-settings: '{{feat_tag}}' 1</tt>
|
||
</p> -->
|
||
|
||
{% if f.footer %}
|
||
<p>{{f.footer}}</p>
|
||
{% endif %}
|
||
</box>
|
||
{% endfor %}
|
||
</boxes>
|
||
|
||
<p>
|
||
Additional features, not highlighted above:
|
||
<q title='OpenType feature ID'>locl</q>,
|
||
<q title='OpenType feature ID'>salt</q>,
|
||
<q title='OpenType feature ID'>aalt</q>,
|
||
<q title='OpenType feature ID'>cpsp</q> and
|
||
<q title='OpenType feature ID'>ordn</q>.
|
||
<br>
|
||
You can explore features in the <a href="lab/">interactive lab</a>.
|
||
</p>
|
||
</div></div>
|
||
|
||
|
||
<div id="languages" class="row white"><div>
|
||
<h2><a href="#languages">Language support</a></h2>
|
||
<br>
|
||
<div class="language-list">
|
||
{% for c in site.data.languages %}
|
||
<h4>{{c.category}}</h4>
|
||
{% for language in c.languages %}
|
||
<p>{{language}}</p>
|
||
{% endfor %}
|
||
{% endfor %}
|
||
</div>
|
||
</div></div>
|
||
|
||
|
||
<div id="charset" class="row green charset-title">
|
||
<div>
|
||
<h2><a href="#charset">Character set</a></h2>
|
||
<p>
|
||
All {{ site.data.glyphinfo.glyphs | size }} characters provided with Inter.
|
||
Tap a glyph to copy it to your clipboard.<br>
|
||
Use the <a href="glyphs/">Glyphs Browser</a> to inspect details like kerning and style variation.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div class="row green charset">
|
||
{% include charset-table.html %}
|
||
</div>
|
||
<script>
|
||
;(function(){
|
||
|
||
function shouldHandleEvent(ev) {
|
||
if (!ev.metaKey && !ev.shiftKey && !ev.ctrlKey) {
|
||
ev.stopPropagation()
|
||
ev.preventDefault()
|
||
return true
|
||
}
|
||
return false
|
||
}
|
||
|
||
function onClickChar(ev) {
|
||
// Copy to clipboard.
|
||
// Clipboard management on the web is _ABSOLUTELY INSANE_
|
||
// This is an elaborate and ugly workaround to make it not suck
|
||
// on various browsers.
|
||
|
||
// document.location.href = "/glyphs/?g=" + encodeURI(ev.target.dataset.glyphname)
|
||
|
||
if (!shouldHandleEvent(ev)) {
|
||
return false
|
||
}
|
||
|
||
var origel = ev.target
|
||
var el = origel.cloneNode(true)
|
||
var r = ev.target.getBoundingClientRect()
|
||
|
||
el.style.position = 'fixed'
|
||
el.style.left = r.left + 'px'
|
||
el.style.top = r.top + 'px'
|
||
el.style.width = r.width + 'px'
|
||
el.style.height = r.height + 'px'
|
||
el.style.webkitUserSelect = 'text'
|
||
el.style.userSelect = 'text'
|
||
document.body.appendChild(el)
|
||
|
||
el.innerText = el.innerText // + " " + el.title
|
||
|
||
el.contentEditable = true
|
||
el.readOnly = false
|
||
|
||
var range = document.createRange()
|
||
range.selectNodeContents(el)
|
||
|
||
var s = window.getSelection()
|
||
s.removeAllRanges()
|
||
s.addRange(range)
|
||
|
||
document.execCommand('copy')
|
||
|
||
document.body.removeChild(el)
|
||
|
||
s.removeAllRanges()
|
||
|
||
HUDNotification.show('Copied ' + origel.innerText + ' to clipboard')
|
||
|
||
|
||
// flash the glyph
|
||
clearTimeout(origel._flashTimer)
|
||
if (origel.classList.contains('flash')) {
|
||
origel.classList.remove('flash')
|
||
if (typeof requestAnimationFrame != 'undefined') {
|
||
requestAnimationFrame(function(){ origel.classList.add('flash') })
|
||
} else {
|
||
setTimeout(function(){ origel.classList.add('flash') }, 1)
|
||
}
|
||
} else {
|
||
origel.classList.add('flash')
|
||
}
|
||
origel._flashTimer = setTimeout(function(){
|
||
origel.classList.remove('flash')
|
||
}, 300)
|
||
}
|
||
|
||
var activeListener = { capture: true }
|
||
|
||
let cv = document.querySelector('.charset-table').querySelectorAll('a')
|
||
for (let i = 0; i < cv.length; i++) {
|
||
let c = cv[i]
|
||
if (typeof PointerEvent == "undefined") {
|
||
c.addEventListener('mousedown', onClickChar, activeListener)
|
||
} else {
|
||
c.addEventListener('pointerdown', onClickChar, activeListener)
|
||
}
|
||
c.onclick = ev => !shouldHandleEvent(ev)
|
||
}
|
||
})();
|
||
</script>
|
||
|
||
|
||
<div id="story" class="row white"><div>
|
||
<h2><a href="#story">The story behind Inter</a></h2>
|
||
<div flow-cols=2 flow-cols-s=1>
|
||
<p>
|
||
Inter started out in late 2016 as an experiment to build a perfectly
|
||
pixel-fitting font at a specific small size (11px.) The idea was that
|
||
by crafting a font in a particular way, with a particular coordinate system
|
||
(Units Per EM), and for a particular target rasterization size (11), it would
|
||
be possible to get the best of both sharpness and readability.
|
||
</p>
|
||
<p>
|
||
However after a few months of using an early version of Inter, it dawned
|
||
on everyone exposed to the test that this approach had some serious real-world
|
||
problems. Most notably that it was really hard to read longer text. Because of
|
||
the pixel-aligning nature of that approach, the font took an almost
|
||
<a href="https://www.figma.com/file/HPqDViSCB8fAWuxaV2ousFMv">mono-spaced appearance</a>,
|
||
making it really easy to read numbers, punctuation and very short
|
||
words, but eye-straining to read anything longer.
|
||
</p>
|
||
<p>
|
||
The project was rebooted with a different approach, sticking with the
|
||
specific UPM, but crafting glyphs and kerning in a way that made for
|
||
more variation in the rhythm and smoother vertical and horizontal stems.
|
||
As Inter was being developed, it was tested on an internal version of
|
||
<a href="https://www.figma.com/">Figma</a>—where the author of Inter works as a designer—and slowly improved upon based on experience and feedback.
|
||
</p>
|
||
</div>
|
||
|
||
<p id="faq"> </p>
|
||
<h2><a href="#faq">FAQ</a></h2>
|
||
<grid columns=2 columns-s=1 class="faq">
|
||
|
||
<c>
|
||
<h4 id="faq-using-features"><a href="#faq-using-features">
|
||
How do I enable and disable font features?
|
||
</a></h4>
|
||
In web browsers you'll want to use
|
||
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-feature-settings"><q>font-feature-settings</q></a>.
|
||
In Figma you can access features via the
|
||
<a href="https://help.figma.com/article/250-working-with-fonts#opentype">Advanced Type panel.</a>
|
||
In Illustrator, Photoshop and friends, you can access features via the
|
||
<a href="https://helpx.adobe.com/illustrator/using/special-characters.html#opentype_panel_overview">Characters and OpenType panels.</a>
|
||
Sketch doesn't provide a UI for configuring font features, but there's
|
||
<a href="https://sketchtalk.io/discussion/comment/1478/#Comment_1478">a workaround using macOS's native font UI.</a>
|
||
</c>
|
||
|
||
<c>
|
||
<h4 id="faq-unhinted-vs-hinted"><a href="#faq-unhinted-vs-hinted">
|
||
What is the difference between hinted and unhinted fonts?
|
||
</a></h4>
|
||
The font files in the "hinted" folders have additional data in them
|
||
for assisting
|
||
<a href="https://en.wikipedia.org/wiki/ClearType">ClearType</a>,
|
||
the text rasterizer used by Microsoft Windows (and some Linux distributions.)
|
||
You want to use the "hinted" fonts only if you are targeting Windows users
|
||
<em>and</em> prefer the different look of these "hinted" fonts.
|
||
Additionally, hinting data makes the font files larger, so if you are
|
||
using Inter on websites, the extra size of these files is another
|
||
consideration to make.
|
||
<a href="https://www.typotheque.com/articles/hinting">
|
||
This article explains hinting at a greater length.</a>
|
||
</c>
|
||
|
||
<c>
|
||
<h4 id="faq-cdn"><a href="#faq-cdn">
|
||
How reliable are the fonts served from rsms.me/inter?
|
||
</a></h4>
|
||
<tt>rsms.me/inter</tt> is distributed globally over CloudFlare's CDN,
|
||
backed by GitHub's servers, making usage of
|
||
<q>https://rsms.me/inter/inter.css</q> and associated font
|
||
files very reliable and fast throughout the world.
|
||
</c>
|
||
|
||
<c>
|
||
<h4 id="faq-contribute"><a href="#faq-contribute">
|
||
Can I help with improving Inter?
|
||
</a></h4>
|
||
Yes you can! Inter is an open-source project, meaning the source
|
||
code—or "source design" if you will—that is used to build the font files
|
||
<a href="https://github.com/rsms/inter">are freely available</a> to improve upon.
|
||
Font making requires a fair bit of technical work and
|
||
depending on what you'd like to do, some things might be more fun
|
||
depending on your technical skills.
|
||
The <a href="https://github.com/rsms/inter/blob/master/CONTRIBUTING.md">"Contributing" document</a> is a great place to start. The document outlines where
|
||
you can have the biggest impact, how things are setup and how to get
|
||
started.
|
||
</c>
|
||
|
||
<c>
|
||
<h4 id="faq-subset"><a href="#faq-subset">
|
||
How do I subset the font files?
|
||
</a></h4>
|
||
<!--The web fonts provided by <a href="inter.css"><tt>inter.css</tt></a> and
|
||
<a href="inter-display.css"><tt>inter-display.css</tt></a> are already subset
|
||
(variable version.)
|
||
If you need special customized subsets, or subsetting OTF or TTF files,
|
||
have a look at-->
|
||
Have a look at
|
||
<a href="https://fonttools.readthedocs.io/en/latest/subset/"><tt>pyftsubset</tt></a>
|
||
and
|
||
<a href="https://github.com/filamentgroup/glyphhanger"><tt>glyphhanger</tt></a>.
|
||
</c>
|
||
|
||
<c>
|
||
<h4 id="faq-otfeat-customize-compile"><a href="#faq-otfeat-customize-compile">
|
||
How do I access alternate glyphs if my software doesn't provide OpenType control?
|
||
</a></h4>
|
||
Have a look at
|
||
<a href="https://github.com/twardoch/fonttools-opentype-feature-freezer"><tt>pyftfeatfreeze</tt></a>
|
||
which is a tool that allows you to build font files with certain OpenType features turned
|
||
on "by default".
|
||
</c>
|
||
|
||
<c>
|
||
<h4 id="faq-start-date"><a href="#faq-start-date">
|
||
This website claims work started in 2016, but the git repository's log says it started later?
|
||
</a></h4>
|
||
Inter was developed in a private, internal git repository
|
||
starting in November 2016, prior to being published on August 22, 2017.
|
||
Between November 2016 and August 2017, there were
|
||
<num>2 990 150</num> line edits made across 247 versions.
|
||
</c>
|
||
|
||
<c>
|
||
<h4 id="faq-contact"><a href="#faq-contact">
|
||
I've made a cool thing that uses Inter, can I share it with you?<br>
|
||
or, I have a different question.
|
||
</a></h4>
|
||
Reach out on <a href="https://twitter.com/rsms">Twitter (@rsms)</a> or over <a href="mailto:rasmus@notion.se">email</a>
|
||
</c>
|
||
|
||
</grid>
|
||
|
||
</div></div>
|
||
|
||
|
||
<div class="row white"><div>
|
||
— <a href="https://twitter.com/rsms" class="plain">@rsms</a>
|
||
</div></div>
|
||
|
||
<script>
|
||
|
||
// FAQ anchors
|
||
(function(){
|
||
|
||
var av = document.querySelectorAll('ul.faq > li.q'), a, i, e, id, tn
|
||
for (i = 0; i < av.length; ++i) {
|
||
e = av[i]
|
||
tn = document.createTextNode('Q ')
|
||
e.insertBefore(tn, e.firstChild)
|
||
id = e.id
|
||
if (id) {
|
||
a = document.createElement('a')
|
||
// a.id = id
|
||
a.href = '#' + id
|
||
a.className = 'plain'
|
||
a.innerHTML = e.innerHTML
|
||
e.innerText = ''
|
||
e.appendChild(a)
|
||
}
|
||
}
|
||
av = document.querySelectorAll('ul.faq > li.a')
|
||
for (i = 0; i < av.length; ++i) {
|
||
e = av[i]
|
||
tn = document.createTextNode('A ')
|
||
e.insertBefore(tn, e.firstChild)
|
||
}
|
||
|
||
})();
|
||
|
||
|
||
// clipboard copy
|
||
var copyToClipboard = (function(){
|
||
var ti = $('#hidden-text-input')
|
||
return function(text) {
|
||
let range = document.createRange()
|
||
|
||
// ti.style.display = null
|
||
ti.value = text
|
||
ti.select()
|
||
|
||
document.execCommand("copy")
|
||
ti.value = ""
|
||
// ti.style.display = 'none'
|
||
ti.readOnly = true
|
||
HUDNotification.show('Copied to clipboard')
|
||
}
|
||
})();
|
||
|
||
|
||
// dynamic metrics calculator
|
||
(function(){
|
||
|
||
var fontSizeEl = $('#dynmet-font-size')
|
||
var trackingEl = $('#dynmet-tracking')
|
||
var unitEl = $('#dynmet-unit')
|
||
|
||
var unitFormatters = [
|
||
['em', 'em', function(fontSize, tracking) {
|
||
return tracking.toFixed(3).replace(/(?:\.000|0+)$/, '')
|
||
}],
|
||
['px', 'px', function(fontSize, tracking) {
|
||
return (fontSize * tracking).toFixed(2).replace(/(?:\.00|0+)$/, '')
|
||
}],
|
||
['%', 'percent', function(fontSize, tracking) {
|
||
return (tracking * 100).toFixed(1)
|
||
}],
|
||
]
|
||
var unitFormatter = unitFormatters[0][2]
|
||
|
||
function updateTracking() {
|
||
var fontSize = parseFloat(fontSizeEl.value)
|
||
if (isNaN(fontSize) || fontSize < 1) {
|
||
fontSizeEl.value = fontSize = 1
|
||
} else if (fontSize > 999) {
|
||
fontSizeEl.value = fontSize = 999
|
||
}
|
||
var tracking = InterDynamicTracking(fontSize)
|
||
trackingEl.value = unitFormatter(fontSize, tracking)
|
||
}
|
||
|
||
function toggleUnit() {
|
||
var unit = unitEl.innerText
|
||
var u, x = -1
|
||
for (var i = 0; i < unitFormatters.length; i++) {
|
||
if (x == -1) {
|
||
u = unitFormatters[i]
|
||
if (u[0] == unit) {
|
||
x = i + 1
|
||
if (x == unitFormatters.length) {
|
||
x = 0
|
||
}
|
||
u = unitFormatters[x]
|
||
}
|
||
}
|
||
trackingEl.classList.remove(unitFormatters[i][1]) // class name
|
||
}
|
||
unit = u[0]
|
||
trackingEl.classList.add(u[1])
|
||
unitFormatter = u[2]
|
||
unitEl.innerText = unit
|
||
updateTracking()
|
||
}
|
||
|
||
function onPointerdownUnit(ev) {
|
||
toggleUnit()
|
||
if (ev) {
|
||
ev.preventDefault()
|
||
ev.stopPropagation()
|
||
}
|
||
}
|
||
|
||
function onPointerdownTracking(ev) {
|
||
if (ev) {
|
||
ev.preventDefault()
|
||
ev.stopPropagation()
|
||
}
|
||
copyToClipboard(trackingEl.value + unitEl.innerText)
|
||
trackingEl.select()
|
||
}
|
||
|
||
var passiveListener = { passive: true, capture: false }
|
||
var activeListener = { capture: true }
|
||
|
||
fontSizeEl.addEventListener('input', updateTracking, passiveListener)
|
||
fontSizeEl.addEventListener('change', updateTracking, passiveListener)
|
||
|
||
unitEl.addEventListener('pointerdown', onPointerdownUnit, activeListener)
|
||
unitEl.addEventListener('mousedown', onPointerdownUnit, activeListener)
|
||
|
||
trackingEl.addEventListener('pointerdown', onPointerdownTracking, activeListener)
|
||
trackingEl.addEventListener('mousedown', onPointerdownTracking, activeListener)
|
||
|
||
updateTracking()
|
||
|
||
})();</script>
|