mirror of
https://github.com/rsms/inter.git
synced 2024-08-15 22:00:25 +03:00
Merge branch 'v4-website'
This commit is contained in:
Rasmus Andersson
commit
bd621042f0
13
docs/Gemfile
13
docs/Gemfile
@ -7,15 +7,16 @@ source "https://rubygems.org"
|
||||
#
|
||||
# This will help ensure the proper Jekyll version is running.
|
||||
# Happy Jekylling!
|
||||
gem "jekyll", "~> 4.2.2"
|
||||
# This is the default theme for new Jekyll sites. You may change this to anything you like.
|
||||
gem "minima", "~> 2.5"
|
||||
#gem "jekyll", "~> 4.2.2"
|
||||
# This is the default theme for new Jekyll sites.
|
||||
# You may change this to anything you like.
|
||||
#gem "minima", "~> 2.5"
|
||||
# If you want to use GitHub Pages, remove the "gem "jekyll"" above and
|
||||
# uncomment the line below. To upgrade, run `bundle update github-pages`.
|
||||
# gem "github-pages", group: :jekyll_plugins
|
||||
gem "github-pages", group: :jekyll_plugins
|
||||
# If you have any plugins, put them here!
|
||||
group :jekyll_plugins do
|
||||
gem "jekyll-feed", "~> 0.12"
|
||||
gem "jekyll-redirect-from"
|
||||
end
|
||||
|
||||
# Windows and JRuby does not include zoneinfo files, so bundle the tzinfo-data gem
|
||||
@ -32,6 +33,4 @@ gem "wdm", "~> 0.1.1", :platforms => [:mingw, :x64_mingw, :mswin]
|
||||
# do not have a Java counterpart.
|
||||
gem "http_parser.rb", "~> 0.6.0", :platforms => [:jruby]
|
||||
|
||||
gem "jekyll-redirect-from"
|
||||
|
||||
gem "webrick"
|
||||
|
||||
@ -1,86 +1,267 @@
|
||||
GEM
|
||||
remote: https://rubygems.org/
|
||||
specs:
|
||||
addressable (2.8.1)
|
||||
activesupport (7.0.8)
|
||||
concurrent-ruby (~> 1.0, >= 1.0.2)
|
||||
i18n (>= 1.6, < 2)
|
||||
minitest (>= 5.1)
|
||||
tzinfo (~> 2.0)
|
||||
addressable (2.8.5)
|
||||
public_suffix (>= 2.0.2, < 6.0)
|
||||
base64 (0.1.1)
|
||||
coffee-script (2.4.1)
|
||||
coffee-script-source
|
||||
execjs
|
||||
coffee-script-source (1.11.1)
|
||||
colorator (1.1.0)
|
||||
concurrent-ruby (1.1.10)
|
||||
commonmarker (0.23.10)
|
||||
concurrent-ruby (1.2.2)
|
||||
dnsruby (1.70.0)
|
||||
simpleidn (~> 0.2.1)
|
||||
em-websocket (0.5.3)
|
||||
eventmachine (>= 0.12.9)
|
||||
http_parser.rb (~> 0)
|
||||
ethon (0.16.0)
|
||||
ffi (>= 1.15.0)
|
||||
eventmachine (1.2.7)
|
||||
ffi (1.15.5)
|
||||
execjs (2.9.1)
|
||||
faraday (2.7.11)
|
||||
base64
|
||||
faraday-net_http (>= 2.0, < 3.1)
|
||||
ruby2_keywords (>= 0.0.4)
|
||||
faraday-net_http (3.0.2)
|
||||
ffi (1.16.2)
|
||||
forwardable-extended (2.6.0)
|
||||
gemoji (3.0.1)
|
||||
github-pages (228)
|
||||
github-pages-health-check (= 1.17.9)
|
||||
jekyll (= 3.9.3)
|
||||
jekyll-avatar (= 0.7.0)
|
||||
jekyll-coffeescript (= 1.1.1)
|
||||
jekyll-commonmark-ghpages (= 0.4.0)
|
||||
jekyll-default-layout (= 0.1.4)
|
||||
jekyll-feed (= 0.15.1)
|
||||
jekyll-gist (= 1.5.0)
|
||||
jekyll-github-metadata (= 2.13.0)
|
||||
jekyll-include-cache (= 0.2.1)
|
||||
jekyll-mentions (= 1.6.0)
|
||||
jekyll-optional-front-matter (= 0.3.2)
|
||||
jekyll-paginate (= 1.1.0)
|
||||
jekyll-readme-index (= 0.3.0)
|
||||
jekyll-redirect-from (= 0.16.0)
|
||||
jekyll-relative-links (= 0.6.1)
|
||||
jekyll-remote-theme (= 0.4.3)
|
||||
jekyll-sass-converter (= 1.5.2)
|
||||
jekyll-seo-tag (= 2.8.0)
|
||||
jekyll-sitemap (= 1.4.0)
|
||||
jekyll-swiss (= 1.0.0)
|
||||
jekyll-theme-architect (= 0.2.0)
|
||||
jekyll-theme-cayman (= 0.2.0)
|
||||
jekyll-theme-dinky (= 0.2.0)
|
||||
jekyll-theme-hacker (= 0.2.0)
|
||||
jekyll-theme-leap-day (= 0.2.0)
|
||||
jekyll-theme-merlot (= 0.2.0)
|
||||
jekyll-theme-midnight (= 0.2.0)
|
||||
jekyll-theme-minimal (= 0.2.0)
|
||||
jekyll-theme-modernist (= 0.2.0)
|
||||
jekyll-theme-primer (= 0.6.0)
|
||||
jekyll-theme-slate (= 0.2.0)
|
||||
jekyll-theme-tactile (= 0.2.0)
|
||||
jekyll-theme-time-machine (= 0.2.0)
|
||||
jekyll-titles-from-headings (= 0.5.3)
|
||||
jemoji (= 0.12.0)
|
||||
kramdown (= 2.3.2)
|
||||
kramdown-parser-gfm (= 1.1.0)
|
||||
liquid (= 4.0.4)
|
||||
mercenary (~> 0.3)
|
||||
minima (= 2.5.1)
|
||||
nokogiri (>= 1.13.6, < 2.0)
|
||||
rouge (= 3.26.0)
|
||||
terminal-table (~> 1.4)
|
||||
github-pages-health-check (1.17.9)
|
||||
addressable (~> 2.3)
|
||||
dnsruby (~> 1.60)
|
||||
octokit (~> 4.0)
|
||||
public_suffix (>= 3.0, < 5.0)
|
||||
typhoeus (~> 1.3)
|
||||
html-pipeline (2.14.3)
|
||||
activesupport (>= 2)
|
||||
nokogiri (>= 1.4)
|
||||
http_parser.rb (0.8.0)
|
||||
i18n (1.12.0)
|
||||
i18n (1.14.1)
|
||||
concurrent-ruby (~> 1.0)
|
||||
jekyll (4.2.2)
|
||||
jekyll (3.9.3)
|
||||
addressable (~> 2.4)
|
||||
colorator (~> 1.0)
|
||||
em-websocket (~> 0.5)
|
||||
i18n (~> 1.0)
|
||||
jekyll-sass-converter (~> 2.0)
|
||||
i18n (>= 0.7, < 2)
|
||||
jekyll-sass-converter (~> 1.0)
|
||||
jekyll-watch (~> 2.0)
|
||||
kramdown (~> 2.3)
|
||||
kramdown-parser-gfm (~> 1.0)
|
||||
kramdown (>= 1.17, < 3)
|
||||
liquid (~> 4.0)
|
||||
mercenary (~> 0.4.0)
|
||||
mercenary (~> 0.3.3)
|
||||
pathutil (~> 0.9)
|
||||
rouge (~> 3.0)
|
||||
rouge (>= 1.7, < 4)
|
||||
safe_yaml (~> 1.0)
|
||||
terminal-table (~> 2.0)
|
||||
jekyll-feed (0.16.0)
|
||||
jekyll-avatar (0.7.0)
|
||||
jekyll (>= 3.0, < 5.0)
|
||||
jekyll-coffeescript (1.1.1)
|
||||
coffee-script (~> 2.2)
|
||||
coffee-script-source (~> 1.11.1)
|
||||
jekyll-commonmark (1.4.0)
|
||||
commonmarker (~> 0.22)
|
||||
jekyll-commonmark-ghpages (0.4.0)
|
||||
commonmarker (~> 0.23.7)
|
||||
jekyll (~> 3.9.0)
|
||||
jekyll-commonmark (~> 1.4.0)
|
||||
rouge (>= 2.0, < 5.0)
|
||||
jekyll-default-layout (0.1.4)
|
||||
jekyll (~> 3.0)
|
||||
jekyll-feed (0.15.1)
|
||||
jekyll (>= 3.7, < 5.0)
|
||||
jekyll-gist (1.5.0)
|
||||
octokit (~> 4.2)
|
||||
jekyll-github-metadata (2.13.0)
|
||||
jekyll (>= 3.4, < 5.0)
|
||||
octokit (~> 4.0, != 4.4.0)
|
||||
jekyll-include-cache (0.2.1)
|
||||
jekyll (>= 3.7, < 5.0)
|
||||
jekyll-mentions (1.6.0)
|
||||
html-pipeline (~> 2.3)
|
||||
jekyll (>= 3.7, < 5.0)
|
||||
jekyll-optional-front-matter (0.3.2)
|
||||
jekyll (>= 3.0, < 5.0)
|
||||
jekyll-paginate (1.1.0)
|
||||
jekyll-readme-index (0.3.0)
|
||||
jekyll (>= 3.0, < 5.0)
|
||||
jekyll-redirect-from (0.16.0)
|
||||
jekyll (>= 3.3, < 5.0)
|
||||
jekyll-sass-converter (2.2.0)
|
||||
sassc (> 2.0.1, < 3.0)
|
||||
jekyll-relative-links (0.6.1)
|
||||
jekyll (>= 3.3, < 5.0)
|
||||
jekyll-remote-theme (0.4.3)
|
||||
addressable (~> 2.0)
|
||||
jekyll (>= 3.5, < 5.0)
|
||||
jekyll-sass-converter (>= 1.0, <= 3.0.0, != 2.0.0)
|
||||
rubyzip (>= 1.3.0, < 3.0)
|
||||
jekyll-sass-converter (1.5.2)
|
||||
sass (~> 3.4)
|
||||
jekyll-seo-tag (2.8.0)
|
||||
jekyll (>= 3.8, < 5.0)
|
||||
jekyll-sitemap (1.4.0)
|
||||
jekyll (>= 3.7, < 5.0)
|
||||
jekyll-swiss (1.0.0)
|
||||
jekyll-theme-architect (0.2.0)
|
||||
jekyll (> 3.5, < 5.0)
|
||||
jekyll-seo-tag (~> 2.0)
|
||||
jekyll-theme-cayman (0.2.0)
|
||||
jekyll (> 3.5, < 5.0)
|
||||
jekyll-seo-tag (~> 2.0)
|
||||
jekyll-theme-dinky (0.2.0)
|
||||
jekyll (> 3.5, < 5.0)
|
||||
jekyll-seo-tag (~> 2.0)
|
||||
jekyll-theme-hacker (0.2.0)
|
||||
jekyll (> 3.5, < 5.0)
|
||||
jekyll-seo-tag (~> 2.0)
|
||||
jekyll-theme-leap-day (0.2.0)
|
||||
jekyll (> 3.5, < 5.0)
|
||||
jekyll-seo-tag (~> 2.0)
|
||||
jekyll-theme-merlot (0.2.0)
|
||||
jekyll (> 3.5, < 5.0)
|
||||
jekyll-seo-tag (~> 2.0)
|
||||
jekyll-theme-midnight (0.2.0)
|
||||
jekyll (> 3.5, < 5.0)
|
||||
jekyll-seo-tag (~> 2.0)
|
||||
jekyll-theme-minimal (0.2.0)
|
||||
jekyll (> 3.5, < 5.0)
|
||||
jekyll-seo-tag (~> 2.0)
|
||||
jekyll-theme-modernist (0.2.0)
|
||||
jekyll (> 3.5, < 5.0)
|
||||
jekyll-seo-tag (~> 2.0)
|
||||
jekyll-theme-primer (0.6.0)
|
||||
jekyll (> 3.5, < 5.0)
|
||||
jekyll-github-metadata (~> 2.9)
|
||||
jekyll-seo-tag (~> 2.0)
|
||||
jekyll-theme-slate (0.2.0)
|
||||
jekyll (> 3.5, < 5.0)
|
||||
jekyll-seo-tag (~> 2.0)
|
||||
jekyll-theme-tactile (0.2.0)
|
||||
jekyll (> 3.5, < 5.0)
|
||||
jekyll-seo-tag (~> 2.0)
|
||||
jekyll-theme-time-machine (0.2.0)
|
||||
jekyll (> 3.5, < 5.0)
|
||||
jekyll-seo-tag (~> 2.0)
|
||||
jekyll-titles-from-headings (0.5.3)
|
||||
jekyll (>= 3.3, < 5.0)
|
||||
jekyll-watch (2.2.1)
|
||||
listen (~> 3.0)
|
||||
kramdown (2.4.0)
|
||||
jemoji (0.12.0)
|
||||
gemoji (~> 3.0)
|
||||
html-pipeline (~> 2.2)
|
||||
jekyll (>= 3.0, < 5.0)
|
||||
kramdown (2.3.2)
|
||||
rexml
|
||||
kramdown-parser-gfm (1.1.0)
|
||||
kramdown (~> 2.0)
|
||||
liquid (4.0.3)
|
||||
listen (3.7.1)
|
||||
liquid (4.0.4)
|
||||
listen (3.8.0)
|
||||
rb-fsevent (~> 0.10, >= 0.10.3)
|
||||
rb-inotify (~> 0.9, >= 0.9.10)
|
||||
mercenary (0.4.0)
|
||||
mercenary (0.3.6)
|
||||
minima (2.5.1)
|
||||
jekyll (>= 3.5, < 5.0)
|
||||
jekyll-feed (~> 0.9)
|
||||
jekyll-seo-tag (~> 2.1)
|
||||
minitest (5.20.0)
|
||||
nokogiri (1.15.4-x86_64-darwin)
|
||||
racc (~> 1.4)
|
||||
octokit (4.25.1)
|
||||
faraday (>= 1, < 3)
|
||||
sawyer (~> 0.9)
|
||||
pathutil (0.16.2)
|
||||
forwardable-extended (~> 2.6)
|
||||
public_suffix (5.0.0)
|
||||
public_suffix (4.0.7)
|
||||
racc (1.7.1)
|
||||
rb-fsevent (0.11.2)
|
||||
rb-inotify (0.10.1)
|
||||
ffi (~> 1.0)
|
||||
rexml (3.2.5)
|
||||
rouge (3.30.0)
|
||||
rexml (3.2.6)
|
||||
rouge (3.26.0)
|
||||
ruby2_keywords (0.0.5)
|
||||
rubyzip (2.3.2)
|
||||
safe_yaml (1.0.5)
|
||||
sassc (2.4.0)
|
||||
ffi (~> 1.9)
|
||||
terminal-table (2.0.0)
|
||||
sass (3.7.4)
|
||||
sass-listen (~> 4.0.0)
|
||||
sass-listen (4.0.0)
|
||||
rb-fsevent (~> 0.9, >= 0.9.4)
|
||||
rb-inotify (~> 0.9, >= 0.9.7)
|
||||
sawyer (0.9.2)
|
||||
addressable (>= 2.3.5)
|
||||
faraday (>= 0.17.3, < 3)
|
||||
simpleidn (0.2.1)
|
||||
unf (~> 0.1.4)
|
||||
terminal-table (1.8.0)
|
||||
unicode-display_width (~> 1.1, >= 1.1.1)
|
||||
typhoeus (1.4.0)
|
||||
ethon (>= 0.9.0)
|
||||
tzinfo (2.0.6)
|
||||
concurrent-ruby (~> 1.0)
|
||||
unf (0.1.4)
|
||||
unf_ext
|
||||
unf_ext (0.0.8.2)
|
||||
unicode-display_width (1.8.0)
|
||||
webrick (1.7.0)
|
||||
webrick (1.8.1)
|
||||
|
||||
PLATFORMS
|
||||
x86_64-darwin-19
|
||||
|
||||
DEPENDENCIES
|
||||
github-pages
|
||||
http_parser.rb (~> 0.6.0)
|
||||
jekyll (~> 4.2.2)
|
||||
jekyll-feed (~> 0.12)
|
||||
jekyll-redirect-from
|
||||
minima (~> 2.5)
|
||||
tzinfo (~> 1.2)
|
||||
tzinfo-data
|
||||
wdm (~> 0.1.1)
|
||||
webrick
|
||||
|
||||
BUNDLED WITH
|
||||
2.3.22
|
||||
2.3.23
|
||||
|
||||
@ -1,25 +1,47 @@
|
||||
SRCDIR := $(abspath $(lastword $(MAKEFILE_LIST))/../..)
|
||||
BIN := $(SRCDIR)/build/venv/bin
|
||||
FONTDIR := ../build/fonts
|
||||
BIN := $(SRCDIR)/build/venv/bin
|
||||
VENV := ../build/venv/bin/activate
|
||||
export PATH := $(BIN):$(PATH)
|
||||
|
||||
HTTP_SERVER_BIND_ADDR ?= 127.0.0.1
|
||||
|
||||
default:
|
||||
@echo "Please specify a target: build, serve or dist" >&2
|
||||
@echo "Please specify a target: build, serve, dist" >&2
|
||||
|
||||
build: .ruby-bundle
|
||||
rm -rf _site
|
||||
bundle exec jekyll build
|
||||
|
||||
build-archive: .ruby-bundle
|
||||
rm -rf _site-archive/inter-website/v3
|
||||
mkdir -p _site-archive/inter-website/v3
|
||||
bundle exec jekyll build --safe -d _site-archive/inter-website/v3 -b /inter-website/v3/
|
||||
|
||||
serve-archive: build-archive
|
||||
serve-http -p 8198 _site-archive
|
||||
build-tmp: .ruby-bundle
|
||||
rm -rf _site-tmp
|
||||
bundle exec jekyll build --disable-disk-cache -b /tmp/inter-v4-website/ -d _site-tmp
|
||||
|
||||
serve: .ruby-bundle
|
||||
./_scripts/serve.sh
|
||||
if [ ! -s lab/fonts ]; then \
|
||||
[ ! -s lab/fonts/fonts ] || rm lab/fonts/fonts; \
|
||||
rm -f lab/fonts && ln -fs ../../build/fonts lab/fonts; \
|
||||
fi
|
||||
@# need to delete generated content so that jekyll, being a little dumb,
|
||||
@# can manage to copy the font files into there again.
|
||||
@# Why not a symlink you ask? Jekyll traverses it and copies the content.
|
||||
@# In the past we tried to work around this by periodically removing the
|
||||
@# copied font files and re-creating the symlink, but it was a frail process.
|
||||
@# For live testing with fonts, you'll instead want to use docs/lab/serve.py
|
||||
rm -rf _site
|
||||
bundle exec jekyll serve -b / --watch \
|
||||
--config _config.yml,_config-dev.yml \
|
||||
--host $(HTTP_SERVER_BIND_ADDR) --port 3002 \
|
||||
--livereload --livereload-port 30002
|
||||
|
||||
serve-pub:
|
||||
exec $(MAKE) HTTP_SERVER_BIND_ADDR=0.0.0.0 serve
|
||||
|
||||
optimize-images:
|
||||
for f in res/*.png; do \
|
||||
optipng -quiet "$$f" & \
|
||||
done ; \
|
||||
wait
|
||||
|
||||
.ruby-bundle: Gemfile Gemfile.lock
|
||||
@if ! (command -v bundle >/dev/null && command -v jekyll >/dev/null); then \
|
||||
@ -32,37 +54,29 @@ serve: .ruby-bundle
|
||||
|
||||
# -----------------------------------------------------------------------
|
||||
|
||||
dist: fonts info
|
||||
$(BIN)/python3 ../misc/tools/patch-version.py lab/index.html
|
||||
dist: fonts info lab/index.html
|
||||
|
||||
info: _data/fontinfo.json \
|
||||
lab/glyphinfo.json \
|
||||
glyphs/metrics.json
|
||||
info: _data/fontinfo.json lab/glyphinfo.json
|
||||
|
||||
fonts:
|
||||
rm -rf font-files/Inter-* font-files/Inter.var*
|
||||
rm -rf font-files/Inter*
|
||||
mkdir -p font-files
|
||||
cp -a $(FONTDIR)/static/Inter-*.woff2 \
|
||||
$(FONTDIR)/static/Inter-*.otf \
|
||||
$(FONTDIR)/var/Inter.var.* \
|
||||
$(FONTDIR)/var/Inter-roman.var.* \
|
||||
$(FONTDIR)/var/Inter-italic.var.* \
|
||||
cp -a $(FONTDIR)/static/Inter*.woff2 \
|
||||
$(FONTDIR)/var/Inter-Variable.woff2 \
|
||||
$(FONTDIR)/var/Inter-Variable-Italic.woff2 \
|
||||
$(FONTDIR)/var/Inter-Variable.ttf \
|
||||
font-files/
|
||||
|
||||
_data/fontinfo.json: ../misc/tools/fontinfo.py font-files/Inter-Regular.otf
|
||||
$(BIN)/python3 ../misc/tools/fontinfo.py -pretty $< > _data/fontinfo.json
|
||||
lab/index.html: ../version.txt
|
||||
. $(VENV); python ../misc/tools/patch-version.py $@
|
||||
|
||||
_data/fontinfo.json: ../misc/tools/fontinfo.py
|
||||
. $(VENV); python ../misc/tools/fontinfo.py -pretty font-files/Inter-Regular.otf > _data/fontinfo.json
|
||||
|
||||
lab/glyphinfo.json: ../misc/tools/gen-glyphinfo.py \
|
||||
../build/ufo/Inter-Regular.ufo \
|
||||
../misc/UnicodeData.txt
|
||||
$(BIN)/python3 ../misc/tools/gen-glyphinfo.py \
|
||||
. $(VENV); python ../misc/tools/gen-glyphinfo.py \
|
||||
-ucd ../misc/UnicodeData.txt ../build/ufo/Inter-Regular.ufo > $@
|
||||
|
||||
glyphs/metrics.json: ../misc/tools/gen-metrics-and-svgs.py \
|
||||
../build/ufo/Inter-Regular.ufo
|
||||
$(BIN)/python3 ../misc/tools/gen-metrics-and-svgs.py ../build/ufo/Inter-Regular.ufo
|
||||
@# Note: this also patches glyphs/index.html
|
||||
|
||||
font-files/Inter-Regular.otf: fonts
|
||||
|
||||
.PHONY: default build build-archive serve serve-archive dist info fonts
|
||||
.PHONY: default build build-tmp serve serve-pub dist info fonts
|
||||
|
||||
1
docs/_config-dev.yml
Normal file
1
docs/_config-dev.yml
Normal file
@ -0,0 +1 @@
|
||||
is_development_mode: true
|
||||
@ -2,8 +2,7 @@ port: 3000
|
||||
lsi: false
|
||||
permalink: /:title
|
||||
markdown: kramdown
|
||||
# Since GH pages override this to "true", we test this value to see if we are running locally
|
||||
safe: false
|
||||
theme: null
|
||||
kramdown:
|
||||
input: GFM
|
||||
auto_ids: true
|
||||
@ -13,3 +12,10 @@ exclude:
|
||||
- Makefile
|
||||
- Gemfile
|
||||
- Gemfile.lock
|
||||
- _config-dev.yml
|
||||
plugins:
|
||||
- jekyll-redirect-from
|
||||
whitelist:
|
||||
- jekyll-redirect-from
|
||||
redirect_from:
|
||||
json: false
|
||||
|
||||
@ -1,36 +1,32 @@
|
||||
|
||||
- title: Contextual alternates
|
||||
tag: calt
|
||||
- tag: calt
|
||||
title: Contextual alternates
|
||||
description:
|
||||
This feature is usually enabled by default and causes certain characters to adjust
|
||||
themselves or be replaced depending on the surrounding context.
|
||||
Depending on the surrounding context, different glyphs are used.
|
||||
Enabled by default
|
||||
samples:
|
||||
- "3›x‹9"
|
||||
- "12›:‹34, FE›—‹X"
|
||||
- "4›.‹2"
|
||||
- "›(‹SEMI›)‹PERMANENT"
|
||||
- "SFO ›→‹ STO"
|
||||
- "IIA ›⟶‹ OGG"
|
||||
- "ARN ›⟺‹ OGG"
|
||||
- "M›@‹N m@n"
|
||||
- "Smile ›:-)‹"
|
||||
- "3›x‹9 12›:‹34 3›–‹8 ›+‹8+x"
|
||||
- "›(‹SEMI›)‹PER›[‹M›]‹ANE›{‹N›}‹T"
|
||||
- "-> --> ---> => ==> <->"
|
||||
- "S›@‹N s@n ›:-)‹ ›•‹Smile"
|
||||
|
||||
|
||||
# - title: Arrows
|
||||
# tag: calt
|
||||
# description:
|
||||
# Arrows are part of Contextual alternates.
|
||||
# samples:
|
||||
# - "-> --> --->"
|
||||
# - "<- <-- <---"
|
||||
# - "<-> <-->"
|
||||
# - "=> ==> <=="
|
||||
# - "<=> <==>"
|
||||
# footer:
|
||||
# "In addition to contextual alternates, Inter also provides some ligatures
|
||||
# like for instance specialized glyphs for enclosing combining glyphs. Examples:<br>
|
||||
# U+0041 U+20DD => A\u20DD<br>
|
||||
# U+0023 U+20DE => #\u20DE<br>"
|
||||
- tag: liga
|
||||
title: Standard Ligatures
|
||||
description: Enabled by default
|
||||
samples:
|
||||
- "Dif›f‹icult af›f‹ine ›f‹jord "
|
||||
- "›f‹i ›f‹j"
|
||||
|
||||
|
||||
- tag: dlig
|
||||
title: Discretionary Ligatures
|
||||
disable: liga
|
||||
description: Disabled by default
|
||||
samples:
|
||||
- "after affine art interface"
|
||||
- "ff ffi fft ft fi tt tf df dt ff kf kt rf"
|
||||
- "rt vf vt wf wt yf yt ›¡¿‹What›?!‹"
|
||||
|
||||
|
||||
- title: Tabular numbers
|
||||
@ -39,145 +35,135 @@
|
||||
Fixed-width numbers are useful for tabular data, where comparing
|
||||
columns across rows is desired.
|
||||
samples:
|
||||
- "1234567890"
|
||||
- "1131711› ‹"
|
||||
- "0040900› ‹"
|
||||
- "11:31,711› ‹"
|
||||
- "00:40.900› ‹"
|
||||
- "0.45, 0.91, +0.08› ‹"
|
||||
- "1.00, 9.44, −0.13› ‹"
|
||||
- "0.00, 1.13, ~7.12› ‹"
|
||||
- "0.45, 0.91. +0.08"
|
||||
- "1.00; 9.44, −0.13"
|
||||
- "0:00. 1.13; ~7.12"
|
||||
|
||||
|
||||
- title: Fractions
|
||||
tag: frac
|
||||
- tag: frac
|
||||
title: Fractions
|
||||
description:
|
||||
This feature is contextually sensitive and will convert "words" of
|
||||
numbers separated by forward slash into proper fractions.
|
||||
This feature is dynamic and allows for any fractions.
|
||||
Note that the digits used for fractions are custom-made for their
|
||||
small size, and are even made separately from the slightly larger
|
||||
Superscript and Subscript numbers.
|
||||
Convert spans of numbers & forward slash into fractions
|
||||
samples:
|
||||
- "1/3 3/4 1/5"
|
||||
- "18/29 16/5"
|
||||
- "1337/591038"
|
||||
- "1/3 5/12 0123/456789"
|
||||
- "Approximately 6/16\""
|
||||
|
||||
|
||||
- title: Case alternates
|
||||
tag: case
|
||||
- tag: case
|
||||
title: Case alternates
|
||||
description:
|
||||
Switches out some glyphs to work better with capital letters and numbers.
|
||||
Alternate glyphs that matches capital letters and numbers
|
||||
samples:
|
||||
- "›(‹Hello›)‹ ›[‹World›]‹ ›{‹9000›}‹"
|
||||
- "SCHOOL ›@‹ RUN"
|
||||
- "3 ›+‹ 9 ›=‹ 12 ›*‹ 1"
|
||||
- "›*+÷±×=≠≈•~<>≤≥‹"
|
||||
- "›→‹ ›←‹ ›⟶‹ ›⟵‹ ›−‹ ›-‹ ›–‹ ›—‹ ›:‹"
|
||||
- "A›@‹B 3 ›+‹ 9 ›≈‹ 12 ›*‹ 1 ›→‹ X"
|
||||
|
||||
|
||||
- title: Compositions
|
||||
tag: ccmp
|
||||
- tag: ccmp
|
||||
title: Compositions
|
||||
description:
|
||||
Inter provides several custom made glyphs for compositions like
|
||||
A + enclosed-combining-circle.
|
||||
Custom-made glyphs for compositions.
|
||||
Enabled by default
|
||||
samples:
|
||||
- "Figure A›\u20DD‹"
|
||||
- "Figure #›\u20DE‹"
|
||||
- "Figure 3›\u20DD‹"
|
||||
- "Figure 3›\u20DE‹"
|
||||
footer:
|
||||
This means that for instance enclosed glyphs
|
||||
works everywhere, not just in apps with correct combining character logic.
|
||||
- "›j\u200A\u0303‹ ›i\u200A\u0300‹ ›į\u200A\u0301‹ ›j\u200A\u0302‹ ›i\u200A\u0304‹"
|
||||
- "Figure ›A\u20DD #\u20DE 3\u20DD ×\u20DE‹"
|
||||
|
||||
|
||||
- title: Discretionary ligatures
|
||||
tag: dlig
|
||||
description:
|
||||
Alternate style for a few chacters. This feature is usually disabled by default.
|
||||
- tag: sups
|
||||
title: Superscript
|
||||
samples:
|
||||
- "›¡¿‹What›?!‹"
|
||||
- "›¿¡‹What›!?‹"
|
||||
- "ABC›123abc (+)−[=]‹"
|
||||
|
||||
|
||||
- title: Numerators
|
||||
tag: numr
|
||||
- tag: subs
|
||||
title: Subscript
|
||||
samples:
|
||||
- "Hello ›0123‹"
|
||||
- "ABC›123abc (+)−[=]‹"
|
||||
|
||||
|
||||
- title: Denominators
|
||||
tag: dnom
|
||||
- tag: sinf
|
||||
title: Scinetific inferiors
|
||||
description: Same as Subscript
|
||||
samples:
|
||||
- "Hello ›0123‹"
|
||||
- "H›2‹O SF›6‹ H›2‹SO›4‹"
|
||||
|
||||
|
||||
- title: Superscript
|
||||
tag: sups
|
||||
- tag: dnom
|
||||
title: Denominators
|
||||
samples:
|
||||
- "X›0123 (+)-[=]‹"
|
||||
- "X›abcdefghijklmnopqrstuvwxyz‹"
|
||||
- "ABC›1234567890‹"
|
||||
|
||||
|
||||
- title: Subscript
|
||||
tag: subs
|
||||
- tag: numr
|
||||
title: Numerators
|
||||
samples:
|
||||
- "H›0123 (+)-[=]‹"
|
||||
- "X›abcdefghijklmnopqrstuvwxyz‹"
|
||||
- "ABC›1234567890‹"
|
||||
|
||||
|
||||
- title: "Stylistic set 1: Alternate digits"
|
||||
tag: ss01
|
||||
description:
|
||||
An alternate style of digits.
|
||||
Note that individual digit styles can be cherry-picked using the cvXX
|
||||
features.
|
||||
- tag: zero
|
||||
title: Slashed zero
|
||||
samples:
|
||||
- "›0‹123"
|
||||
|
||||
|
||||
- tag: ss01
|
||||
title: "Alternate digits"
|
||||
samples:
|
||||
- "12›34‹5›6‹78›9‹0"
|
||||
- "›3469‹"
|
||||
|
||||
|
||||
- title: "Stylistic set 2: Disambiguation"
|
||||
tag: ss02
|
||||
- tag: ss02
|
||||
title: "Disambiguation"
|
||||
description:
|
||||
Alternate glyph set that increases visual difference between
|
||||
similar-looking characters.
|
||||
samples:
|
||||
- "WP›0‹ACO9XS›I‹1›0‹12O9"
|
||||
- "›Ill‹ega›l‹"
|
||||
- "βeta ›ß‹eta Busine›ß‹"
|
||||
- "›Ill‹ega›l‹ busine›ß‹ βeta"
|
||||
|
||||
|
||||
- title: "Stylistic set 3: r curves into round neighbors"
|
||||
tag: ss03
|
||||
description:
|
||||
Lower case r curved into neighboring round shapes for increased
|
||||
legibility and personality.
|
||||
- tag: ss07
|
||||
title: "Square punctuation"
|
||||
samples:
|
||||
- "Sa›r‹a"
|
||||
- "i›r‹d"
|
||||
- "Mon›r‹oe"
|
||||
- "Hello›,‹ M›ä‹stare›.!?‹"
|
||||
|
||||
|
||||
- title: Slashed zero
|
||||
tag: zero
|
||||
- tag: ss08
|
||||
title: "Square quotes"
|
||||
samples:
|
||||
- "O›0‹123"
|
||||
- "I›’‹m not, uhm ›“‹smol›”‹"
|
||||
|
||||
|
||||
- title: Character variants
|
||||
tag: cvXX
|
||||
description: "Allows cherry-picking alternate characters."
|
||||
- tag: ss03
|
||||
title: "Round quotes & comma"
|
||||
samples:
|
||||
- {feat: cv01, alt: "Alternate one", sample: "1"}
|
||||
- {feat: cv02, alt: "Open four", sample: "4"}
|
||||
- {feat: cv03, alt: "Open six", sample: "6"}
|
||||
- {feat: cv04, alt: "Open nine", sample: "9"}
|
||||
- {feat: cv05, alt: "Lower case L with tail", sample: "l ł ƚ ɫ ɬ ŀ ĺ ļ ľ ḷ ḹ ḻ ḽ"}
|
||||
- {feat: cv06, alt: "Lower case r with curved tail", sample: "r ɽ ɍ ɼ ŕ ŗ ř ȑ ȓ ṙ ṛ ṝ ṟ"}
|
||||
- {feat: cv07, alt: "Alternate German double-s", sample: "ß"}
|
||||
- {feat: cv08, alt: "Upper-case i with serif", sample: "I Ï Ḯ Ɨ Ḭ Ì Í Î Ĩ Ī Ĭ Į İ Ǐ Ȉ Ȋ Ỉ Ị Ι Ί Ϊ Ἰ Ἱ Ἲ"}
|
||||
- {feat: cv09, alt: "Flat top three", sample: "3"}
|
||||
- {feat: cv10, alt: "Capital G with spur", sample: "G Ǥ Ɠ Ĝ Ğ Ġ Ģ Ǧ Ǵ Ḡ"}
|
||||
- {feat: cv11, alt: "Single-storey a", sample: "a á ă ắ ặ ằ ẳ ẵ ǎ â ấ ậ ầ ẩ ẫ ȁ ä ǟ ȧ ạ ǡ à ả ȃ ā ą ẚ å ǻ ḁ ã"}
|
||||
- "I›’‹m not›,‹ uhm ›“‹smol›”‹"
|
||||
|
||||
|
||||
- tag: ss05
|
||||
title: "Characters in circles"
|
||||
samples:
|
||||
- "ABC123+→"
|
||||
|
||||
|
||||
- tag: ss06
|
||||
title: "Characters in squares"
|
||||
samples:
|
||||
- "ABC123+→"
|
||||
|
||||
|
||||
# - title: Character variants
|
||||
# tag: cvXX
|
||||
# description: "Allows cherry-picking alternate characters."
|
||||
# samples:
|
||||
# - {feat: cv01, alt: "Alternate one", sample: "1"}
|
||||
# - {feat: cv02, alt: "Open four", sample: "4"}
|
||||
# - {feat: cv03, alt: "Open six", sample: "6"}
|
||||
# - {feat: cv04, alt: "Open nine", sample: "9"}
|
||||
# - {feat: cv05, alt: "Lower case L with tail", sample: "l ł ƚ ɫ ɬ ŀ ĺ ļ ľ ḷ ḹ ḻ ḽ"}
|
||||
# - {feat: cv06, alt: "Lower case r with curved tail", sample: "r ɽ ɍ ɼ ŕ ŗ ř ȑ ȓ ṙ ṛ ṝ ṟ"}
|
||||
# - {feat: cv07, alt: "Alternate German double-s", sample: "ß"}
|
||||
# - {feat: cv08, alt: "Upper-case i with serif", sample: "I Ï Ḯ Ɨ Ḭ Ì Í Î Ĩ Ī Ĭ Į İ Ǐ Ȉ Ȋ Ỉ Ị Ι Ί Ϊ Ἰ Ἱ Ἲ"}
|
||||
# - {feat: cv09, alt: "Flat top three", sample: "3"}
|
||||
# - {feat: cv10, alt: "Capital G with spur", sample: "G Ǥ Ɠ Ĝ Ğ Ġ Ģ Ǧ Ǵ Ḡ"}
|
||||
# - {feat: cv11, alt: "Single-storey a", sample: "a á ă ắ ặ ằ ẳ ẵ ǎ â ấ ậ ầ ẩ ẫ ȁ ä ǟ ȧ ạ ǡ à ả ȃ ā ą ẚ å ǻ ḁ ã"}
|
||||
|
||||
|
||||
@ -8,9 +8,10 @@
|
||||
"OS/2": {
|
||||
"achVendID": "RSMS",
|
||||
"fsSelection": [
|
||||
"6: REGULAR"
|
||||
"6: REGULAR",
|
||||
"7: USE_TYPO_METRICS"
|
||||
],
|
||||
"fsSelection_raw": 192,
|
||||
"fsSelection_raw": "0b11000000",
|
||||
"fsType": {
|
||||
"bitmap_embed_only": "no",
|
||||
"no_subset": "no",
|
||||
@ -31,12 +32,12 @@
|
||||
"weightName": "Book",
|
||||
"xHeight": 4
|
||||
},
|
||||
"sCapHeight": 2048,
|
||||
"sCapHeight": 1490,
|
||||
"sFamilyClass": 0,
|
||||
"sTypoAscender": 2728,
|
||||
"sTypoDescender": -680,
|
||||
"sTypoAscender": 1984,
|
||||
"sTypoDescender": -494,
|
||||
"sTypoLineGap": 0,
|
||||
"sxHeight": 1536,
|
||||
"sxHeight": 1118,
|
||||
"ulCodePageRange1": 415,
|
||||
"ulCodePageRange2": 0,
|
||||
"ulUnicodeRange1": 3758099199,
|
||||
@ -45,104 +46,104 @@
|
||||
"ulUnicodeRange4": 0,
|
||||
"usBreakChar": 32,
|
||||
"usDefaultChar": 0,
|
||||
"usFirstCharIndex": 32,
|
||||
"usFirstCharIndex": 0,
|
||||
"usLastCharIndex": 65535,
|
||||
"usMaxContext": 12,
|
||||
"usMaxContext": 8,
|
||||
"usWeightClass": 400,
|
||||
"usWeightClassName": "Normal (Regular)",
|
||||
"usWidthClass": 5,
|
||||
"usWidthClassName": "Medium (normal)",
|
||||
"usWinAscent": 2728,
|
||||
"usWinDescent": 680,
|
||||
"usWinAscent": 1984,
|
||||
"usWinDescent": 494,
|
||||
"version": 4,
|
||||
"xAvgCharWidth": 1838,
|
||||
"yStrikeoutPosition": 922,
|
||||
"yStrikeoutSize": 192,
|
||||
"xAvgCharWidth": 1338,
|
||||
"yStrikeoutPosition": 671,
|
||||
"yStrikeoutSize": 140,
|
||||
"ySubscriptXOffset": 0,
|
||||
"ySubscriptXSize": 1830,
|
||||
"ySubscriptYOffset": 211,
|
||||
"ySubscriptYSize": 1690,
|
||||
"ySubscriptXSize": 1331,
|
||||
"ySubscriptYOffset": 154,
|
||||
"ySubscriptYSize": 1229,
|
||||
"ySuperscriptXOffset": 0,
|
||||
"ySuperscriptXSize": 1830,
|
||||
"ySuperscriptYOffset": 986,
|
||||
"ySuperscriptYSize": 1690
|
||||
"ySuperscriptXSize": 1331,
|
||||
"ySuperscriptYOffset": 717,
|
||||
"ySuperscriptYSize": 1229
|
||||
},
|
||||
"cmap": "[present but not decoded]",
|
||||
"head": {
|
||||
"checkSumAdjustment": 51273463,
|
||||
"created": 3706895026,
|
||||
"checkSumAdjustment": 2400022008,
|
||||
"created": 3776266544,
|
||||
"flags": [
|
||||
"0: Baseline at y=0",
|
||||
"1: Left sidebearing point at x=0",
|
||||
"3: Force ppem to integer values",
|
||||
"4: Instructions may alter advance width"
|
||||
"1: Left sidebearing point at x=0"
|
||||
],
|
||||
"flags_raw": 27,
|
||||
"flags_raw": 3,
|
||||
"fontDirectionHint": 2,
|
||||
"fontRevision": 3.0189971923828125,
|
||||
"fontRevision": 4.0,
|
||||
"glyphDataFormat": 0,
|
||||
"indexToLocFormat": 0,
|
||||
"lowestRecPPEM": 6,
|
||||
"lowestRecPPEM": 3,
|
||||
"macStyle": [],
|
||||
"macStyle_raw": 0,
|
||||
"magicNumber": 1594834165,
|
||||
"modified": 3706895048,
|
||||
"modified": 3776266567,
|
||||
"tableVersion": 1.0,
|
||||
"unitsPerEm": 2816,
|
||||
"xMax": 7274,
|
||||
"xMin": -2080,
|
||||
"yMax": 3072,
|
||||
"yMin": -900
|
||||
"unitsPerEm": 2048,
|
||||
"xMax": 5290,
|
||||
"xMin": -1513,
|
||||
"yMax": 2269,
|
||||
"yMin": -654
|
||||
},
|
||||
"hhea": {
|
||||
"advanceWidthMax": 7552,
|
||||
"ascent": 2728,
|
||||
"advanceWidthMax": 5492,
|
||||
"ascent": 1984,
|
||||
"caretOffset": 0,
|
||||
"caretSlopeRise": 1,
|
||||
"caretSlopeRun": 0,
|
||||
"descent": -680,
|
||||
"descent": -494,
|
||||
"lineGap": 0,
|
||||
"metricDataFormat": 0,
|
||||
"minLeftSideBearing": -2080,
|
||||
"minRightSideBearing": -2828,
|
||||
"numberOfHMetrics": 2547,
|
||||
"minLeftSideBearing": -1512,
|
||||
"minRightSideBearing": -963,
|
||||
"numberOfHMetrics": 2637,
|
||||
"tableVersion": 65536,
|
||||
"xMaxExtent": 7274
|
||||
"xMaxExtent": 5290
|
||||
},
|
||||
"hmtx": "[present but not decoded]",
|
||||
"id": "Inter-Regular:2021:0a5106e0b",
|
||||
"id": "font-files/Inter-Regular.otf",
|
||||
"maxp": "[present but not decoded]",
|
||||
"name": "Inter-Regular",
|
||||
"name": "[present but not decoded]",
|
||||
"names": {
|
||||
"#0 copyright": "Copyright 2016 The Inter Project Authors",
|
||||
"#1 familyName": "Inter",
|
||||
"#11 vendorURL": "https://rsms.me/",
|
||||
"#12 designerURL": "https://rsms.me/",
|
||||
"#13 licenseDescription": "This Font Software is licensed under the SIL Open Font License, Version 1.1. This license is available with a FAQ at: http://scripts.sil.org/OFL",
|
||||
"#14 licenseURL": "http://scripts.sil.org/OFL",
|
||||
"#2 subfamilyName": "Regular",
|
||||
"#256": "Open digits",
|
||||
"#257": "Disambiguation",
|
||||
"#258": "r curves into round neighbors",
|
||||
"#259": "Disambiguation without slashed zero",
|
||||
"#258": "Round quotes & commas",
|
||||
"#259": "Disambiguation (no slashed zero)",
|
||||
"#260": "Alternate one",
|
||||
"#261": "Open four",
|
||||
"#262": "Open six",
|
||||
"#263": "Open nine",
|
||||
"#264": "Lower-case L with tail",
|
||||
"#265": "r with curved tail",
|
||||
"#265": "Simplified u",
|
||||
"#266": "Alternate German double s",
|
||||
"#267": "Upper-case i with serif",
|
||||
"#268": "Flat-top three",
|
||||
"#269": "Captital G with spur",
|
||||
"#270": "Single-storey a",
|
||||
"copyright": "Copyright \u00a9 2020 The Inter Project Authors",
|
||||
"designer": "Rasmus Andersson",
|
||||
"designerURL": "https://rsms.me/",
|
||||
"familyName": "Inter",
|
||||
"fontId": "Inter-Regular:2021:0a5106e0b",
|
||||
"fullName": "Inter Regular",
|
||||
"licenseDescription": "This Font Software is licensed under the SIL Open Font License, Version 1.1. This license is available with a FAQ at: http://scripts.sil.org/OFL",
|
||||
"licenseURL": "http://scripts.sil.org/OFL",
|
||||
"manufacturerName": "rsms",
|
||||
"postscriptName": "Inter-Regular",
|
||||
"subfamilyName": "Regular",
|
||||
"trademark": "Inter UI and Inter is a trademark of rsms.",
|
||||
"vendorURL": "https://rsms.me/",
|
||||
"version": "Version 3.019;git-0a5106e0b"
|
||||
"#269": "Capital G with spur",
|
||||
"#270": "Single-story a",
|
||||
"#271": "Compact f",
|
||||
"#272": "Compact t",
|
||||
"#3 fontId": "4.000;git-4b01ef878;RSMS;Inter-Regular",
|
||||
"#4 fullName": "Inter Regular",
|
||||
"#5 version": "Version 4.000;git-4b01ef878",
|
||||
"#6 postscriptName": "Inter-Regular",
|
||||
"#7 trademark": "Inter UI and Inter is a trademark of rsms.",
|
||||
"#8 manufacturerName": "rsms",
|
||||
"#9 designer": "Rasmus Andersson"
|
||||
},
|
||||
"post": {
|
||||
"formatType": 3.0,
|
||||
@ -152,9 +153,9 @@
|
||||
"maxMemType42": 0,
|
||||
"minMemType1": 0,
|
||||
"minMemType42": 0,
|
||||
"underlinePosition": -464,
|
||||
"underlineThickness": 192
|
||||
"underlinePosition": -348,
|
||||
"underlineThickness": 140
|
||||
},
|
||||
"version": "3.19"
|
||||
"version": "4.0"
|
||||
}
|
||||
]
|
||||
|
||||
@ -1,22 +1,3 @@
|
||||
- category: Cyrillic
|
||||
languages:
|
||||
- Azerbaijani
|
||||
- Belarusian
|
||||
- Bosnian
|
||||
- Bulgarian
|
||||
- Chechen
|
||||
- Macedonian
|
||||
- Ossetic
|
||||
- Russian
|
||||
- Sakha
|
||||
- Serbian
|
||||
- Ukrainian
|
||||
- Uzbek
|
||||
|
||||
- category: Greek
|
||||
languages:
|
||||
- Greek
|
||||
|
||||
- category: Latin
|
||||
languages:
|
||||
- Afrikaans
|
||||
@ -153,3 +134,22 @@
|
||||
- Yoruba
|
||||
- Zarma
|
||||
- Zulu
|
||||
|
||||
- category: Greek
|
||||
languages:
|
||||
- Greek
|
||||
|
||||
- category: Cyrillic
|
||||
languages:
|
||||
- Azerbaijani
|
||||
- Belarusian
|
||||
- Bosnian
|
||||
- Bulgarian
|
||||
- Chechen
|
||||
- Macedonian
|
||||
- Ossetic
|
||||
- Russian
|
||||
- Sakha
|
||||
- Serbian
|
||||
- Ukrainian
|
||||
- Uzbek
|
||||
|
||||
@ -1,134 +0,0 @@
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
font-style: normal;
|
||||
font-weight: 100;
|
||||
font-display: swap;
|
||||
src: url("font-files/Inter-Thin.woff2?v={{font_v}}") format("woff2");
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
font-style: italic;
|
||||
font-weight: 100;
|
||||
font-display: swap;
|
||||
src: url("font-files/Inter-ThinItalic.woff2?v={{font_v}}") format("woff2");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
font-style: normal;
|
||||
font-weight: 200;
|
||||
font-display: swap;
|
||||
src: url("font-files/Inter-ExtraLight.woff2?v={{font_v}}") format("woff2");
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
font-style: italic;
|
||||
font-weight: 200;
|
||||
font-display: swap;
|
||||
src: url("font-files/Inter-ExtraLightItalic.woff2?v={{font_v}}") format("woff2");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
font-style: normal;
|
||||
font-weight: 300;
|
||||
font-display: swap;
|
||||
src: url("font-files/Inter-Light.woff2?v={{font_v}}") format("woff2");
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
font-style: italic;
|
||||
font-weight: 300;
|
||||
font-display: swap;
|
||||
src: url("font-files/Inter-LightItalic.woff2?v={{font_v}}") format("woff2");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
src: url("font-files/Inter-Regular.woff2?v={{font_v}}") format("woff2");
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
font-style: italic;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
src: url("font-files/Inter-Italic.woff2?v={{font_v}}") format("woff2");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-display: swap;
|
||||
src: url("font-files/Inter-Medium.woff2?v={{font_v}}") format("woff2");
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
font-style: italic;
|
||||
font-weight: 500;
|
||||
font-display: swap;
|
||||
src: url("font-files/Inter-MediumItalic.woff2?v={{font_v}}") format("woff2");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
font-display: swap;
|
||||
src: url("font-files/Inter-SemiBold.woff2?v={{font_v}}") format("woff2");
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
font-style: italic;
|
||||
font-weight: 600;
|
||||
font-display: swap;
|
||||
src: url("font-files/Inter-SemiBoldItalic.woff2?v={{font_v}}") format("woff2");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-display: swap;
|
||||
src: url("font-files/Inter-Bold.woff2?v={{font_v}}") format("woff2");
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
font-style: italic;
|
||||
font-weight: 700;
|
||||
font-display: swap;
|
||||
src: url("font-files/Inter-BoldItalic.woff2?v={{font_v}}") format("woff2");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
font-style: normal;
|
||||
font-weight: 800;
|
||||
font-display: swap;
|
||||
src: url("font-files/Inter-ExtraBold.woff2?v={{font_v}}") format("woff2");
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
font-style: italic;
|
||||
font-weight: 800;
|
||||
font-display: swap;
|
||||
src: url("font-files/Inter-ExtraBoldItalic.woff2?v={{font_v}}") format("woff2");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
font-style: normal;
|
||||
font-weight: 900;
|
||||
font-display: swap;
|
||||
src: url("font-files/Inter-Black.woff2?v={{font_v}}") format("woff2");
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
font-style: italic;
|
||||
font-weight: 900;
|
||||
font-display: swap;
|
||||
src: url("font-files/Inter-BlackItalic.woff2?v={{font_v}}") format("woff2");
|
||||
}
|
||||
@ -1,134 +0,0 @@
|
||||
@font-face {
|
||||
font-family: 'InterDisplay';
|
||||
font-style: normal;
|
||||
font-weight: 100;
|
||||
font-display: swap;
|
||||
src: url("font-files/InterDisplay-Thin.woff2?v={{font_v}}") format("woff2");
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'InterDisplay';
|
||||
font-style: italic;
|
||||
font-weight: 100;
|
||||
font-display: swap;
|
||||
src: url("font-files/InterDisplay-ThinItalic.woff2?v={{font_v}}") format("woff2");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'InterDisplay';
|
||||
font-style: normal;
|
||||
font-weight: 200;
|
||||
font-display: swap;
|
||||
src: url("font-files/InterDisplay-ExtraLight.woff2?v={{font_v}}") format("woff2");
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'InterDisplay';
|
||||
font-style: italic;
|
||||
font-weight: 200;
|
||||
font-display: swap;
|
||||
src: url("font-files/InterDisplay-ExtraLightItalic.woff2?v={{font_v}}") format("woff2");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'InterDisplay';
|
||||
font-style: normal;
|
||||
font-weight: 300;
|
||||
font-display: swap;
|
||||
src: url("font-files/InterDisplay-Light.woff2?v={{font_v}}") format("woff2");
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'InterDisplay';
|
||||
font-style: italic;
|
||||
font-weight: 300;
|
||||
font-display: swap;
|
||||
src: url("font-files/InterDisplay-LightItalic.woff2?v={{font_v}}") format("woff2");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'InterDisplay';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
src: url("font-files/InterDisplay-Regular.woff2?v={{font_v}}") format("woff2");
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'InterDisplay';
|
||||
font-style: italic;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
src: url("font-files/InterDisplay-Italic.woff2?v={{font_v}}") format("woff2");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'InterDisplay';
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-display: swap;
|
||||
src: url("font-files/InterDisplay-Medium.woff2?v={{font_v}}") format("woff2");
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'InterDisplay';
|
||||
font-style: italic;
|
||||
font-weight: 500;
|
||||
font-display: swap;
|
||||
src: url("font-files/InterDisplay-MediumItalic.woff2?v={{font_v}}") format("woff2");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'InterDisplay';
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
font-display: swap;
|
||||
src: url("font-files/InterDisplay-SemiBold.woff2?v={{font_v}}") format("woff2");
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'InterDisplay';
|
||||
font-style: italic;
|
||||
font-weight: 600;
|
||||
font-display: swap;
|
||||
src: url("font-files/InterDisplay-SemiBoldItalic.woff2?v={{font_v}}") format("woff2");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'InterDisplay';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
font-display: swap;
|
||||
src: url("font-files/InterDisplay-Bold.woff2?v={{font_v}}") format("woff2");
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'InterDisplay';
|
||||
font-style: italic;
|
||||
font-weight: 700;
|
||||
font-display: swap;
|
||||
src: url("font-files/InterDisplay-BoldItalic.woff2?v={{font_v}}") format("woff2");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'InterDisplay';
|
||||
font-style: normal;
|
||||
font-weight: 800;
|
||||
font-display: swap;
|
||||
src: url("font-files/InterDisplay-ExtraBold.woff2?v={{font_v}}") format("woff2");
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'InterDisplay';
|
||||
font-style: italic;
|
||||
font-weight: 800;
|
||||
font-display: swap;
|
||||
src: url("font-files/InterDisplay-ExtraBoldItalic.woff2?v={{font_v}}") format("woff2");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'InterDisplay';
|
||||
font-style: normal;
|
||||
font-weight: 900;
|
||||
font-display: swap;
|
||||
src: url("font-files/InterDisplay-Black.woff2?v={{font_v}}") format("woff2");
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'InterDisplay';
|
||||
font-style: italic;
|
||||
font-weight: 900;
|
||||
font-display: swap;
|
||||
src: url("font-files/InterDisplay-BlackItalic.woff2?v={{font_v}}") format("woff2");
|
||||
}
|
||||
@ -1,23 +0,0 @@
|
||||
{%
|
||||
if site.safe == false %}{%
|
||||
assign url_root = "/" %}{% else %}{%
|
||||
assign url_root = "/inter/" %}{% endif
|
||||
%}
|
||||
<!-- style in res/base.css -->
|
||||
<div class="charset-table">
|
||||
{% for g in site.data.glyphinfo.glyphs %}
|
||||
{% comment %}
|
||||
|
||||
Ignore empty glyphs and glyphs without unicode mapping.
|
||||
|
||||
{% endcomment %}
|
||||
{% if g[1] == 0 and g[2] %}
|
||||
<a title="/{{g[0]}} U+{{g[2]}}{%if g[3]%} ({{g[3]}}) {%endif%}"
|
||||
data-glyphname="{{g[0]}}"
|
||||
data-cp="{{g[2]}}"
|
||||
data-ucdescr="{{g[3]}}"
|
||||
href="{{url_root}}glyphs/?g={{g[0]}}"
|
||||
>&#x{{g[2]}}</a>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
@ -1,63 +0,0 @@
|
||||
{%
|
||||
|
||||
if site.safe == false %}{%
|
||||
assign url_root = "/" %}{% else %}{%
|
||||
assign url_root = "/inter/" %}{% endif %}{%
|
||||
|
||||
for file in site.static_files %}{%
|
||||
assign _path = file.path | remove_first: "/inter" %}{%
|
||||
if _path == "/res/ctxedit.js" %}{%
|
||||
assign ctxedit_js_v = file.modified_time | date: "%Y%m%d%H%M%S" %}{%
|
||||
elsif _path == "/res/ctxedit.css" %}{%
|
||||
assign ctxedit_css_v = file.modified_time | date: "%Y%m%d%H%M%S" %}{%
|
||||
endif %}{%
|
||||
endfor
|
||||
|
||||
%}
|
||||
<link rel="stylesheet" href="{{url_root}}res/ctxedit.css?v={{ ctxedit_css_v }}">
|
||||
<div id="ctxedit-ui" class="styled-inputs-neg" contenteditable="false" tabindex="1">
|
||||
<div class="wrapper">
|
||||
<div class="control popup">
|
||||
<select data-binding="style">
|
||||
<option value="thin">Thin</option>
|
||||
<option value="extra-light">Extra Light</option>
|
||||
<option value="light">Light</option>
|
||||
<option value="regular" default selected>Regular</option>
|
||||
<option value="medium">Medium</option>
|
||||
<option value="semi-bold">Semi Bold</option>
|
||||
<option value="bold">Bold</option>
|
||||
<option value="extra-bold">Extra Bold</option>
|
||||
<option value="black">Black</option>
|
||||
<option disabled>————————————</option>
|
||||
<option value="thin-italic">Thin Italic</option>
|
||||
<option value="extra-light-italic">Extra Light Italic</option>
|
||||
<option value="light-italic">Light Italic</option>
|
||||
<option value="italic">Italic</option>
|
||||
<option value="medium-italic">Medium Italic</option>
|
||||
<option value="semi-bold-italic">Semi Bold Italic</option>
|
||||
<option value="bold-italic">Bold Italic</option>
|
||||
<option value="extra-bold-italic">Extra Bold Italic</option>
|
||||
<option value="black-italic">Black Italic</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="control range">
|
||||
<img title="Size" class="icon" src="icons/font-size.svg">
|
||||
<input type="range" min="8" max="150" step="1" data-binding="size">
|
||||
</div>
|
||||
<div class="control range">
|
||||
<img title="Tracking/letter-spacing in EM" class="icon" src="icons/letter-spacing.svg">
|
||||
<input type="range" min="-0.1" max="0.1" step="0.001" data-binding="tracking">
|
||||
</div>
|
||||
<div class="control range">
|
||||
<img title="Line height" class="icon" src="icons/line-height.svg">
|
||||
<input type="range" value="1.2" min="0.7" max="2" step="0.01" data-binding="lineHeight">
|
||||
</div>
|
||||
<!-- <div class="control color">
|
||||
<input type="color" value="#111" data-binding="color">
|
||||
</div> -->
|
||||
<!-- <div class="control button features-button" title="Features..."></div> -->
|
||||
<div class="control button reset-button" title="Reset"></div>
|
||||
<div class="control button dismiss-button" title="Close editor"></div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="{{url_root}}res/ctxedit.js?v={{ ctxedit_js_v }}"></script>
|
||||
27
docs/_includes/defs.html
Normal file
27
docs/_includes/defs.html
Normal file
@ -0,0 +1,27 @@
|
||||
{%-
|
||||
assign build_version = site.time | date: "%Y%m%d%H%M%S" %}{%
|
||||
assign description = "Inter is a typeface family" %}{%
|
||||
assign release_version = site.data.fontinfo[0].version %}{%
|
||||
|
||||
capture title %}{% if page.title %}{{ page.title }} — Inter{% else %}Inter font family{% endif %}{% endcapture %}{%
|
||||
|
||||
if site.baseurl %}{%
|
||||
assign url_root = site.baseurl %}{%
|
||||
else %}{%
|
||||
assign url_root = "/inter/" %}{%
|
||||
endif %}{%
|
||||
|
||||
for file in site.static_files %}{%
|
||||
assign _path = file.path | remove_first: "/inter" %}{%
|
||||
if _path == "/res/base.css" %}{%
|
||||
assign base_css_v = file.modified_time | date: "%Y%m%d%H%M%S" %}{%
|
||||
elsif _path == "/res/favicon.png" %}{%
|
||||
assign favicon_v = file.modified_time | date: "%Y%m%d%H%M%S" %}{%
|
||||
endif %}{%
|
||||
endfor %}{%
|
||||
|
||||
capture download_url
|
||||
%}https://github.com/rsms/inter/releases/download/v{{release_version}}/Inter-{{release_version}}.zip{%
|
||||
endcapture
|
||||
|
||||
-%}
|
||||
@ -1,31 +0,0 @@
|
||||
<style>
|
||||
#eji-banner {
|
||||
position: fixed;
|
||||
left:0; right:0; top: 0;
|
||||
height:3rem;
|
||||
padding: 6rem 1rem 0 1rem;
|
||||
background:#111;
|
||||
z-index:999;
|
||||
transform:translate(0, -6rem);
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
font-size:14px;
|
||||
box-shadow: 0 1px 0 0 rgba(255,255,255,0.2);
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #eee;
|
||||
font-weight: 500;
|
||||
}
|
||||
#eji-banner:hover {
|
||||
background: #000;
|
||||
color: #fff;
|
||||
}
|
||||
:root {
|
||||
padding-top:3rem;
|
||||
}
|
||||
</style>
|
||||
<a id="eji-banner" href="https://support.eji.org/give/153413/#!/donation/checkout">
|
||||
Black Lives Matter. Support the Equal Justice Initiative.
|
||||
</a>
|
||||
@ -1,9 +0,0 @@
|
||||
{%
|
||||
|
||||
if site.safe == false %}{%
|
||||
assign url_root = "/" %}{% else %}{%
|
||||
assign url_root = "/inter/" %}{% endif %}{%
|
||||
assign font_v = site.data.fontinfo[0].version
|
||||
|
||||
%}<link rel="preload" href="{{url_root}}font-files/Inter-roman.var.woff2?v={{font_v}}" as="font" type="font/woff2" crossorigin="anonymous">
|
||||
<link rel="preload" href="{{url_root}}font-files/Inter-italic.var.woff2?v={{font_v}}" as="font" type="font/woff2" crossorigin="anonymous">
|
||||
@ -1,29 +1,5 @@
|
||||
{%
|
||||
assign build_version = site.time | date: "%Y%m%d%H%M%S" %}{%
|
||||
assign description = "Inter is a typeface family optimized for user interfaces and computer screens" %}{%
|
||||
|
||||
capture title %}{% if page.title %}{{ page.title }} — Inter{% else %}Inter font family{% endif %}{% endcapture %}{%
|
||||
|
||||
if site.safe == false %}{%
|
||||
assign url_root = "/" %}{% else %}{%
|
||||
assign url_root = "/inter/" %}{% endif %}{%
|
||||
|
||||
assign release_version = site.data.fontinfo[0].version %}{%
|
||||
|
||||
for file in site.static_files %}{%
|
||||
assign _path = file.path | remove_first: "/inter" %}{%
|
||||
if _path == "/res/base.css" %}{%
|
||||
assign base_css_v = file.modified_time | date: "%Y%m%d%H%M%S" %}{%
|
||||
elsif _path == "/res/grid.css" %}{%
|
||||
assign grid_css_v = file.modified_time | date: "%Y%m%d%H%M%S" %}{%
|
||||
elsif _path == "/res/base.js" %}{%
|
||||
assign base_js_v = file.modified_time | date: "%Y%m%d%H%M%S" %}{%
|
||||
elsif _path == "/res/favicon.png" %}{%
|
||||
assign favicon_v = file.modified_time | date: "%Y%m%d%H%M%S" %}{%
|
||||
endif %}{%
|
||||
endfor
|
||||
|
||||
%}<!DOCTYPE HTML>
|
||||
{% include defs.html -%}
|
||||
<!DOCTYPE HTML>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
@ -33,10 +9,9 @@ endfor
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<link rel="stylesheet" href="{{url_root}}inter.css?v={{ release_version }}">
|
||||
<link rel="stylesheet" href="{{url_root}}res/base.css?v={{ base_css_v }}">
|
||||
<link rel="stylesheet" href="{{url_root}}res/grid.css?v={{ grid_css_v }}">
|
||||
<link rel="stylesheet" href="https://rsms.me/res/fonts/ibm-plex-mono.css">
|
||||
<link rel="icon" type="image/png" href="{{url_root}}res/favicon.png?v={{ favicon_v }}">
|
||||
{% include preload-font-files.html %}
|
||||
<link rel="preload" href="{{url_root}}font-files/Inter-Variable.woff2?v={{release_version}}" as="font" type="font/woff2" crossorigin="anonymous">
|
||||
<link rel="preload" href="{{url_root}}font-files/Inter-Variable-Italic.woff2?v={{release_version}}" as="font" type="font/woff2" crossorigin="anonymous">
|
||||
<meta name="format-detection" content="telephone=no">
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<meta name="twitter:site" content="@rsms">
|
||||
@ -64,33 +39,29 @@ endfor
|
||||
<meta property="og:type" content="product">
|
||||
<meta property="og:locale" content="en_US">
|
||||
<meta property="og:url" content="https://rsms.me/inter{{ page.url }}">
|
||||
{% if page.url contains "/download/" -%}
|
||||
{%- if site.is_development_mode %}<!--{% endif -%}
|
||||
<meta http-equiv="refresh" content="0;url={{ download_url }}" />
|
||||
{%- if site.is_development_mode %}-->{% endif -%}
|
||||
{%- endif -%}
|
||||
{%- if page.custom_html_header -%}
|
||||
{{page.custom_html_header}}
|
||||
{%- endif %}
|
||||
</head>
|
||||
<body>
|
||||
{% if site.safe == false %}<script>
|
||||
// Allows passing "?debug" in the query string for local builds, which
|
||||
// sets "debug" on the <html> element, enabling CSS debugging.
|
||||
if (document.location.search.indexOf("debug") != -1) {
|
||||
document.documentElement.classList.add("debug")
|
||||
}
|
||||
</script>{% endif %}
|
||||
<div id="hud-notification"><div class="msg">Hello</div></div>
|
||||
<script src="{{url_root}}res/base.js?v={{ base_js_v }}"></script>
|
||||
<header><div>
|
||||
<h4><a {% if page.url == "/" %}href="#" class=scroll-reveal{% else %}href="{{url_root}}"{% endif %}>Inter</a></h4>
|
||||
<div class=menu>
|
||||
<a href="{{url_root}}#features">Features</a>
|
||||
<a href="{{url_root}}#glyphs" {% if page.url contains "/glyphs/" %}class="active"{% endif %}>Glyphs</a>
|
||||
<a href="{{url_root}}lab/" {% if page.url contains "/lab/" %}class="active"{% endif %}>Lab</a>
|
||||
<a href="{{url_root}}download/" {% if page.url contains "/download/" %}class="active"{% endif %}>Download ↓</a>
|
||||
</div>
|
||||
</div></header>
|
||||
|
||||
<div class="row menu">
|
||||
<ul class="menu">
|
||||
<li class="nav-home"><a href="{{url_root}}">Inter</a></li>
|
||||
<li class="nav-samples"><a href="{{url_root}}samples/" {% if page.url contains "/samples/" %}class="active"{% endif %}>Samples</a></li>
|
||||
<li class="nav-glyphs"><a href="{{url_root}}glyphs/" {% if page.url contains "/glyphs/" %}class="active"{% endif %}>Glyphs</a></li>
|
||||
<li class="nav-dynmetrics"><a href="{{url_root}}dynmetrics/" {% if page.url contains "/dynmetrics/" %}class="active"{% endif %}>Metrics</a></li>
|
||||
<li class="nav-lab"><a href="{{url_root}}lab/" {% if page.url contains "/lab/" %}class="active"{% endif %}>Lab</a></li>
|
||||
<!-- <li class="nav-source"><a href="https://github.com/rsms/inter/">Source</a></li> -->
|
||||
<li class="nav-download"><a href="{{url_root}}download/" {% if page.url contains "/download/" %}class="active"{% endif %}>Download ↓</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{{ content }}
|
||||
|
||||
{% comment %}{% include eji-banner.html %}{% endcomment %}
|
||||
|
||||
<footer class="row">
|
||||
<p>
|
||||
@ -98,5 +69,14 @@ endfor
|
||||
Font vendor ID: <a href="https://learn.microsoft.com/en-us/typography/vendors/#r">RSMS</a>
|
||||
</p>
|
||||
</footer>
|
||||
|
||||
|
||||
{% if site.safe == false %}<script>
|
||||
// Allows passing "?debug" in the query string for local builds, which
|
||||
// sets "debug" on the <html> element, enabling CSS debugging.
|
||||
if (document.location.search.indexOf("debug") != -1) {
|
||||
document.documentElement.classList.add("debug")
|
||||
}
|
||||
</script>{% endif %}
|
||||
</body>
|
||||
</html>
|
||||
|
||||
68
docs/_scripts/build-fontkit.js.sh
Normal file
68
docs/_scripts/build-fontkit.js.sh
Normal file
@ -0,0 +1,68 @@
|
||||
#!/bin/sh
|
||||
#
|
||||
# Usage:
|
||||
# sh build-fontkit.js.sh [<outfile>]
|
||||
# <outfile> defaults to ./fontkit-VERSION.js
|
||||
#
|
||||
# This script builds fontkit.js for a web browser as an ES module script.
|
||||
# Use the result like this:
|
||||
# <script type="module">
|
||||
# import fontkit from "./fontkit-2.0.2.js"
|
||||
# let data = await fetch("Inter-Variable.ttf").then(r => r.arrayBuffer())
|
||||
# let font = fontkit.create(new Uint8Array(data))
|
||||
# let instance = font.getVariation({wght: 600, opsz: 28})
|
||||
# console.log({font, instance})
|
||||
# </script>
|
||||
#
|
||||
# We can't use esbuild but have to use parcel since fontkit relies on
|
||||
# parcel-specific features like executing nodejs fs.readFileSync at build time.
|
||||
# So first we build with parcel then use esbuild to minify the results.
|
||||
# There might be ways to streamline the parcel build process, but after 30 minutes
|
||||
# of reading their documentation I couldn't figure it out, thus the sed hacks.
|
||||
#
|
||||
set -e
|
||||
|
||||
rm -rf /tmp/fontkit-build
|
||||
mkdir /tmp/fontkit-build
|
||||
pushd /tmp/fontkit-build >/dev/null
|
||||
|
||||
cat <<EOF > package.json
|
||||
{ "name": "fontkit-build",
|
||||
"version": "1.0.0",
|
||||
"dependencies": {
|
||||
"buffer": "^6.0.3",
|
||||
"fontkit": "^2.0.2",
|
||||
"parcel": "^2.9.3",
|
||||
"esbuild": "^0.19.2"
|
||||
}
|
||||
}
|
||||
EOF
|
||||
|
||||
npm install
|
||||
|
||||
FONTKIT_VERSION=$(node -p 'require("./node_modules/fontkit/package.json").version')
|
||||
|
||||
cat <<EOF > index.html
|
||||
<html lang="en"><script type="module">
|
||||
window.fontkit = require("fontkit")
|
||||
</script></html>
|
||||
EOF
|
||||
|
||||
./node_modules/.bin/parcel build --no-optimize --no-cache index.html
|
||||
|
||||
# strip away HTML
|
||||
sed -E 's/^\s*(:?<html lang="en"><script type="module">|<\/script><\/html>\s*\n*\s*)//' dist/index.html > dist/1.js
|
||||
sed -E 's/window.fontkit =/const fontkit =/' dist/1.js > dist/2.js
|
||||
echo 'export default fontkit' >> dist/2.js
|
||||
|
||||
popd >/dev/null
|
||||
|
||||
OUTPUT_FILE=${1:-$(cd "$(dirname "$0")/.." && pwd)/res/fontkit-$FONTKIT_VERSION.js}
|
||||
/tmp/fontkit-build/node_modules/.bin/esbuild /tmp/fontkit-build/dist/2.js \
|
||||
--minify \
|
||||
--outfile="$OUTPUT_FILE" \
|
||||
--format=esm \
|
||||
--platform=browser \
|
||||
--target=chrome100
|
||||
|
||||
rm -rf /tmp/fontkit-build
|
||||
@ -1,75 +0,0 @@
|
||||
#!/bin/sh
|
||||
set -e
|
||||
cd "$(dirname "$0")/.."
|
||||
|
||||
MISSING_UTILS=()
|
||||
if ! (which svgo >/dev/null); then
|
||||
echo 'svgo not found in $PATH' >&2
|
||||
MISSING_UTILS+=( svgo )
|
||||
fi
|
||||
|
||||
if ! (which pngcrush >/dev/null); then
|
||||
echo 'pngcrush not found in $PATH' >&2
|
||||
MISSING_UTILS+=( pngcrush )
|
||||
fi
|
||||
|
||||
if ! (which convert >/dev/null); then
|
||||
echo 'convert not found in $PATH' >&2
|
||||
MISSING_UTILS+=( imagemagick )
|
||||
fi
|
||||
|
||||
if ! [ -z $MISSING_UTILS ]; then
|
||||
if [[ "$(uname)" = *Darwin* ]]; then
|
||||
echo 'try `brew install '"${MISSING_UTILS[@]}"'` on mac'
|
||||
fi
|
||||
exit 1
|
||||
fi
|
||||
|
||||
pushd res >/dev/null
|
||||
|
||||
# crunch /docs/res/*.svg
|
||||
for f in *.svg; do
|
||||
svgo --multipass -q "$f" &
|
||||
done
|
||||
|
||||
# crunch /docs/res/icons/*.svg
|
||||
for f in icons/*.svg; do
|
||||
svgo --multipass -q "$f" &
|
||||
done
|
||||
|
||||
# crunch /docs/res/*.png
|
||||
for f in *.png; do
|
||||
TMPNAME=.$f.tmp
|
||||
(pngcrush -q "$f" "$TMPNAME" && mv -f "$TMPNAME" "$f") &
|
||||
done
|
||||
|
||||
popd >/dev/null
|
||||
|
||||
|
||||
pushd samples/img >/dev/null
|
||||
|
||||
# crunch /docs/samples/img/*.png
|
||||
for f in *.png; do
|
||||
TMPNAME=.$f.tmp
|
||||
if (echo "$f" | grep -q 'thumb'); then
|
||||
(convert "$f" -flatten -background white -colors 16 "$TMPNAME" && pngcrush -q "$TMPNAME" "$f") &
|
||||
else
|
||||
(pngcrush -q "$f" "$TMPNAME" && mv -f "$TMPNAME" "$f") &
|
||||
fi
|
||||
done
|
||||
|
||||
popd >/dev/null
|
||||
|
||||
|
||||
|
||||
pushd samples/icons >/dev/null
|
||||
|
||||
# crunch /docs/samples/icons/*.svg
|
||||
for f in *.svg; do
|
||||
svgo --multipass -q "$f" &
|
||||
done
|
||||
|
||||
popd >/dev/null
|
||||
|
||||
# wait for all background processes to exit
|
||||
wait
|
||||
@ -1,30 +0,0 @@
|
||||
#!/bin/sh
|
||||
set -e
|
||||
cd "$(dirname "$0")/.."
|
||||
|
||||
if [ "$1" = "-h" ]; then
|
||||
echo "usage: $0 [<bindaddr>]" >&2
|
||||
exit 1
|
||||
fi
|
||||
|
||||
BINDADDR=${1:-127.0.0.1}
|
||||
|
||||
if [ ! -s lab/fonts ]; then
|
||||
rm -f lab/fonts
|
||||
ln -fs ../../build/fonts lab/fonts
|
||||
fi
|
||||
|
||||
# need to delete generated content so that jekyll, being a little dumb,
|
||||
# can manage to copy the font files into there again.
|
||||
# Why not a symlink you ask? Jekyll traverses it and copies the content.
|
||||
# In the past we tried to work around this by periodically removing the
|
||||
# copied font files and re-creating the symlink, but it was a frail process.
|
||||
# For live testing with fonts, you'll instead want to use docs/lab/serve.py
|
||||
rm -rf _site
|
||||
|
||||
bundle exec jekyll serve \
|
||||
--watch \
|
||||
--host "$BINDADDR" \
|
||||
--port 3002 \
|
||||
--livereload \
|
||||
--livereload-port 30002
|
||||
@ -2,168 +2,99 @@
|
||||
layout: default
|
||||
title: Download Inter
|
||||
---
|
||||
{%
|
||||
{% include defs.html -%}
|
||||
|
||||
assign release_version = site.data.fontinfo[0].version %}{%
|
||||
<div class="row"><div><r-grid columns=8>
|
||||
|
||||
capture download_filename
|
||||
%}Inter-{{ release_version }}.zip{%
|
||||
endcapture %}{%
|
||||
|
||||
capture download_url
|
||||
%}https://github.com/rsms/inter/releases/download/v{{ release_version }}/{{ download_filename }}{%
|
||||
endcapture %}{%
|
||||
|
||||
if site.safe == false %}{%
|
||||
assign url_root = "/" %}{% else %}{%
|
||||
assign url_root = "/inter/" %}{% endif %}{%
|
||||
|
||||
for file in site.static_files %}{%
|
||||
assign _path = file.path | remove_first: "/inter" %}{%
|
||||
if _path == "/samples/index.css" %}{%
|
||||
assign index_css_v = file.modified_time | date: "%Y%m%d%H%M%S" %}{%
|
||||
elsif _path == "/res/bindings.js" %}{%
|
||||
assign bindings_js_v = file.modified_time | date: "%Y%m%d%H%M%S" %}{%
|
||||
elsif _path == "/res/graphplot.js" %}{%
|
||||
assign graphplot_js_v = file.modified_time | date: "%Y%m%d%H%M%S" %}{%
|
||||
endif %}{%
|
||||
endfor
|
||||
|
||||
%}
|
||||
<meta http-equiv="refresh" content="0;url={{ download_url }}" />
|
||||
<style type="text/css">
|
||||
body {
|
||||
background: white;
|
||||
}
|
||||
div.row.download {
|
||||
font-weight: 460;
|
||||
}
|
||||
.dim { opacity:0.4; text-decoration: none }
|
||||
.dim:hover { opacity:1 }
|
||||
.large {
|
||||
font-size: 1.2rem;
|
||||
line-height: 1.4;
|
||||
}
|
||||
form.large { zoom: 1.2 }
|
||||
.download ol {
|
||||
padding-left: 1.5em;
|
||||
margin-bottom: 1.5em;
|
||||
}
|
||||
.install-instructions {
|
||||
max-width: 40em;
|
||||
display: none;
|
||||
}
|
||||
.install-instructions.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
</style>
|
||||
<div class="row download"><div>
|
||||
<p class="large">
|
||||
Downloading Inter version {{ release_version }} ...<br>
|
||||
<a href="{{ download_url }}" class="dim">If the download is not starting automatically, click here</a>
|
||||
<r-cell span=row>
|
||||
<h1>Downloading Inter version {{ release_version }}…</h1>
|
||||
<p>
|
||||
<a href="{{download_url}}" class=dim>{{download_url}}</a>
|
||||
</p>
|
||||
</r-cell>
|
||||
|
||||
<!-- <h2>Support Inter</h2> -->
|
||||
<p class="large">
|
||||
|
||||
<r-cell span=row>
|
||||
<p class=large>
|
||||
Inter is <a href="https://github.com/rsms/inter">open source</a>.<br>
|
||||
Please consider giving us a small donation to keep this project alive!
|
||||
Please consider giving us a small donation to keep this project alive.
|
||||
</p>
|
||||
<p class="large">
|
||||
<a id="sponsor-button"
|
||||
<div class=sponsor-buttons>
|
||||
<a class=button
|
||||
title="Help Inter by becoming a sponsor and donating a coffee or two"
|
||||
href="https://github.com/sponsors/rsms">
|
||||
<span>Support Inter...</span>
|
||||
Support Inter on GitHub...
|
||||
</a>
|
||||
</p>
|
||||
<form action="https://www.paypal.com/donate" method="post" target="_top">
|
||||
<input type="hidden" name="business" value="rsms@notion.se">
|
||||
<input type="hidden" name="no_recurring" value="0">
|
||||
<input type="hidden" name="item_name" value="Inter typeface">
|
||||
<!-- <input type="hidden" name="item_number" value="Fall Cleanup Campaign"> -->
|
||||
<input type="hidden" name="currency_code" value="USD">
|
||||
<input class=button type="submit" name="submit" value="or, make a donation via PayPal...">
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<form class="large" action="https://www.paypal.com/donate" method="post" target="_top">
|
||||
<input type="hidden" name="business" value="rsms@notion.se">
|
||||
<input type="hidden" name="no_recurring" value="0">
|
||||
<input type="hidden" name="item_name" value="Inter typeface">
|
||||
<!-- <input type="hidden" name="item_number" value="Fall Cleanup Campaign"> -->
|
||||
<input type="hidden" name="currency_code" value="USD">
|
||||
<input type="submit" name="submit" value="One-time donation via PayPal...">
|
||||
</form>
|
||||
</r-cell>
|
||||
|
||||
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
|
||||
|
||||
<r-cell span=1-4 span-s=row>
|
||||
<h2>Installation instructions</h2>
|
||||
|
||||
<h2>How to install</h2>
|
||||
<p>
|
||||
Show instructions for
|
||||
<select id="install-menu">
|
||||
<option value="mac">macOS</option>
|
||||
<option value="windows">Windows</option>
|
||||
<option value="linux">Linux (Ubuntu-like)</option>
|
||||
<option value="ubuntu">Ubuntu Linux</option>
|
||||
</select>
|
||||
</p>
|
||||
|
||||
<div id="install-mac" class="install-instructions active">
|
||||
<h3>Using Font Book</h3>
|
||||
<ol>
|
||||
<li>Open the "Font Book" application</li>
|
||||
<li>In the main menu, select File, then "Add Fonts..."</li>
|
||||
<li>Find the "Inter Desktop" folder, select the folder and press the Open button</li>
|
||||
</ol>
|
||||
<h3>Using Finder</h3>
|
||||
<ol>
|
||||
<li>Copy the "Inter Desktop" folder</li>
|
||||
<li>Press ⇧⌘G in Finder and go to: ~/Library/Fonts</li>
|
||||
<li>Delete any existing "Inter" files and folders</li>
|
||||
<li>Paste the "Inter Desktop" folder</li>
|
||||
<li>Open the "Font Book" application.</li>
|
||||
<li>In the main menu, select "File" → "Add Fonts..."</li>
|
||||
<li>Select "Inter.ttc", "Inter-Variable.ttf" and "Inter-Variable-Italic.ttf"</li>
|
||||
<li>Press the "Open" button</li>
|
||||
</ol>
|
||||
<p>
|
||||
Alternatively, if you prefer not to use Font Book, you can move or
|
||||
copy the font files directly into <code>~/Library/Fonts/</code>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div id="install-windows" class="install-instructions">
|
||||
<ol>
|
||||
<li>Copy the "Inter Desktop" folder in the zip file to your Desktop</li>
|
||||
<li>Open the "Inter Desktop" folder on your Desktop</li>
|
||||
<li>Select all font files</li>
|
||||
<li>Right-click the selected files and choose "Install for all users"</li>
|
||||
<li>Open the zip file you downloaded</li>
|
||||
<li>Select "Inter.ttc", "Inter-Variable.ttf" and "Inter-Variable-Italic.ttf"</li>
|
||||
<li>Right-click the selected files, choose "Install for all users"</li>
|
||||
</ol>
|
||||
<p>
|
||||
If you have a previous installation of Inter, you should make sure
|
||||
to remove those fonts files before installing new ones. You need to
|
||||
install the font for all users, as some software requires fonts to be
|
||||
global.
|
||||
</p>
|
||||
<h3>ClearType-hinted fonts</h3>
|
||||
<p>
|
||||
Inter also comes with a version that has TrueType hints used by ClearType
|
||||
on Windows. This changes the appearance of the fonts when rendered on a
|
||||
system with ClearType enabled and can in some cases increase the legibility
|
||||
of text. However, the hints for Inter are automatically generated and are
|
||||
not always a good thing.
|
||||
</p>
|
||||
<p>
|
||||
If you do prefer to use the version with hints, use the font files in the
|
||||
"Inter Hinted for Windows/Desktop" folder instead of "Inter Desktop".
|
||||
install the font for all users, as some software requires fonts to
|
||||
be global.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div id="install-linux" class="install-instructions">
|
||||
<p>
|
||||
There are many different Linux distributions and some handle font management
|
||||
differently. These instructions are for the most common Linux distributions.
|
||||
</p>
|
||||
<div id="install-ubuntu" class="install-instructions">
|
||||
<ol>
|
||||
<li>
|
||||
Create a folder called ".fonts" in your home directory.<br>
|
||||
Example: <tt>mkdir -p ~/.fonts</tt>
|
||||
</li>
|
||||
<li>
|
||||
Copy the otf files in the "Inter Desktop" folder into your
|
||||
<tt>.fonts</tt> directory.<br>
|
||||
Example: <tt>cp "Inter Desktop"/*.otf ~/.fonts/</tt>
|
||||
<li>Create a ".fonts" directory in your home. (<code>mkdir -p ~/.fonts</code>)</li>
|
||||
<li>Copy "Inter.ttc", "Inter-Variable.ttf" and
|
||||
"Inter-Variable-Italic.ttf" into your .fonts directory
|
||||
(<code>cp Inter.ttc *.ttf ~/.fonts/</code>)
|
||||
</li>
|
||||
</ol>
|
||||
<p>
|
||||
You may have to restart apps and/or your window server session.
|
||||
</p>
|
||||
<p>
|
||||
Again, these instructions are for the most common Linux distributuons like
|
||||
Ubuntu and might not apply to you. Refer to the documentation for your
|
||||
distribution for more details on how to manage fonts in your OS.
|
||||
</p>
|
||||
<h3>Linux Q&A</h3>
|
||||
<h4>Ubuntu Linux Q&A</h4>
|
||||
<p>
|
||||
Q: I installed the fonts but they don't show up<br>
|
||||
A: Try rebuilding the font database:<br>
|
||||
@ -183,8 +114,54 @@ form.large { zoom: 1.2 }
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<h4>Variable & Static font files</h4>
|
||||
|
||||
<p>
|
||||
Inter fonts comes in two flavors: Variable and Static
|
||||
(<code>Inter-Variable*.ttf</code> and <code>Inter.ttc</code>, respectively.)
|
||||
</p><p>
|
||||
Variable fonts is a new format which allows you to choose any
|
||||
weight and optical size. Variable fonts is a relatively new
|
||||
technology and may not yet be supported by all your software.
|
||||
Inter's variable font is called "Inter Variable" to avoid
|
||||
confusion and to allow use alongside the traditional static fonts.
|
||||
</p><p>
|
||||
Static fonts works with older software and uses a fixed set of
|
||||
predefined mixtures of weight and optical size. For example
|
||||
"Inter Display Medium" is Inter with maximum optical size and a
|
||||
weight of 500.
|
||||
</p>
|
||||
|
||||
</r-cell>
|
||||
|
||||
|
||||
|
||||
<r-cell span=5-8 span-s=row>
|
||||
<h2>Web use</h2>
|
||||
<p>
|
||||
If you're making a web page, you can use the following HTML and CSS:
|
||||
</p>
|
||||
<pre><!-- HTML in your document's head -->
|
||||
<link rel="preconnect" href="https://rsms.me/">
|
||||
<link rel="stylesheet" href="https://rsms.me/inter/inter.css">
|
||||
|
||||
/* CSS */
|
||||
:root {
|
||||
font-family: Inter, sans-serif;
|
||||
font-feature-settings: 'liga' 1, 'calt' 1; /* fix for Chrome */
|
||||
}
|
||||
@supports (font-variation-settings: normal) {
|
||||
:root { font-family: InterVariable, sans-serif; }
|
||||
}</pre>
|
||||
<p>Global <abbr title="Content Delivery Network">CDN</abbr>
|
||||
sponsored by <a href="https://cloudflare.com/">Cloudflare</a></p>
|
||||
</r-cell>
|
||||
|
||||
|
||||
|
||||
</r-grid></div></div>
|
||||
|
||||
|
||||
</div></div>
|
||||
<script type="text/javascript">(function(){
|
||||
|
||||
let activeInstructions = document.querySelector('.install-instructions.active')
|
||||
@ -201,7 +178,7 @@ installMenu.onchange = ev => {
|
||||
}
|
||||
|
||||
if (/linux/i.test(navigator.userAgent)) {
|
||||
activateInstructions('linux')
|
||||
activateInstructions('ubuntu')
|
||||
} else if (/windows/i.test(navigator.userAgent)) {
|
||||
activateInstructions('windows')
|
||||
} else if (/mac os/i.test(navigator.userAgent)) {
|
||||
@ -209,3 +186,39 @@ if (/linux/i.test(navigator.userAgent)) {
|
||||
}
|
||||
|
||||
})();</script>
|
||||
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
body {
|
||||
background: white;
|
||||
}
|
||||
div.row.download {
|
||||
font-weight: 460;
|
||||
}
|
||||
.dim { opacity:0.4; text-decoration: none }
|
||||
a.dim:hover { opacity:1 }
|
||||
|
||||
.large { font-size: 1.375rem; }
|
||||
input.button { cursor: pointer }
|
||||
|
||||
.sponsor-buttons {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 1rem;
|
||||
margin-bottom: var(--spacingv);
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
@media only screen and (max-width: 720px) {
|
||||
.sponsor-buttons {
|
||||
font-size: 1.375rem;
|
||||
flex-direction: column;
|
||||
gap: 0rem;
|
||||
}
|
||||
}
|
||||
|
||||
.install-instructions { display: none; }
|
||||
.install-instructions.active { display: block; }
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
@ -1 +0,0 @@
|
||||
<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5.415 12l.822-2.335h3.64L10.698 12h1.108L8.602 3.273h-1.09L4.306 12h1.108zm2.59-7.347h.103l1.436 4.074H6.57l1.436-4.074z" fill="#000"/><path fill-rule="evenodd" clip-rule="evenodd" d="M0 14V2h1v12H0zm15 0V2h1v12h-1z" fill="#000"/></svg>
|
||||
|
Before Width: | Height: | Size: 321 B |
@ -1 +0,0 @@
|
||||
<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5.297 12l.762-2.14h3.32L10.14 12h1.015L8.22 4h-1l-2.94 8h1.016zm1.066-3l1.324-3.734h.063L9.074 9h-2.71z" fill="#000"/><path fill-rule="evenodd" clip-rule="evenodd" d="M15 2H1V1h14v1zm0 13H1v-1h14v1z" fill="#000"/></svg>
|
||||
|
Before Width: | Height: | Size: 304 B |
@ -1 +0,0 @@
|
||||
<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M0 13V3h1v10H0zm3 0V3h2v10H3zm4 0V3h3v10H7zm5 0V3h4v10h-4z" fill="#000"/></svg>
|
||||
|
Before Width: | Height: | Size: 203 B |
@ -1,278 +0,0 @@
|
||||
body {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
const {
|
||||
display: inline;
|
||||
font-size: 1.2em;
|
||||
font-style: italic;
|
||||
font-family: 'Times New Roman', Times, serif;
|
||||
}
|
||||
|
||||
sup {
|
||||
/*background:lightpink;*/
|
||||
display: inline-block;
|
||||
font-size:0.92em;
|
||||
position: relative;
|
||||
top:-0.4em;
|
||||
letter-spacing: 0.001em;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
.row.first {
|
||||
padding-bottom:1em;
|
||||
}
|
||||
|
||||
formula {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
background: white;
|
||||
border-radius: 5px;
|
||||
padding: 0 1em;
|
||||
line-height: 3em;
|
||||
height: 3em;
|
||||
overflow: hidden;
|
||||
margin-right: 1em;
|
||||
margin-bottom: 1em;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.row.white formula {
|
||||
background: #f5f5f5;
|
||||
}
|
||||
formula:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
formula.code {
|
||||
white-space: pre;
|
||||
font-family: "SFMono-Regular", Menlo, Consolas, Inconsolata, monospace;
|
||||
font-size:0.96em;
|
||||
}
|
||||
formula > * {
|
||||
margin: 0 0.2em 0 0.2em;
|
||||
}
|
||||
formula > g {
|
||||
display: inline-block;
|
||||
}
|
||||
formula > const {
|
||||
margin-bottom: 0.11em;
|
||||
}
|
||||
formula > sup {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
|
||||
.samples {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
overflow: auto;
|
||||
overflow-wrap: break-word;
|
||||
word-break: break-word;
|
||||
padding: 50px 0 0 50px; /* note: samples have 50px right margin */
|
||||
}
|
||||
.samples .sample {
|
||||
color: #111;
|
||||
flex: 0 1 auto;
|
||||
outline: none;
|
||||
margin-right: 50px;
|
||||
margin-bottom: 50px;
|
||||
min-width: 50px;
|
||||
}
|
||||
.samples .sample > * {
|
||||
display: block;
|
||||
outline: none;
|
||||
}
|
||||
.samples .sample .content {
|
||||
padding-left: 10px;
|
||||
border-left: 2px solid transparent;
|
||||
margin-left: -12px;
|
||||
}
|
||||
.samples .sample.selected .content {
|
||||
border-left-color: rgb(45, 143, 255);
|
||||
}
|
||||
.samples .sample .di {
|
||||
background-color: #ccc;
|
||||
height: 1px;
|
||||
width: 100%;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.samples .sample .di > span {
|
||||
display: block;
|
||||
background-color: #333;
|
||||
height: 100%;
|
||||
}
|
||||
.samples .sample .di.match > span {
|
||||
background-color: #0d3;
|
||||
}
|
||||
.samples .sample .di.unavailable {
|
||||
background-color: #eee;
|
||||
}
|
||||
.samples .sample .di.unavailable > span {
|
||||
visibility: hidden;
|
||||
}
|
||||
.samples .sample .info {
|
||||
display: block;
|
||||
font-size: 11px !important;
|
||||
letter-spacing: 0.01em;
|
||||
font-weight: 400;
|
||||
line-height: 11px;
|
||||
margin-bottom: 9px;
|
||||
color: #bbb;
|
||||
}
|
||||
|
||||
|
||||
.row.with-sidebar {
|
||||
padding: 0;
|
||||
}
|
||||
.row.with-sidebar > *:first-child {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
.row.with-sidebar > .sidebar {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
div.controls {
|
||||
box-sizing: border-box;
|
||||
width: 250px;
|
||||
max-width: 250px;
|
||||
flex: 0 0 auto;
|
||||
padding: 10px 0;
|
||||
border-left: 4px solid #f4f4f4;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
div.controls hr {
|
||||
border: none;
|
||||
height: 2px;
|
||||
background: #f4f4f4;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
div.controls hr.without-bottom-margin { margin-bottom: 0; }
|
||||
div.controls hr.without-top-margin { margin-top: 0; }
|
||||
div.controls hr.without-margins { margin: 0; }
|
||||
div.controls .control {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
height: 30px;
|
||||
margin: 0 16px;
|
||||
}
|
||||
div.controls > h3 {
|
||||
margin: 0 16px;
|
||||
}
|
||||
div.controls > textarea {
|
||||
border: none;
|
||||
padding:16px;
|
||||
height: 240px;
|
||||
font-family: "SFMono-Regular", Menlo, Consolas, Inconsolata, monospace;
|
||||
outline: none;
|
||||
resize: vertical;
|
||||
color: #999;
|
||||
}
|
||||
div.controls > textarea:focus {
|
||||
color: inherit;
|
||||
}
|
||||
div.controls textarea#code-output {
|
||||
height: 50px;
|
||||
}
|
||||
div.controls .control > * {
|
||||
/*max-width: 50%;*/
|
||||
flex: 1 1 auto;
|
||||
margin:0;
|
||||
margin-right: 16px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
div.controls .control > :last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
div.controls .control > select {
|
||||
min-width: 6em;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
div.controls .control > input,
|
||||
div.controls .control > select {
|
||||
width: 0;
|
||||
outline: none;
|
||||
}
|
||||
div.controls .control > input[type="number"],
|
||||
div.controls .control > input[type="text"] {
|
||||
background: none;
|
||||
border: none;
|
||||
padding: 4px 0;
|
||||
font-size: 13px;
|
||||
}
|
||||
div.controls .control > input[type="number"] {
|
||||
max-width: 60px;
|
||||
-moz-font-feature-settings: 'calt' 1, 'zero' 1, 'tnum' 1;
|
||||
-ms-font-feature-settings: 'calt' 1, 'zero' 1, 'tnum' 1;
|
||||
-o-font-feature-settings: 'calt' 1, 'zero' 1, 'tnum' 1;
|
||||
-webkit-font-feature-settings: 'calt' 1, 'zero' 1, 'tnum' 1;
|
||||
font-feature-settings: 'calt' 1, 'zero' 1, 'tnum' 1;
|
||||
}
|
||||
div.controls .control > input[type=number]::-webkit-inner-spin-button,
|
||||
div.controls .control > input[type=number]::-webkit-outer-spin-button {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
div.controls .control > input[type="number"][readonly] {
|
||||
max-width: 40px;
|
||||
}
|
||||
div.controls .control > input.wide[type="number"] {
|
||||
max-width: 100%;
|
||||
}
|
||||
div.controls .control > input[type="range"] {
|
||||
/*max-width: 80%;*/
|
||||
flex: 1 1 auto;
|
||||
display: block;
|
||||
}
|
||||
div.controls .control > img.icon,
|
||||
div.controls .control > label {
|
||||
font-family: georgia, serif;
|
||||
font-style: italic;
|
||||
line-height: 16px;
|
||||
color: black;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
flex: 0 0 auto;
|
||||
margin-right: 16px;
|
||||
opacity: 0.6;
|
||||
}
|
||||
div.controls canvas {
|
||||
height: 200px;
|
||||
}
|
||||
div.controls .when-selection {
|
||||
display: none;
|
||||
}
|
||||
div.controls.has-selected-sample .when-selection {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.row.narrow-window {
|
||||
margin-top:0;
|
||||
padding-top:0;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 565px) {
|
||||
.row.with-sidebar {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
div.controls {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.row.with-sidebar {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
/* small devices (<= iPhone 6+) */
|
||||
@media only screen and (max-device-width: 414px) {
|
||||
.samples {
|
||||
padding-left: 20px;
|
||||
padding-right: 50px;
|
||||
}
|
||||
}
|
||||
@ -1,683 +1,17 @@
|
||||
---
|
||||
layout: default
|
||||
title: Dynamic Metrics
|
||||
title: 404 not found
|
||||
custom_html_header: |
|
||||
<link rel="canonical" href="https://d.rsms.me/inter-website/v3/dynmetrics/">
|
||||
<meta name="robots" content="noindex">
|
||||
---
|
||||
{%
|
||||
|
||||
if site.safe == false %}{%
|
||||
assign url_root = "/" %}{% else %}{%
|
||||
assign url_root = "/inter/" %}{% endif %}{%
|
||||
|
||||
for file in site.static_files %}{%
|
||||
assign _path = file.path | remove_first: "/inter" %}{%
|
||||
if _path == "/dynmetrics/index.css" %}{%
|
||||
assign index_css_v = file.modified_time | date: "%Y%m%d%H%M%S" %}{%
|
||||
elsif _path == "/res/bindings.js" %}{%
|
||||
assign bindings_js_v = file.modified_time | date: "%Y%m%d%H%M%S" %}{%
|
||||
elsif _path == "/res/graphplot.js" %}{%
|
||||
assign graphplot_js_v = file.modified_time | date: "%Y%m%d%H%M%S" %}{%
|
||||
endif %}{%
|
||||
endfor
|
||||
|
||||
%}
|
||||
<link rel="stylesheet" href="index.css?v={{ index_css_v }}">
|
||||
<script src="{{url_root}}res/bindings.js?v={{ bindings_js_v }}"></script>
|
||||
<script src="{{url_root}}res/graphplot.js?v={{ graphplot_js_v }}"></script>
|
||||
|
||||
<div class="row first"><div>
|
||||
<h1>Dynamic Metrics</h1>
|
||||
<div class="row"><div>
|
||||
<h1>404 not found</h1>
|
||||
<p>
|
||||
There's of course no absolute right or wrong when it comes to expressing
|
||||
yourself with typography, but Inter Dynamic Metrics provides guidelines
|
||||
for how to best use Inter.
|
||||
You simply provide the optical font size,
|
||||
and the tracking and line height is calculated for you through the following
|
||||
formula:
|
||||
This page used to exist, but is no longer.<br>
|
||||
</p>
|
||||
<p>
|
||||
<formula>
|
||||
tracking =
|
||||
<const>a</const> + <const>b</const> ×
|
||||
<const title="Base of natural logarithm; ≈2.718">e</const><sup>(<const>c</const> × <const>z</const>)</sup>
|
||||
</formula>
|
||||
<!--formula>
|
||||
line height = <num data-binding="var-l">1.4</num> × <const>z</const>
|
||||
</formula-->
|
||||
<formula title="Values for Inter">
|
||||
<g><const title="Constant a">a</const> = <num data-binding="var-a">-0.0223</num></g>
|
||||
<g><const title="Constant b">b</const> = <num data-binding="var-b">0.185</num></g>
|
||||
<g><const title="Constant c">c</const> = <num data-binding="var-c">-0.1745</num></g>
|
||||
<g><const>z</const> = font size</g>
|
||||
</formula>
|
||||
</p>
|
||||
<p class="wide-window">
|
||||
The controls below can be used to play around with the
|
||||
<const>a</const>, <const>b</const> and <const>c</const> constants to discover
|
||||
how they affect tracking.
|
||||
</p>
|
||||
<p class="narrow-window">
|
||||
<small>View this on a larger screen to enable interactive control.</small>
|
||||
You can visit an archived version of the old website:
|
||||
<a href="https://d.rsms.me/inter-website/v3/dynmetrics/">https://d.rsms.me/inter-website/v3/dynmetrics/</a>
|
||||
</p>
|
||||
</div></div>
|
||||
|
||||
<div class="white full-width row with-sidebar">
|
||||
|
||||
<div class="samples">
|
||||
<p class="sample">
|
||||
<span class="di"><span></span></span>
|
||||
<span class="info"
|
||||
title="size, tracking, (ideal tracking) — progress bar shows distance from ideal"
|
||||
>15 0.0 ( 0.0 )</span>
|
||||
<span contenteditable spellcheck="false" class="content">
|
||||
Such a riot of sea and wind strews the whole extent of beach with whatever has been lost or thrown overboard, or torn out of sunken ships. Many a man has made a good week’s work in a single day by what he has found while walking along the Beach when the surf was down.
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="sidebar controls">
|
||||
|
||||
<div class="control">
|
||||
<img title="Style" class="icon" src="icons/style.svg">
|
||||
<select data-binding="style">
|
||||
<option value="thin">Thin</option>
|
||||
<option value="extra-light">Extra Light</option>
|
||||
<option value="light">Light</option>
|
||||
<option value="regular" default selected>Regular</option>
|
||||
<option value="medium">Medium</option>
|
||||
<option value="semi-bold">Semi Bold</option>
|
||||
<option value="bold">Bold</option>
|
||||
<option value="extra-bold">Extra Bold</option>
|
||||
<option value="black">Black</option>
|
||||
<option disabled>————————————</option>
|
||||
<option value="thin-italic">Thin Italic</option>
|
||||
<option value="extra-light-italic">Extra Light Italic</option>
|
||||
<option value="light-italic">Light Italic</option>
|
||||
<option value="italic">Italic</option>
|
||||
<option value="medium-italic">Medium Italic</option>
|
||||
<option value="semi-bold-italic">Semi Bold Italic</option>
|
||||
<option value="bold-italic">Bold Italic</option>
|
||||
<option value="extra-bold-italic">Extra Bold Italic</option>
|
||||
<option value="black-italic">Black Italic</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="control">
|
||||
<img title="Base tracking" class="icon" src="icons/letter-spacing.svg">
|
||||
<input type="range" min="-0.05" max="0.06" step="0.001" data-binding="base-tracking">
|
||||
<input type="number" min="-0.15" max="1" step="0.001" data-binding="base-tracking">
|
||||
</div>
|
||||
<div class="control">
|
||||
<img title="Line height" class="icon" src="icons/line-height.svg">
|
||||
<input type="range" min="1" max="2" step="0.01" data-binding="var-l">
|
||||
<input type="number" min="1" max="2" step="0.01" data-binding="var-l">
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="control">
|
||||
<label title="Constant a">a</label>
|
||||
<input type="range" min="-0.05" max="0" step="0.001" data-binding="var-a">
|
||||
<input type="number" min="-0.05" max="0" step="0.0001" data-binding="var-a">
|
||||
</div>
|
||||
<div class="control">
|
||||
<label title="Constant b">b</label>
|
||||
<input type="range" min="0" max="1" step="0.01" data-binding="var-b">
|
||||
<input type="number" min="0" max="1" step="0.001" data-binding="var-b">
|
||||
</div>
|
||||
<div class="control">
|
||||
<label title="Constant c">c</label>
|
||||
<input type="range" min="-1" max="0" step="0.01" data-binding="var-c">
|
||||
<input type="number" min="-1" max="0" step="0.001" data-binding="var-c">
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="control">
|
||||
<label title="Number of ideal matches">ni</label>
|
||||
<input title="Number of ideal matches" type="number" readonly data-binding="ideal-count">
|
||||
<label title="Distance from ideal">di</label>
|
||||
<input title="Distance from ideal" type="number" class="wide" readonly data-binding="ideal-distance">
|
||||
</div>
|
||||
|
||||
<hr class="without-bottom-margin">
|
||||
|
||||
<canvas class="graphplot">Canvas not Supported</canvas>
|
||||
|
||||
<hr class="when-selection without-top-margin">
|
||||
<h3 class="when-selection">CSS</h3>
|
||||
<textarea class="when-selection" readonly id="code-output"></textarea>
|
||||
|
||||
<hr class="without-top-margin">
|
||||
<h3>Ideal values</h3>
|
||||
<textarea id="ideal-values"></textarea>
|
||||
<hr class="without-top-margin">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<script type="text/javascript">(function(){
|
||||
|
||||
// internal variables that are user-controllable, but are not part of
|
||||
// Dynamic Metrics
|
||||
var baseTracking = 0
|
||||
var weightClass = 400
|
||||
|
||||
function round(num, prec) {
|
||||
return parseFloat(num.toFixed(prec))
|
||||
}
|
||||
|
||||
// Ideal values designed one by one, by hand.
|
||||
// font size => tracking
|
||||
var idealValues = {}
|
||||
var idealValuesList = []
|
||||
var idealValuesTextArea = $('textarea#ideal-values')
|
||||
|
||||
function setIdealValues(valueMap) {
|
||||
idealValues = valueMap
|
||||
idealValuesList = []
|
||||
Object.keys(idealValues).forEach(function(fontSize) {
|
||||
idealValuesList.push([fontSize, idealValues[fontSize]])
|
||||
})
|
||||
if (idealValuesTextArea.value == '') {
|
||||
idealValuesTextArea.value = idealValuesList.map(function(t){
|
||||
return t[0] + '\t' + t[1]
|
||||
}).join('\n')
|
||||
}
|
||||
}
|
||||
|
||||
function parseValues(s) {
|
||||
var values = {}
|
||||
s = s.replace(/^[\s\r\t\n]+|[\s\r\t\n]+$/g, '') // trim whitespace
|
||||
s.split(/\s*\r?\n\s*/).map(function(line) {
|
||||
var t = line.split(/\s+/)
|
||||
if (t.length == 2) {
|
||||
t[0] = parseInt(t[0])
|
||||
t[1] = parseFloat(t[1])
|
||||
values[t[0]] = t[1]
|
||||
}
|
||||
})
|
||||
return values
|
||||
}
|
||||
|
||||
setIdealValues({
|
||||
// // 2018
|
||||
// 6: 0.021,
|
||||
// 7: 0.017,
|
||||
// 8: 0.013,
|
||||
// 9: 0.01,
|
||||
// 10: 0.007,
|
||||
// 11: 0.005,
|
||||
// 12: 0.002,
|
||||
// 13: 0,
|
||||
// 14: -0.002,
|
||||
// 15: -0.004,
|
||||
// 16: -0.005,
|
||||
// 17: -0.007,
|
||||
// 18: -0.008,
|
||||
// 20: -0.01,
|
||||
// 24: -0.013,
|
||||
// 30: -0.016,
|
||||
// 40: -0.02,
|
||||
// 80: -0.02,
|
||||
|
||||
// 2019-02-02
|
||||
// 6: 0.066,
|
||||
// 7: 0.05,
|
||||
// 8: 0.036,
|
||||
// 9: 0.025,
|
||||
// 10: 0.015,
|
||||
// 11: 0.007,
|
||||
// 12: 0,
|
||||
// 13: -0.005,
|
||||
// 14: -0.01,
|
||||
// 15: -0.014,
|
||||
// 16: -0.017,
|
||||
// 17: -0.02,
|
||||
// 18: -0.022,
|
||||
// 20: -0.026,
|
||||
// 24: -0.03,
|
||||
// 30: -0.033,
|
||||
// 40: -0.034,
|
||||
// 80: -0.034,
|
||||
|
||||
// // 2019-02-06
|
||||
// 6: 0.04,
|
||||
// 7: 0.032,
|
||||
// 8: 0.024,
|
||||
// 9: 0.017,
|
||||
// 10: 0.01,
|
||||
// 11: 0.005,
|
||||
// 12: 0,
|
||||
// 13: -0.004,
|
||||
// 14: -0.008,
|
||||
// 15: -0.011,
|
||||
// 16: -0.014,
|
||||
// 17: -0.017,
|
||||
// 18: -0.019,
|
||||
// 20: -0.023,
|
||||
// 24: -0.029,
|
||||
// 30: -0.034,
|
||||
// 40: -0.037,
|
||||
// 80: -0.038,
|
||||
|
||||
// 2019-02-07
|
||||
6: 0.043,
|
||||
7: 0.032,
|
||||
8: 0.024,
|
||||
9: 0.016,
|
||||
10: 0.01,
|
||||
11: 0.005,
|
||||
12: 0,
|
||||
13: -0.0025,
|
||||
14: -0.006,
|
||||
15: -0.009,
|
||||
16: -0.011,
|
||||
17: -0.013,
|
||||
18: -0.014,
|
||||
20: -0.017,
|
||||
24: -0.019,
|
||||
30: -0.021,
|
||||
40: -0.022,
|
||||
80: -0.022,
|
||||
})
|
||||
|
||||
|
||||
// Variables for constants involved in Dynamic Metrics
|
||||
|
||||
// var a = -0.012, b = 0.23, c = -0.21; // di=0.002514 on set-2018-02-18
|
||||
// var a = -0.013, b = 0.251, c = -0.222 // di=0.001742 on set-2018-02-18
|
||||
// var a = -0.015, b = 0.283, c = -0.23; // di=0.00221 on set-2018-02-18
|
||||
// var a = -0.0149, b = 0.298, c = -0.23; // di=0.000484 on set-2018-02-19
|
||||
// var a = -0.018, b = 0.21, c = -0.18; // di=0.000532 on set-2018-02-20
|
||||
// var a = -0.017, b = 0.202, c = -0.175; // 2018-09-28
|
||||
// var a = -0.02, b = 0.0755, c = -0.102 // 2019-02-02
|
||||
// var a = -0.038, b = 0.161, c = -0.12 // 2019-02-06
|
||||
var a = -0.0223, b = 0.185, c = -0.1745 // 2019-02-07
|
||||
|
||||
|
||||
var l = 1.4
|
||||
|
||||
|
||||
// _InterDynamicTracking is a version of InterDynamicTracking that
|
||||
// uses some global variables that are adjustable.
|
||||
//
|
||||
function _InterDynamicTracking(fontSize, weightClass) {
|
||||
// Note: weightClass is currently unused
|
||||
//
|
||||
// y = -0.01021241 + 0.3720623 * e ^ (-0.2808687 * x)
|
||||
// [6-35] 0.05877 .. -0.0101309 (13==0; stops growing around 30-35)
|
||||
// See https://gist.github.com/rsms/8efdbca5f8145a584ed08a7c3d6e5788
|
||||
//
|
||||
return a + b * Math.pow(Math.E, c * fontSize)
|
||||
}
|
||||
|
||||
|
||||
function InterDynamicLineHeight(fontSize, weightClass) {
|
||||
return Math.round(fontSize * l)
|
||||
}
|
||||
|
||||
|
||||
var NPOS = Number.MAX_SAFE_INTEGER
|
||||
|
||||
function Sample(fontSize) {
|
||||
this.rootEl = sampleTemplate.cloneNode(true)
|
||||
this.infoEl = $('.info', this.rootEl)
|
||||
this.contentEl = $('.content', this.rootEl)
|
||||
this.diEl = $('.di', this.rootEl)
|
||||
this.diEl.classList.add('unavailable')
|
||||
this.style = this.rootEl.style
|
||||
this.maxBoxWidth = 0
|
||||
this.fontSize = 0
|
||||
this.tracking = 0
|
||||
this.lineHeight = 0
|
||||
this.idealTracking = NPOS
|
||||
this.matchesIdeal = false
|
||||
this.setFontSize(fontSize)
|
||||
this.render()
|
||||
|
||||
// listen for focus events on the editable content
|
||||
var s = this
|
||||
this.contentEl.addEventListener(
|
||||
'focus',
|
||||
function(){ s.onReceivedFocus() },
|
||||
{passive:true, capture:false}
|
||||
)
|
||||
this.contentEl.addEventListener(
|
||||
'blur',
|
||||
function(){ s.onLostFocus() },
|
||||
{passive:true, capture:false}
|
||||
)
|
||||
}
|
||||
|
||||
Sample.prototype.onReceivedFocus = function() {}
|
||||
Sample.prototype.onLostFocus = function() {}
|
||||
|
||||
Sample.prototype.idealDistance = function(fontSize) {
|
||||
// returns the distance from the ideal (or NPOS if no "ideal" data available)
|
||||
if (this.idealTracking == NPOS) {
|
||||
return NPOS
|
||||
}
|
||||
return (
|
||||
Math.max(this.tracking, this.idealTracking) -
|
||||
Math.min(this.tracking, this.idealTracking)
|
||||
)
|
||||
}
|
||||
|
||||
Sample.prototype.setFontSize = function(fontSize) {
|
||||
this.fontSize = fontSize
|
||||
this.tracking = baseTracking + _InterDynamicTracking(fontSize, weightClass)
|
||||
this.lineHeight = InterDynamicLineHeight(fontSize, weightClass)
|
||||
this.maxBoxWidth = Math.round(fontSize * (this.tracking + 1) * 25)
|
||||
|
||||
var idealTracking = idealValues[this.fontSize]
|
||||
if (idealTracking === undefined) {
|
||||
if (this.idealTracking != NPOS) {
|
||||
this.diEl.classList.add('unavailable')
|
||||
}
|
||||
this.idealTracking = NPOS
|
||||
this.matchesIdeal = false
|
||||
} else {
|
||||
if (this.idealTracking == NPOS) {
|
||||
this.diEl.classList.remove('unavailable')
|
||||
}
|
||||
this.idealTracking = idealTracking
|
||||
// match to a precision of 3
|
||||
this.matchesIdeal = this.tracking.toFixed(3) == idealTracking.toFixed(3)
|
||||
var di = 1
|
||||
if (this.matchesIdeal) {
|
||||
this.diEl.classList.add('match')
|
||||
} else {
|
||||
this.diEl.classList.remove('match')
|
||||
di = 1 - Math.min(1, this.idealDistance() * 50)
|
||||
}
|
||||
this.diEl.firstChild.style.width = (di * this.maxBoxWidth) + 'px'
|
||||
}
|
||||
}
|
||||
|
||||
Sample.prototype.cssProperties = function() {
|
||||
return [
|
||||
['font-size', round(this.fontSize, 3) + 'px'],
|
||||
['letter-spacing', round(this.tracking, 3) + 'em'],
|
||||
['line-height', round(this.lineHeight, 3) + 'px'],
|
||||
]
|
||||
}
|
||||
|
||||
Sample.prototype.setText = function(text) {
|
||||
this.contentEl.innerText = text
|
||||
this.render()
|
||||
}
|
||||
|
||||
Sample.prototype.render = function() {
|
||||
this.style.fontSize = this.fontSize + 'px'
|
||||
this.style.letterSpacing = this.tracking + 'em'
|
||||
this.style.lineHeight = this.lineHeight + 'px'
|
||||
|
||||
var SP = '\u00A0\u00A0\u00A0'
|
||||
this.infoEl.innerText = (
|
||||
this.fontSize +
|
||||
SP + this.tracking.toFixed(3) +
|
||||
// SP + this.lineHeight.toFixed(3) +
|
||||
(
|
||||
this.idealTracking != NPOS ? (
|
||||
SP + '( ' + this.idealTracking +
|
||||
(this.matchesIdeal ? ' \u2713' : '') +
|
||||
' )'
|
||||
) : ''
|
||||
)
|
||||
)
|
||||
|
||||
this.style.maxWidth = this.maxBoxWidth + 'px'
|
||||
}
|
||||
|
||||
|
||||
var bindings = new Bindings()
|
||||
var samplesEl = $('.samples')
|
||||
var sampleTemplate
|
||||
var samples = [] // Sample[]
|
||||
var focusedSample = null // Sample | null
|
||||
var graph = new GraphPlot($('canvas.graphplot'))
|
||||
graph.setOrigin(-0.2, 0.8)
|
||||
graph.setScale(0.049, 5)
|
||||
|
||||
function addChildren(targetNode, children) {
|
||||
targetNode.style.visibility = 'hidden'
|
||||
var i = 0;
|
||||
for (; i < children.length; i++) {
|
||||
targetNode.appendChild(children[i])
|
||||
}
|
||||
targetNode.style.visibility = null
|
||||
}
|
||||
|
||||
function initSamples() {
|
||||
sampleTemplate = $('.sample', samplesEl)
|
||||
samplesEl.removeChild(sampleTemplate)
|
||||
|
||||
// small and medium sizes
|
||||
var i, fontSize = 6, endFontSize = 16
|
||||
for (; fontSize <= endFontSize; fontSize++) {
|
||||
samples.push(new Sample(fontSize))
|
||||
}
|
||||
|
||||
// a few select large samples
|
||||
samples.push(new Sample(17))
|
||||
samples.push(new Sample(18))
|
||||
samples.push(new Sample(20))
|
||||
samples.push(new Sample(24))
|
||||
samples.push(new Sample(30))
|
||||
samples.push(new Sample(40))
|
||||
samples.push(new Sample(80))
|
||||
|
||||
// connect focus events
|
||||
var onSampleReceivedFocus = function() { setSelectedSample(this) }
|
||||
samples.forEach(function(s) {
|
||||
s.onReceivedFocus = onSampleReceivedFocus
|
||||
})
|
||||
|
||||
// add to dom in one go
|
||||
addChildren(samplesEl, samples.map(function(s) { return s.rootEl }))
|
||||
}
|
||||
|
||||
function setSelectedSample(sample) {
|
||||
if (focusedSample !== sample) {
|
||||
if (focusedSample) {
|
||||
focusedSample.rootEl.classList.remove('selected')
|
||||
}
|
||||
if (sample) {
|
||||
sample.rootEl.classList.add('selected')
|
||||
}
|
||||
focusedSample = sample
|
||||
updateSelection()
|
||||
}
|
||||
}
|
||||
|
||||
function updateSample(sample) {
|
||||
sample.setFontSize(sample.fontSize) // updates derived values
|
||||
sample.render()
|
||||
}
|
||||
|
||||
function updateSamples() {
|
||||
samples.forEach(updateSample)
|
||||
updateIdealMatches()
|
||||
updateGraphPlot()
|
||||
updateCodeView()
|
||||
}
|
||||
|
||||
function updateIdealMatches() {
|
||||
// ideal-distance
|
||||
var idealCount = 0
|
||||
var distance = 0
|
||||
var ndistances = 0
|
||||
samples.forEach(function(sample) {
|
||||
if (sample.matchesIdeal) {
|
||||
idealCount++
|
||||
}
|
||||
var di = sample.idealDistance()
|
||||
if (di != NPOS) {
|
||||
distance += di
|
||||
ndistances++
|
||||
}
|
||||
})
|
||||
|
||||
distance = distance / ndistances
|
||||
|
||||
bindings.setValue('ideal-distance', distance.toFixed(6))
|
||||
bindings.setValue('ideal-count', idealCount)
|
||||
}
|
||||
|
||||
function updateGraphPlot() {
|
||||
graph.clear()
|
||||
graph.plotLine(idealValuesList, '#0d3')
|
||||
graph.plotf(
|
||||
x => _InterDynamicTracking(x, weightClass),
|
||||
'rgba(0, 0, 0, 0.5)'
|
||||
)
|
||||
if (focusedSample) {
|
||||
var graphedFontSize = Math.min(24, focusedSample.fontSize) // clamp to [-inf,24]
|
||||
graph.plotPoints([
|
||||
[graphedFontSize, focusedSample.tracking]
|
||||
], 'rgb(45, 143, 255)')
|
||||
}
|
||||
}
|
||||
|
||||
var codeOutput = $('#code-output')
|
||||
codeOutput.addEventListener('focus', function(ev) {
|
||||
ev.preventDefault()
|
||||
ev.stopPropagation()
|
||||
codeOutput.select()
|
||||
}, {passive:false,capture:true})
|
||||
|
||||
codeOutput.addEventListener('pointerdown', function(ev) {
|
||||
// TODO: don't do this if codeOutput is focused
|
||||
ev.preventDefault()
|
||||
ev.stopPropagation()
|
||||
codeOutput.select()
|
||||
document.execCommand("copy")
|
||||
HUDNotification.show('Copied to clipboard')
|
||||
}, {passive:false,capture:true})
|
||||
|
||||
function updateCodeView() {
|
||||
var s = ''
|
||||
if (focusedSample) {
|
||||
var props = focusedSample.cssProperties()
|
||||
props.forEach(function(prop, i) {
|
||||
var name = prop[0], value = prop[1]
|
||||
s += name + ': ' + value + ';'
|
||||
if (i != props.length-1) {
|
||||
s += '\n'
|
||||
}
|
||||
})
|
||||
}
|
||||
codeOutput.value = s
|
||||
}
|
||||
|
||||
function updateSelection() {
|
||||
var controlsEl = $('.controls')
|
||||
if (focusedSample) {
|
||||
controlsEl.classList.add('has-selected-sample')
|
||||
} else {
|
||||
controlsEl.classList.remove('has-selected-sample')
|
||||
}
|
||||
|
||||
updateGraphPlot()
|
||||
updateCodeView()
|
||||
}
|
||||
|
||||
|
||||
bindings.configure('base-tracking', 0, 'float', function (tracking) {
|
||||
baseTracking = tracking
|
||||
updateSamples()
|
||||
})
|
||||
|
||||
bindings.configure('var-a', a, 'float', function (v) {
|
||||
a = v
|
||||
updateSamples()
|
||||
})
|
||||
|
||||
bindings.configure('var-b', b, 'float', function (v) {
|
||||
b = v
|
||||
updateSamples()
|
||||
})
|
||||
|
||||
bindings.configure('var-c', c, 'float', function (v) {
|
||||
c = v
|
||||
updateSamples()
|
||||
})
|
||||
|
||||
bindings.configure('var-l', l, 'float', function (v) {
|
||||
l = v
|
||||
updateSamples()
|
||||
})
|
||||
|
||||
bindings.configure('ideal-count', 0, 'int', function (v) {})
|
||||
bindings.configure('ideal-distance', 0, 'float', function (v) {})
|
||||
|
||||
bindings.configure('style', null, null, function (style) {
|
||||
var cl = samplesEl.classList
|
||||
cl.remove('font-style-regular')
|
||||
cl.remove('font-style-italic')
|
||||
cl.remove('font-style-medium')
|
||||
cl.remove('font-style-medium-italic')
|
||||
cl.remove('font-style-semi-bold')
|
||||
cl.remove('font-style-semi-bold-italic')
|
||||
cl.remove('font-style-bold')
|
||||
cl.remove('font-style-bold-italic')
|
||||
cl.remove('font-style-extra-bold')
|
||||
cl.remove('font-style-extra-bold-italic')
|
||||
cl.remove('font-style-black')
|
||||
cl.remove('font-style-black-italic')
|
||||
cl.add('font-style-' + style)
|
||||
weightClass = (
|
||||
style.indexOf('black') != -1 ? 900 :
|
||||
style.indexOf('bold') != -1 ? 700 :
|
||||
style.indexOf('medium') != -1 ? 500 :
|
||||
400
|
||||
)
|
||||
updateSamples()
|
||||
})
|
||||
|
||||
|
||||
bindings.bindAllInputs('[data-binding]')
|
||||
|
||||
// double-click base tracking to reset
|
||||
$('input[type="range"][data-binding="base-tracking"]').addEventListener(
|
||||
'dblclick',
|
||||
function(ev) { bindings.setValue('base-tracking', 0) }
|
||||
)
|
||||
|
||||
;[
|
||||
['var-a',a],
|
||||
['var-b',b],
|
||||
['var-c',c],
|
||||
['var-l',l],
|
||||
['base-tracking', 0]
|
||||
].forEach(p => {
|
||||
let bindname = p[0], defval = p[1]
|
||||
$$('input[type="range"][data-binding="'+bindname+'"]').forEach(e => {
|
||||
e.addEventListener('dblclick', ev =>
|
||||
bindings.setValue(bindname, defval))
|
||||
})
|
||||
})
|
||||
|
||||
// allow editing of ideal values
|
||||
idealValuesTextArea.addEventListener('input', function(ev) {
|
||||
setIdealValues(parseValues(idealValuesTextArea.value))
|
||||
updateSamples()
|
||||
})
|
||||
|
||||
// listen for clicks onto "background", to deselect any selected sample
|
||||
document.body.addEventListener('pointerdown', function(ev){
|
||||
if (
|
||||
ev.target === document.body ||
|
||||
ev.target === samplesEl ||
|
||||
ev.target.classList && ev.target.classList.contains('row')
|
||||
) {
|
||||
setSelectedSample(null)
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
// start
|
||||
initSamples()
|
||||
updateSamples()
|
||||
|
||||
})();</script>
|
||||
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
BIN
docs/font-files/Inter-Variable-Italic.woff2
Normal file
BIN
docs/font-files/Inter-Variable-Italic.woff2
Normal file
Binary file not shown.
BIN
docs/font-files/Inter-Variable.ttf
Normal file
BIN
docs/font-files/Inter-Variable.ttf
Normal file
Binary file not shown.
BIN
docs/font-files/Inter-Variable.woff2
Normal file
BIN
docs/font-files/Inter-Variable.woff2
Normal file
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user