new v4 website
This commit is contained in:
Rasmus Andersson
parent
c2452dee3a
commit
2f9a256e6e
274 changed files with 6316 additions and 330038 deletions
13
docs/Gemfile
13
docs/Gemfile
|
|
@ -7,15 +7,16 @@ source "https://rubygems.org"
|
||||||
#
|
#
|
||||||
# This will help ensure the proper Jekyll version is running.
|
# This will help ensure the proper Jekyll version is running.
|
||||||
# Happy Jekylling!
|
# Happy Jekylling!
|
||||||
gem "jekyll", "~> 4.2.2"
|
#gem "jekyll", "~> 4.2.2"
|
||||||
# This is the default theme for new Jekyll sites. You may change this to anything you like.
|
# This is the default theme for new Jekyll sites.
|
||||||
gem "minima", "~> 2.5"
|
# 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
|
# If you want to use GitHub Pages, remove the "gem "jekyll"" above and
|
||||||
# uncomment the line below. To upgrade, run `bundle update github-pages`.
|
# 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!
|
# If you have any plugins, put them here!
|
||||||
group :jekyll_plugins do
|
group :jekyll_plugins do
|
||||||
gem "jekyll-feed", "~> 0.12"
|
gem "jekyll-redirect-from"
|
||||||
end
|
end
|
||||||
|
|
||||||
# Windows and JRuby does not include zoneinfo files, so bundle the tzinfo-data gem
|
# 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.
|
# do not have a Java counterpart.
|
||||||
gem "http_parser.rb", "~> 0.6.0", :platforms => [:jruby]
|
gem "http_parser.rb", "~> 0.6.0", :platforms => [:jruby]
|
||||||
|
|
||||||
gem "jekyll-redirect-from"
|
|
||||||
|
|
||||||
gem "webrick"
|
gem "webrick"
|
||||||
|
|
|
||||||
|
|
@ -1,86 +1,265 @@
|
||||||
GEM
|
GEM
|
||||||
remote: https://rubygems.org/
|
remote: https://rubygems.org/
|
||||||
specs:
|
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)
|
public_suffix (>= 2.0.2, < 6.0)
|
||||||
|
coffee-script (2.4.1)
|
||||||
|
coffee-script-source
|
||||||
|
execjs
|
||||||
|
coffee-script-source (1.11.1)
|
||||||
colorator (1.1.0)
|
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)
|
em-websocket (0.5.3)
|
||||||
eventmachine (>= 0.12.9)
|
eventmachine (>= 0.12.9)
|
||||||
http_parser.rb (~> 0)
|
http_parser.rb (~> 0)
|
||||||
|
ethon (0.16.0)
|
||||||
|
ffi (>= 1.15.0)
|
||||||
eventmachine (1.2.7)
|
eventmachine (1.2.7)
|
||||||
|
execjs (2.9.0)
|
||||||
|
faraday (2.7.10)
|
||||||
|
faraday-net_http (>= 2.0, < 3.1)
|
||||||
|
ruby2_keywords (>= 0.0.4)
|
||||||
|
faraday-net_http (3.0.2)
|
||||||
ffi (1.15.5)
|
ffi (1.15.5)
|
||||||
forwardable-extended (2.6.0)
|
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)
|
http_parser.rb (0.8.0)
|
||||||
i18n (1.12.0)
|
i18n (1.14.1)
|
||||||
concurrent-ruby (~> 1.0)
|
concurrent-ruby (~> 1.0)
|
||||||
jekyll (4.2.2)
|
jekyll (3.9.3)
|
||||||
addressable (~> 2.4)
|
addressable (~> 2.4)
|
||||||
colorator (~> 1.0)
|
colorator (~> 1.0)
|
||||||
em-websocket (~> 0.5)
|
em-websocket (~> 0.5)
|
||||||
i18n (~> 1.0)
|
i18n (>= 0.7, < 2)
|
||||||
jekyll-sass-converter (~> 2.0)
|
jekyll-sass-converter (~> 1.0)
|
||||||
jekyll-watch (~> 2.0)
|
jekyll-watch (~> 2.0)
|
||||||
kramdown (~> 2.3)
|
kramdown (>= 1.17, < 3)
|
||||||
kramdown-parser-gfm (~> 1.0)
|
|
||||||
liquid (~> 4.0)
|
liquid (~> 4.0)
|
||||||
mercenary (~> 0.4.0)
|
mercenary (~> 0.3.3)
|
||||||
pathutil (~> 0.9)
|
pathutil (~> 0.9)
|
||||||
rouge (~> 3.0)
|
rouge (>= 1.7, < 4)
|
||||||
safe_yaml (~> 1.0)
|
safe_yaml (~> 1.0)
|
||||||
terminal-table (~> 2.0)
|
jekyll-avatar (0.7.0)
|
||||||
jekyll-feed (0.16.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 (>= 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-redirect-from (0.16.0)
|
||||||
jekyll (>= 3.3, < 5.0)
|
jekyll (>= 3.3, < 5.0)
|
||||||
jekyll-sass-converter (2.2.0)
|
jekyll-relative-links (0.6.1)
|
||||||
sassc (> 2.0.1, < 3.0)
|
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-seo-tag (2.8.0)
|
||||||
jekyll (>= 3.8, < 5.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)
|
jekyll-watch (2.2.1)
|
||||||
listen (~> 3.0)
|
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
|
rexml
|
||||||
kramdown-parser-gfm (1.1.0)
|
kramdown-parser-gfm (1.1.0)
|
||||||
kramdown (~> 2.0)
|
kramdown (~> 2.0)
|
||||||
liquid (4.0.3)
|
liquid (4.0.4)
|
||||||
listen (3.7.1)
|
listen (3.8.0)
|
||||||
rb-fsevent (~> 0.10, >= 0.10.3)
|
rb-fsevent (~> 0.10, >= 0.10.3)
|
||||||
rb-inotify (~> 0.9, >= 0.9.10)
|
rb-inotify (~> 0.9, >= 0.9.10)
|
||||||
mercenary (0.4.0)
|
mercenary (0.3.6)
|
||||||
minima (2.5.1)
|
minima (2.5.1)
|
||||||
jekyll (>= 3.5, < 5.0)
|
jekyll (>= 3.5, < 5.0)
|
||||||
jekyll-feed (~> 0.9)
|
jekyll-feed (~> 0.9)
|
||||||
jekyll-seo-tag (~> 2.1)
|
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)
|
pathutil (0.16.2)
|
||||||
forwardable-extended (~> 2.6)
|
forwardable-extended (~> 2.6)
|
||||||
public_suffix (5.0.0)
|
public_suffix (4.0.7)
|
||||||
|
racc (1.7.1)
|
||||||
rb-fsevent (0.11.2)
|
rb-fsevent (0.11.2)
|
||||||
rb-inotify (0.10.1)
|
rb-inotify (0.10.1)
|
||||||
ffi (~> 1.0)
|
ffi (~> 1.0)
|
||||||
rexml (3.2.5)
|
rexml (3.2.6)
|
||||||
rouge (3.30.0)
|
rouge (3.26.0)
|
||||||
|
ruby2_keywords (0.0.5)
|
||||||
|
rubyzip (2.3.2)
|
||||||
safe_yaml (1.0.5)
|
safe_yaml (1.0.5)
|
||||||
sassc (2.4.0)
|
sass (3.7.4)
|
||||||
ffi (~> 1.9)
|
sass-listen (~> 4.0.0)
|
||||||
terminal-table (2.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)
|
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)
|
unicode-display_width (1.8.0)
|
||||||
webrick (1.7.0)
|
webrick (1.8.1)
|
||||||
|
|
||||||
PLATFORMS
|
PLATFORMS
|
||||||
x86_64-darwin-19
|
x86_64-darwin-19
|
||||||
|
|
||||||
DEPENDENCIES
|
DEPENDENCIES
|
||||||
|
github-pages
|
||||||
http_parser.rb (~> 0.6.0)
|
http_parser.rb (~> 0.6.0)
|
||||||
jekyll (~> 4.2.2)
|
|
||||||
jekyll-feed (~> 0.12)
|
|
||||||
jekyll-redirect-from
|
jekyll-redirect-from
|
||||||
minima (~> 2.5)
|
|
||||||
tzinfo (~> 1.2)
|
tzinfo (~> 1.2)
|
||||||
tzinfo-data
|
tzinfo-data
|
||||||
wdm (~> 0.1.1)
|
wdm (~> 0.1.1)
|
||||||
webrick
|
webrick
|
||||||
|
|
||||||
BUNDLED WITH
|
BUNDLED WITH
|
||||||
2.3.22
|
2.3.23
|
||||||
|
|
|
||||||
|
|
@ -1,25 +1,47 @@
|
||||||
SRCDIR := $(abspath $(lastword $(MAKEFILE_LIST))/../..)
|
SRCDIR := $(abspath $(lastword $(MAKEFILE_LIST))/../..)
|
||||||
BIN := $(SRCDIR)/build/venv/bin
|
|
||||||
FONTDIR := ../build/fonts
|
FONTDIR := ../build/fonts
|
||||||
|
BIN := $(SRCDIR)/build/venv/bin
|
||||||
|
VENV := ../build/venv/bin/activate
|
||||||
export PATH := $(BIN):$(PATH)
|
export PATH := $(BIN):$(PATH)
|
||||||
|
|
||||||
|
HTTP_SERVER_BIND_ADDR ?= 127.0.0.1
|
||||||
|
|
||||||
default:
|
default:
|
||||||
@echo "Please specify a target: build, serve or dist" >&2
|
@echo "Please specify a target: build, serve, dist" >&2
|
||||||
|
|
||||||
build: .ruby-bundle
|
build: .ruby-bundle
|
||||||
rm -rf _site
|
rm -rf _site
|
||||||
bundle exec jekyll build
|
bundle exec jekyll build
|
||||||
|
|
||||||
build-archive: .ruby-bundle
|
build-tmp: .ruby-bundle
|
||||||
rm -rf _site-archive/inter-website/v3
|
rm -rf _site-tmp
|
||||||
mkdir -p _site-archive/inter-website/v3
|
bundle exec jekyll build --disable-disk-cache -b /tmp/inter-v4-website/ -d _site-tmp
|
||||||
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
|
|
||||||
|
|
||||||
serve: .ruby-bundle
|
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
|
.ruby-bundle: Gemfile Gemfile.lock
|
||||||
@if ! (command -v bundle >/dev/null && command -v jekyll >/dev/null); then \
|
@if ! (command -v bundle >/dev/null && command -v jekyll >/dev/null); then \
|
||||||
|
|
@ -32,37 +54,29 @@ serve: .ruby-bundle
|
||||||
|
|
||||||
# -----------------------------------------------------------------------
|
# -----------------------------------------------------------------------
|
||||||
|
|
||||||
dist: fonts info
|
dist: fonts info lab/index.html
|
||||||
$(BIN)/python3 ../misc/tools/patch-version.py lab/index.html
|
|
||||||
|
|
||||||
info: _data/fontinfo.json \
|
info: _data/fontinfo.json lab/glyphinfo.json
|
||||||
lab/glyphinfo.json \
|
|
||||||
glyphs/metrics.json
|
|
||||||
|
|
||||||
fonts:
|
fonts:
|
||||||
rm -rf font-files/Inter-* font-files/Inter.var*
|
rm -rf font-files/Inter*
|
||||||
mkdir -p font-files
|
mkdir -p font-files
|
||||||
cp -a $(FONTDIR)/static/Inter-*.woff2 \
|
cp -a $(FONTDIR)/static/Inter*.woff2 \
|
||||||
$(FONTDIR)/static/Inter-*.otf \
|
$(FONTDIR)/var/Inter-Variable.woff2 \
|
||||||
$(FONTDIR)/var/Inter.var.* \
|
$(FONTDIR)/var/Inter-Variable-Italic.woff2 \
|
||||||
$(FONTDIR)/var/Inter-roman.var.* \
|
$(FONTDIR)/var/Inter-Variable.ttf \
|
||||||
$(FONTDIR)/var/Inter-italic.var.* \
|
|
||||||
font-files/
|
font-files/
|
||||||
|
|
||||||
_data/fontinfo.json: ../misc/tools/fontinfo.py font-files/Inter-Regular.otf
|
lab/index.html: ../version.txt
|
||||||
$(BIN)/python3 ../misc/tools/fontinfo.py -pretty $< > _data/fontinfo.json
|
. $(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 \
|
lab/glyphinfo.json: ../misc/tools/gen-glyphinfo.py \
|
||||||
../build/ufo/Inter-Regular.ufo \
|
../build/ufo/Inter-Regular.ufo \
|
||||||
../misc/UnicodeData.txt
|
../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 > $@
|
-ucd ../misc/UnicodeData.txt ../build/ufo/Inter-Regular.ufo > $@
|
||||||
|
|
||||||
glyphs/metrics.json: ../misc/tools/gen-metrics-and-svgs.py \
|
.PHONY: default build build-tmp serve serve-pub dist info fonts
|
||||||
../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
|
|
||||||
|
|
|
||||||
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
|
lsi: false
|
||||||
permalink: /:title
|
permalink: /:title
|
||||||
markdown: kramdown
|
markdown: kramdown
|
||||||
# Since GH pages override this to "true", we test this value to see if we are running locally
|
theme: null
|
||||||
safe: false
|
|
||||||
kramdown:
|
kramdown:
|
||||||
input: GFM
|
input: GFM
|
||||||
auto_ids: true
|
auto_ids: true
|
||||||
|
|
@ -13,3 +12,10 @@ exclude:
|
||||||
- Makefile
|
- Makefile
|
||||||
- Gemfile
|
- Gemfile
|
||||||
- Gemfile.lock
|
- 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:
|
description:
|
||||||
This feature is usually enabled by default and causes certain characters to adjust
|
Depending on the surrounding context, different glyphs are used.
|
||||||
themselves or be replaced depending on the surrounding context.
|
Enabled by default
|
||||||
samples:
|
samples:
|
||||||
- "3›x‹9"
|
- "3›x‹9 12›:‹34 3›–‹8 ›+‹8+x"
|
||||||
- "12›:‹34, FE›—‹X"
|
- "›(‹SEMI›)‹PER›[‹M›]‹ANE›{‹N›}‹T"
|
||||||
- "4›.‹2"
|
- "-> --> ---> => ==> <->"
|
||||||
- "›(‹SEMI›)‹PERMANENT"
|
- "S›@‹N s@n ›:-)‹ ›•‹Smile"
|
||||||
- "SFO ›→‹ STO"
|
|
||||||
- "IIA ›⟶‹ OGG"
|
|
||||||
- "ARN ›⟺‹ OGG"
|
|
||||||
- "M›@‹N m@n"
|
|
||||||
- "Smile ›:-)‹"
|
|
||||||
|
|
||||||
|
|
||||||
# - title: Arrows
|
- tag: liga
|
||||||
# tag: calt
|
title: Standard Ligatures
|
||||||
# description:
|
description: Enabled by default
|
||||||
# Arrows are part of Contextual alternates.
|
samples:
|
||||||
# samples:
|
- "Dif›f‹icult af›f‹ine ›f‹jord "
|
||||||
# - "-> --> --->"
|
- "›f‹i ›f‹j"
|
||||||
# - "<- <-- <---"
|
|
||||||
# - "<-> <-->"
|
|
||||||
# - "=> ==> <=="
|
- tag: dlig
|
||||||
# - "<=> <==>"
|
title: Discretionary Ligatures
|
||||||
# footer:
|
disable: liga
|
||||||
# "In addition to contextual alternates, Inter also provides some ligatures
|
description: Disabled by default
|
||||||
# like for instance specialized glyphs for enclosing combining glyphs. Examples:<br>
|
samples:
|
||||||
# U+0041 U+20DD => A\u20DD<br>
|
- "after affine art interface"
|
||||||
# U+0023 U+20DE => #\u20DE<br>"
|
- "ff ffi fft ft fi tt tf df dt ff kf kt rf"
|
||||||
|
- "rt vf vt wf wt yf yt ›¡¿‹What›?!‹"
|
||||||
|
|
||||||
|
|
||||||
- title: Tabular numbers
|
- title: Tabular numbers
|
||||||
|
|
@ -39,145 +35,105 @@
|
||||||
Fixed-width numbers are useful for tabular data, where comparing
|
Fixed-width numbers are useful for tabular data, where comparing
|
||||||
columns across rows is desired.
|
columns across rows is desired.
|
||||||
samples:
|
samples:
|
||||||
- "1234567890"
|
- "0.45, 0.91. +0.08"
|
||||||
- "1131711› ‹"
|
- "1.00; 9.44, −0.13"
|
||||||
- "0040900› ‹"
|
- "0:00. 1.13; ~7.12"
|
||||||
- "11:31,711› ‹"
|
|
||||||
- "00:40.900› ‹"
|
|
||||||
- "0.45, 0.91, +0.08› ‹"
|
|
||||||
- "1.00, 9.44, −0.13› ‹"
|
|
||||||
- "0.00, 1.13, ~7.12› ‹"
|
|
||||||
|
|
||||||
|
|
||||||
- title: Fractions
|
- title: Fractions
|
||||||
tag: frac
|
tag: frac
|
||||||
description:
|
description:
|
||||||
This feature is contextually sensitive and will convert "words" of
|
Convert spans of numbers & forward slash into fractions
|
||||||
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.
|
|
||||||
samples:
|
samples:
|
||||||
- "1/3 3/4 1/5"
|
- "1/3 5/12 0123/456789"
|
||||||
- "18/29 16/5"
|
- "Approximately 6/16\""
|
||||||
- "1337/591038"
|
|
||||||
|
|
||||||
|
|
||||||
- title: Case alternates
|
- title: Case alternates
|
||||||
tag: case
|
tag: case
|
||||||
description:
|
description:
|
||||||
Switches out some glyphs to work better with capital letters and numbers.
|
Alternate glyphs that matches capital letters and numbers
|
||||||
samples:
|
samples:
|
||||||
- "›(‹Hello›)‹ ›[‹World›]‹ ›{‹9000›}‹"
|
- "›(‹Hello›)‹ ›[‹World›]‹ ›{‹9000›}‹"
|
||||||
- "SCHOOL ›@‹ RUN"
|
- "A›@‹B 3 ›+‹ 9 ›≈‹ 12 ›*‹ 1 ›→‹ X"
|
||||||
- "3 ›+‹ 9 ›=‹ 12 ›*‹ 1"
|
|
||||||
- "›*+÷±×=≠≈•~<>≤≥‹"
|
|
||||||
- "›→‹ ›←‹ ›⟶‹ ›⟵‹ ›−‹ ›-‹ ›–‹ ›—‹ ›:‹"
|
|
||||||
|
|
||||||
|
|
||||||
- title: Compositions
|
- title: Compositions
|
||||||
tag: ccmp
|
tag: ccmp
|
||||||
description:
|
description:
|
||||||
Inter provides several custom made glyphs for compositions like
|
Custom-made glyphs for compositions.
|
||||||
A + enclosed-combining-circle.
|
Enabled by default
|
||||||
samples:
|
samples:
|
||||||
- "Figure A›\u20DD‹"
|
- "›j\u200A\u0303‹ ›i\u200A\u0300‹ ›į\u200A\u0301‹ ›j\u200A\u0302‹ ›i\u200A\u0304‹"
|
||||||
- "Figure #›\u20DE‹"
|
- "Figure ›A\u20DD #\u20DE 3\u20DD ×\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.
|
|
||||||
|
|
||||||
|
|
||||||
- title: Discretionary ligatures
|
|
||||||
tag: dlig
|
|
||||||
description:
|
|
||||||
Alternate style for a few chacters. This feature is usually disabled by default.
|
|
||||||
samples:
|
|
||||||
- "›¡¿‹What›?!‹"
|
|
||||||
- "›¿¡‹What›!?‹"
|
|
||||||
|
|
||||||
|
|
||||||
- title: Numerators
|
|
||||||
tag: numr
|
|
||||||
samples:
|
|
||||||
- "Hello ›0123‹"
|
|
||||||
|
|
||||||
|
|
||||||
- title: Denominators
|
|
||||||
tag: dnom
|
|
||||||
samples:
|
|
||||||
- "Hello ›0123‹"
|
|
||||||
|
|
||||||
|
|
||||||
- title: Superscript
|
|
||||||
tag: sups
|
|
||||||
samples:
|
|
||||||
- "X›0123 (+)-[=]‹"
|
|
||||||
- "X›abcdefghijklmnopqrstuvwxyz‹"
|
|
||||||
|
|
||||||
|
|
||||||
- title: Subscript
|
- title: Subscript
|
||||||
tag: subs
|
tag: subs
|
||||||
samples:
|
samples:
|
||||||
- "H›0123 (+)-[=]‹"
|
- "H›2‹O SF›6‹ H›2‹SO›4‹"
|
||||||
- "X›abcdefghijklmnopqrstuvwxyz‹"
|
- "ABC›123abc (+)-[=]‹"
|
||||||
|
|
||||||
|
|
||||||
- title: "Stylistic set 1: Alternate digits"
|
- title: Superscript
|
||||||
|
tag: sups
|
||||||
|
samples:
|
||||||
|
- "ABC›123abc (+)-[=]‹"
|
||||||
|
|
||||||
|
|
||||||
|
- title: Denominators
|
||||||
|
tag: dnom
|
||||||
|
samples:
|
||||||
|
- "ABC›1234567890‹"
|
||||||
|
|
||||||
|
|
||||||
|
- title: Numerators
|
||||||
|
tag: numr
|
||||||
|
samples:
|
||||||
|
- "ABC›1234567890‹"
|
||||||
|
|
||||||
|
|
||||||
|
- tag: zero
|
||||||
|
title: Slashed zero
|
||||||
|
samples:
|
||||||
|
- "›0‹123"
|
||||||
|
|
||||||
|
|
||||||
|
- title: "Alternate digits"
|
||||||
tag: ss01
|
tag: ss01
|
||||||
description:
|
|
||||||
An alternate style of digits.
|
|
||||||
Note that individual digit styles can be cherry-picked using the cvXX
|
|
||||||
features.
|
|
||||||
samples:
|
samples:
|
||||||
- "12›34‹5›6‹78›9‹0"
|
- "12›34‹5›6‹78›9‹0"
|
||||||
- "›3469‹"
|
|
||||||
|
|
||||||
|
|
||||||
- title: "Stylistic set 2: Disambiguation"
|
- title: "Disambiguation"
|
||||||
tag: ss02
|
tag: ss02
|
||||||
description:
|
description:
|
||||||
Alternate glyph set that increases visual difference between
|
Alternate glyph set that increases visual difference between
|
||||||
similar-looking characters.
|
similar-looking characters.
|
||||||
samples:
|
samples:
|
||||||
- "WP›0‹ACO9XS›I‹1›0‹12O9"
|
- "WP›0‹ACO9XS›I‹1›0‹12O9"
|
||||||
- "›Ill‹ega›l‹"
|
- "›Ill‹ega›l‹ busine›ß‹ βeta"
|
||||||
- "βeta ›ß‹eta Busine›ß‹"
|
|
||||||
|
|
||||||
|
|
||||||
- title: "Stylistic set 3: r curves into round neighbors"
|
- tag: ss03
|
||||||
tag: ss03
|
title: "Round quotes & comma"
|
||||||
description:
|
|
||||||
Lower case r curved into neighboring round shapes for increased
|
|
||||||
legibility and personality.
|
|
||||||
samples:
|
samples:
|
||||||
- "Sa›r‹a"
|
- "It›’‹s ›“‹fun›”‹ here›,‹ yes"
|
||||||
- "i›r‹d"
|
|
||||||
- "Mon›r‹oe"
|
|
||||||
|
|
||||||
|
|
||||||
- title: Slashed zero
|
# - title: Character variants
|
||||||
tag: zero
|
# tag: cvXX
|
||||||
samples:
|
# description: "Allows cherry-picking alternate characters."
|
||||||
- "O›0‹123"
|
# samples:
|
||||||
|
# - {feat: cv01, alt: "Alternate one", sample: "1"}
|
||||||
|
# - {feat: cv02, alt: "Open four", sample: "4"}
|
||||||
- title: Character variants
|
# - {feat: cv03, alt: "Open six", sample: "6"}
|
||||||
tag: cvXX
|
# - {feat: cv04, alt: "Open nine", sample: "9"}
|
||||||
description: "Allows cherry-picking alternate characters."
|
# - {feat: cv05, alt: "Lower case L with tail", sample: "l ł ƚ ɫ ɬ ŀ ĺ ļ ľ ḷ ḹ ḻ ḽ"}
|
||||||
samples:
|
# - {feat: cv06, alt: "Lower case r with curved tail", sample: "r ɽ ɍ ɼ ŕ ŗ ř ȑ ȓ ṙ ṛ ṝ ṟ"}
|
||||||
- {feat: cv01, alt: "Alternate one", sample: "1"}
|
# - {feat: cv07, alt: "Alternate German double-s", sample: "ß"}
|
||||||
- {feat: cv02, alt: "Open four", sample: "4"}
|
# - {feat: cv08, alt: "Upper-case i with serif", sample: "I Ï Ḯ Ɨ Ḭ Ì Í Î Ĩ Ī Ĭ Į İ Ǐ Ȉ Ȋ Ỉ Ị Ι Ί Ϊ Ἰ Ἱ Ἲ"}
|
||||||
- {feat: cv03, alt: "Open six", sample: "6"}
|
# - {feat: cv09, alt: "Flat top three", sample: "3"}
|
||||||
- {feat: cv04, alt: "Open nine", sample: "9"}
|
# - {feat: cv10, alt: "Capital G with spur", sample: "G Ǥ Ɠ Ĝ Ğ Ġ Ģ Ǧ Ǵ Ḡ"}
|
||||||
- {feat: cv05, alt: "Lower case L with tail", sample: "l ł ƚ ɫ ɬ ŀ ĺ ļ ľ ḷ ḹ ḻ ḽ"}
|
# - {feat: cv11, alt: "Single-storey a", sample: "a á ă ắ ặ ằ ẳ ẵ ǎ â ấ ậ ầ ẩ ẫ ȁ ä ǟ ȧ ạ ǡ à ả ȃ ā ą ẚ å ǻ ḁ ã"}
|
||||||
- {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": {
|
"OS/2": {
|
||||||
"achVendID": "RSMS",
|
"achVendID": "RSMS",
|
||||||
"fsSelection": [
|
"fsSelection": [
|
||||||
"6: REGULAR"
|
"6: REGULAR",
|
||||||
|
"7: USE_TYPO_METRICS"
|
||||||
],
|
],
|
||||||
"fsSelection_raw": 192,
|
"fsSelection_raw": "0b11000000",
|
||||||
"fsType": {
|
"fsType": {
|
||||||
"bitmap_embed_only": "no",
|
"bitmap_embed_only": "no",
|
||||||
"no_subset": "no",
|
"no_subset": "no",
|
||||||
|
|
@ -31,12 +32,12 @@
|
||||||
"weightName": "Book",
|
"weightName": "Book",
|
||||||
"xHeight": 4
|
"xHeight": 4
|
||||||
},
|
},
|
||||||
"sCapHeight": 2048,
|
"sCapHeight": 1490,
|
||||||
"sFamilyClass": 0,
|
"sFamilyClass": 0,
|
||||||
"sTypoAscender": 2728,
|
"sTypoAscender": 1984,
|
||||||
"sTypoDescender": -680,
|
"sTypoDescender": -494,
|
||||||
"sTypoLineGap": 0,
|
"sTypoLineGap": 0,
|
||||||
"sxHeight": 1536,
|
"sxHeight": 1118,
|
||||||
"ulCodePageRange1": 415,
|
"ulCodePageRange1": 415,
|
||||||
"ulCodePageRange2": 0,
|
"ulCodePageRange2": 0,
|
||||||
"ulUnicodeRange1": 3758099199,
|
"ulUnicodeRange1": 3758099199,
|
||||||
|
|
@ -45,104 +46,104 @@
|
||||||
"ulUnicodeRange4": 0,
|
"ulUnicodeRange4": 0,
|
||||||
"usBreakChar": 32,
|
"usBreakChar": 32,
|
||||||
"usDefaultChar": 0,
|
"usDefaultChar": 0,
|
||||||
"usFirstCharIndex": 32,
|
"usFirstCharIndex": 0,
|
||||||
"usLastCharIndex": 65535,
|
"usLastCharIndex": 65535,
|
||||||
"usMaxContext": 12,
|
"usMaxContext": 8,
|
||||||
"usWeightClass": 400,
|
"usWeightClass": 400,
|
||||||
"usWeightClassName": "Normal (Regular)",
|
"usWeightClassName": "Normal (Regular)",
|
||||||
"usWidthClass": 5,
|
"usWidthClass": 5,
|
||||||
"usWidthClassName": "Medium (normal)",
|
"usWidthClassName": "Medium (normal)",
|
||||||
"usWinAscent": 2728,
|
"usWinAscent": 1984,
|
||||||
"usWinDescent": 680,
|
"usWinDescent": 494,
|
||||||
"version": 4,
|
"version": 4,
|
||||||
"xAvgCharWidth": 1838,
|
"xAvgCharWidth": 1338,
|
||||||
"yStrikeoutPosition": 922,
|
"yStrikeoutPosition": 671,
|
||||||
"yStrikeoutSize": 192,
|
"yStrikeoutSize": 140,
|
||||||
"ySubscriptXOffset": 0,
|
"ySubscriptXOffset": 0,
|
||||||
"ySubscriptXSize": 1830,
|
"ySubscriptXSize": 1331,
|
||||||
"ySubscriptYOffset": 211,
|
"ySubscriptYOffset": 154,
|
||||||
"ySubscriptYSize": 1690,
|
"ySubscriptYSize": 1229,
|
||||||
"ySuperscriptXOffset": 0,
|
"ySuperscriptXOffset": 0,
|
||||||
"ySuperscriptXSize": 1830,
|
"ySuperscriptXSize": 1331,
|
||||||
"ySuperscriptYOffset": 986,
|
"ySuperscriptYOffset": 717,
|
||||||
"ySuperscriptYSize": 1690
|
"ySuperscriptYSize": 1229
|
||||||
},
|
},
|
||||||
"cmap": "[present but not decoded]",
|
"cmap": "[present but not decoded]",
|
||||||
"head": {
|
"head": {
|
||||||
"checkSumAdjustment": 51273463,
|
"checkSumAdjustment": 2400022008,
|
||||||
"created": 3706895026,
|
"created": 3776266544,
|
||||||
"flags": [
|
"flags": [
|
||||||
"0: Baseline at y=0",
|
"0: Baseline at y=0",
|
||||||
"1: Left sidebearing point at x=0",
|
"1: Left sidebearing point at x=0"
|
||||||
"3: Force ppem to integer values",
|
|
||||||
"4: Instructions may alter advance width"
|
|
||||||
],
|
],
|
||||||
"flags_raw": 27,
|
"flags_raw": 3,
|
||||||
"fontDirectionHint": 2,
|
"fontDirectionHint": 2,
|
||||||
"fontRevision": 3.0189971923828125,
|
"fontRevision": 4.0,
|
||||||
"glyphDataFormat": 0,
|
"glyphDataFormat": 0,
|
||||||
"indexToLocFormat": 0,
|
"indexToLocFormat": 0,
|
||||||
"lowestRecPPEM": 6,
|
"lowestRecPPEM": 3,
|
||||||
"macStyle": [],
|
"macStyle": [],
|
||||||
"macStyle_raw": 0,
|
"macStyle_raw": 0,
|
||||||
"magicNumber": 1594834165,
|
"magicNumber": 1594834165,
|
||||||
"modified": 3706895048,
|
"modified": 3776266567,
|
||||||
"tableVersion": 1.0,
|
"tableVersion": 1.0,
|
||||||
"unitsPerEm": 2816,
|
"unitsPerEm": 2048,
|
||||||
"xMax": 7274,
|
"xMax": 5290,
|
||||||
"xMin": -2080,
|
"xMin": -1513,
|
||||||
"yMax": 3072,
|
"yMax": 2269,
|
||||||
"yMin": -900
|
"yMin": -654
|
||||||
},
|
},
|
||||||
"hhea": {
|
"hhea": {
|
||||||
"advanceWidthMax": 7552,
|
"advanceWidthMax": 5492,
|
||||||
"ascent": 2728,
|
"ascent": 1984,
|
||||||
"caretOffset": 0,
|
"caretOffset": 0,
|
||||||
"caretSlopeRise": 1,
|
"caretSlopeRise": 1,
|
||||||
"caretSlopeRun": 0,
|
"caretSlopeRun": 0,
|
||||||
"descent": -680,
|
"descent": -494,
|
||||||
"lineGap": 0,
|
"lineGap": 0,
|
||||||
"metricDataFormat": 0,
|
"metricDataFormat": 0,
|
||||||
"minLeftSideBearing": -2080,
|
"minLeftSideBearing": -1512,
|
||||||
"minRightSideBearing": -2828,
|
"minRightSideBearing": -963,
|
||||||
"numberOfHMetrics": 2547,
|
"numberOfHMetrics": 2637,
|
||||||
"tableVersion": 65536,
|
"tableVersion": 65536,
|
||||||
"xMaxExtent": 7274
|
"xMaxExtent": 5290
|
||||||
},
|
},
|
||||||
"hmtx": "[present but not decoded]",
|
"hmtx": "[present but not decoded]",
|
||||||
"id": "Inter-Regular:2021:0a5106e0b",
|
"id": "font-files/Inter-Regular.otf",
|
||||||
"maxp": "[present but not decoded]",
|
"maxp": "[present but not decoded]",
|
||||||
"name": "Inter-Regular",
|
"name": "[present but not decoded]",
|
||||||
"names": {
|
"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",
|
"#256": "Open digits",
|
||||||
"#257": "Disambiguation",
|
"#257": "Disambiguation",
|
||||||
"#258": "r curves into round neighbors",
|
"#258": "Round quotes & commas",
|
||||||
"#259": "Disambiguation without slashed zero",
|
"#259": "Disambiguation (no slashed zero)",
|
||||||
"#260": "Alternate one",
|
"#260": "Alternate one",
|
||||||
"#261": "Open four",
|
"#261": "Open four",
|
||||||
"#262": "Open six",
|
"#262": "Open six",
|
||||||
"#263": "Open nine",
|
"#263": "Open nine",
|
||||||
"#264": "Lower-case L with tail",
|
"#264": "Lower-case L with tail",
|
||||||
"#265": "r with curved tail",
|
"#265": "Simplified u",
|
||||||
"#266": "Alternate German double s",
|
"#266": "Alternate German double s",
|
||||||
"#267": "Upper-case i with serif",
|
"#267": "Upper-case i with serif",
|
||||||
"#268": "Flat-top three",
|
"#268": "Flat-top three",
|
||||||
"#269": "Captital G with spur",
|
"#269": "Capital G with spur",
|
||||||
"#270": "Single-storey a",
|
"#270": "Single-story a",
|
||||||
"copyright": "Copyright \u00a9 2020 The Inter Project Authors",
|
"#271": "Compact f",
|
||||||
"designer": "Rasmus Andersson",
|
"#272": "Compact t",
|
||||||
"designerURL": "https://rsms.me/",
|
"#3 fontId": "4.000;git-4b01ef878;RSMS;Inter-Regular",
|
||||||
"familyName": "Inter",
|
"#4 fullName": "Inter Regular",
|
||||||
"fontId": "Inter-Regular:2021:0a5106e0b",
|
"#5 version": "Version 4.000;git-4b01ef878",
|
||||||
"fullName": "Inter Regular",
|
"#6 postscriptName": "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",
|
"#7 trademark": "Inter UI and Inter is a trademark of rsms.",
|
||||||
"licenseURL": "http://scripts.sil.org/OFL",
|
"#8 manufacturerName": "rsms",
|
||||||
"manufacturerName": "rsms",
|
"#9 designer": "Rasmus Andersson"
|
||||||
"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"
|
|
||||||
},
|
},
|
||||||
"post": {
|
"post": {
|
||||||
"formatType": 3.0,
|
"formatType": 3.0,
|
||||||
|
|
@ -152,9 +153,9 @@
|
||||||
"maxMemType42": 0,
|
"maxMemType42": 0,
|
||||||
"minMemType1": 0,
|
"minMemType1": 0,
|
||||||
"minMemType42": 0,
|
"minMemType42": 0,
|
||||||
"underlinePosition": -464,
|
"underlinePosition": -348,
|
||||||
"underlineThickness": 192
|
"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
|
- category: Latin
|
||||||
languages:
|
languages:
|
||||||
- Afrikaans
|
- Afrikaans
|
||||||
|
|
@ -153,3 +134,22 @@
|
||||||
- Yoruba
|
- Yoruba
|
||||||
- Zarma
|
- Zarma
|
||||||
- Zulu
|
- 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 @@
|
||||||
{%
|
{% include defs.html -%}
|
||||||
assign build_version = site.time | date: "%Y%m%d%H%M%S" %}{%
|
<!DOCTYPE HTML>
|
||||||
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>
|
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
|
|
@ -33,10 +9,9 @@ endfor
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
<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}}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/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 }}">
|
<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="format-detection" content="telephone=no">
|
||||||
<meta name="twitter:card" content="summary_large_image">
|
<meta name="twitter:card" content="summary_large_image">
|
||||||
<meta name="twitter:site" content="@rsms">
|
<meta name="twitter:site" content="@rsms">
|
||||||
|
|
@ -64,33 +39,29 @@ endfor
|
||||||
<meta property="og:type" content="product">
|
<meta property="og:type" content="product">
|
||||||
<meta property="og:locale" content="en_US">
|
<meta property="og:locale" content="en_US">
|
||||||
<meta property="og:url" content="https://rsms.me/inter{{ page.url }}">
|
<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>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
{% if site.safe == false %}<script>
|
<header><div>
|
||||||
// Allows passing "?debug" in the query string for local builds, which
|
<h4><a {% if page.url == "/" %}href="#" class=scroll-reveal{% else %}href="{{url_root}}"{% endif %}>Inter</a></h4>
|
||||||
// sets "debug" on the <html> element, enabling CSS debugging.
|
<div class=menu>
|
||||||
if (document.location.search.indexOf("debug") != -1) {
|
<a href="{{url_root}}#features">Features</a>
|
||||||
document.documentElement.classList.add("debug")
|
<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>
|
||||||
</script>{% endif %}
|
<a href="{{url_root}}download/" {% if page.url contains "/download/" %}class="active"{% endif %}>Download ↓</a>
|
||||||
<div id="hud-notification"><div class="msg">Hello</div></div>
|
</div>
|
||||||
<script src="{{url_root}}res/base.js?v={{ base_js_v }}"></script>
|
</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 }}
|
{{ content }}
|
||||||
|
|
||||||
{% comment %}{% include eji-banner.html %}{% endcomment %}
|
|
||||||
|
|
||||||
<footer class="row">
|
<footer class="row">
|
||||||
<p>
|
<p>
|
||||||
|
|
@ -98,5 +69,14 @@ endfor
|
||||||
Font vendor ID: <a href="https://learn.microsoft.com/en-us/typography/vendors/#r">RSMS</a>
|
Font vendor ID: <a href="https://learn.microsoft.com/en-us/typography/vendors/#r">RSMS</a>
|
||||||
</p>
|
</p>
|
||||||
</footer>
|
</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>
|
</body>
|
||||||
</html>
|
</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
|
layout: default
|
||||||
title: Download Inter
|
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
|
<r-cell span=row>
|
||||||
%}https://github.com/rsms/inter/releases/download/v{{ release_version }}/{{ download_filename }}{%
|
<h1>Downloading Inter version {{ release_version }}…</h1>
|
||||||
endcapture %}{%
|
<p>
|
||||||
|
<a href="{{download_url}}" class=dim>{{download_url}}</a>
|
||||||
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>
|
|
||||||
</p>
|
</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>
|
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>
|
||||||
<p class="large">
|
<div class=sponsor-buttons>
|
||||||
<a id="sponsor-button"
|
<a class=button
|
||||||
title="Help Inter by becoming a sponsor and donating a coffee or two"
|
title="Help Inter by becoming a sponsor and donating a coffee or two"
|
||||||
href="https://github.com/sponsors/rsms">
|
href="https://github.com/sponsors/rsms">
|
||||||
<span>Support Inter...</span>
|
Support Inter on GitHub...
|
||||||
</a>
|
</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">
|
</r-cell>
|
||||||
<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">
|
<br>
|
||||||
<!-- <input type="hidden" name="item_number" value="Fall Cleanup Campaign"> -->
|
<br>
|
||||||
<input type="hidden" name="currency_code" value="USD">
|
<br>
|
||||||
<input type="submit" name="submit" value="One-time donation via PayPal...">
|
|
||||||
</form>
|
|
||||||
|
<r-cell span=1-4 span-s=row>
|
||||||
|
<h2>Installation instructions</h2>
|
||||||
|
|
||||||
<h2>How to install</h2>
|
|
||||||
<p>
|
<p>
|
||||||
Show instructions for
|
Show instructions for
|
||||||
<select id="install-menu">
|
<select id="install-menu">
|
||||||
<option value="mac">macOS</option>
|
<option value="mac">macOS</option>
|
||||||
<option value="windows">Windows</option>
|
<option value="windows">Windows</option>
|
||||||
<option value="linux">Linux (Ubuntu-like)</option>
|
<option value="ubuntu">Ubuntu Linux</option>
|
||||||
</select>
|
</select>
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<div id="install-mac" class="install-instructions active">
|
<div id="install-mac" class="install-instructions active">
|
||||||
<h3>Using Font Book</h3>
|
|
||||||
<ol>
|
<ol>
|
||||||
<li>Open the "Font Book" application</li>
|
<li>Open the "Font Book" application.</li>
|
||||||
<li>In the main menu, select File, then "Add Fonts..."</li>
|
<li>In the main menu, select "File" → "Add Fonts..."</li>
|
||||||
<li>Find the "Inter Desktop" folder, select the folder and press the Open button</li>
|
<li>Select "Inter.ttc", "Inter-Variable.ttf" and "Inter-Variable-Italic.ttf"</li>
|
||||||
</ol>
|
<li>Press the "Open" button</li>
|
||||||
<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>
|
|
||||||
</ol>
|
</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>
|
||||||
|
|
||||||
<div id="install-windows" class="install-instructions">
|
<div id="install-windows" class="install-instructions">
|
||||||
<ol>
|
<ol>
|
||||||
<li>Copy the "Inter Desktop" folder in the zip file to your Desktop</li>
|
<li>Open the zip file you downloaded</li>
|
||||||
<li>Open the "Inter Desktop" folder on your Desktop</li>
|
<li>Select "Inter.ttc", "Inter-Variable.ttf" and "Inter-Variable-Italic.ttf"</li>
|
||||||
<li>Select all font files</li>
|
<li>Right-click the selected files, choose "Install for all users"</li>
|
||||||
<li>Right-click the selected files and choose "Install for all users"</li>
|
|
||||||
</ol>
|
</ol>
|
||||||
<p>
|
<p>
|
||||||
If you have a previous installation of Inter, you should make sure
|
If you have a previous installation of Inter, you should make sure
|
||||||
to remove those fonts files before installing new ones. You need to
|
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
|
install the font for all users, as some software requires fonts to
|
||||||
global.
|
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".
|
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="install-linux" class="install-instructions">
|
<div id="install-ubuntu" 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>
|
|
||||||
<ol>
|
<ol>
|
||||||
<li>
|
<li>Create a ".fonts" directory in your home. (<code>mkdir -p ~/.fonts</code>)</li>
|
||||||
Create a folder called ".fonts" in your home directory.<br>
|
<li>Copy "Inter.ttc", "Inter-Variable.ttf" and
|
||||||
Example: <tt>mkdir -p ~/.fonts</tt>
|
"Inter-Variable-Italic.ttf" into your .fonts directory
|
||||||
</li>
|
(<code>cp Inter.ttc *.ttf ~/.fonts/</code>)
|
||||||
<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>
|
</li>
|
||||||
</ol>
|
</ol>
|
||||||
<p>
|
<p>
|
||||||
You may have to restart apps and/or your window server session.
|
You may have to restart apps and/or your window server session.
|
||||||
</p>
|
</p>
|
||||||
<p>
|
<h4>Ubuntu Linux Q&A</h4>
|
||||||
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>
|
|
||||||
<p>
|
<p>
|
||||||
Q: I installed the fonts but they don't show up<br>
|
Q: I installed the fonts but they don't show up<br>
|
||||||
A: Try rebuilding the font database:<br>
|
A: Try rebuilding the font database:<br>
|
||||||
|
|
@ -183,8 +114,54 @@ form.large { zoom: 1.2 }
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</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(){
|
<script type="text/javascript">(function(){
|
||||||
|
|
||||||
let activeInstructions = document.querySelector('.install-instructions.active')
|
let activeInstructions = document.querySelector('.install-instructions.active')
|
||||||
|
|
@ -201,7 +178,7 @@ installMenu.onchange = ev => {
|
||||||
}
|
}
|
||||||
|
|
||||||
if (/linux/i.test(navigator.userAgent)) {
|
if (/linux/i.test(navigator.userAgent)) {
|
||||||
activateInstructions('linux')
|
activateInstructions('ubuntu')
|
||||||
} else if (/windows/i.test(navigator.userAgent)) {
|
} else if (/windows/i.test(navigator.userAgent)) {
|
||||||
activateInstructions('windows')
|
activateInstructions('windows')
|
||||||
} else if (/mac os/i.test(navigator.userAgent)) {
|
} else if (/mac os/i.test(navigator.userAgent)) {
|
||||||
|
|
@ -209,3 +186,39 @@ if (/linux/i.test(navigator.userAgent)) {
|
||||||
}
|
}
|
||||||
|
|
||||||
})();</script>
|
})();</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
|
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">
|
||||||
---
|
---
|
||||||
{%
|
<div class="row"><div>
|
||||||
|
<h1>404 not found</h1>
|
||||||
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>
|
|
||||||
<p>
|
<p>
|
||||||
There's of course no absolute right or wrong when it comes to expressing
|
This page used to exist, but is no longer.<br>
|
||||||
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:
|
|
||||||
</p>
|
</p>
|
||||||
<p>
|
<p>
|
||||||
<formula>
|
You can visit an archived version of the old website:
|
||||||
tracking =
|
<a href="https://d.rsms.me/inter-website/v3/dynmetrics/">https://d.rsms.me/inter-website/v3/dynmetrics/</a>
|
||||||
<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>
|
|
||||||
</p>
|
</p>
|
||||||
</div></div>
|
</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
Reference in a new issue