Skip to content

Instantly share code, notes, and snippets.

@graphicore

graphicore/index.html

Created January 18, 2018 18:17
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save graphicore/5d8fe09b990ce20d10a4eac3301948dc to your computer and use it in GitHub Desktop.
Save graphicore/5d8fe09b990ce20d10a4eac3301948dc to your computer and use it in GitHub Desktop.
Download ZIP
example testing for graphicore/specimenTools#27
Raw
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Glyph Table</title>
<script src="../../../lib/bower_components/requirejs/require.js"></script>
<script>
fontFiles = [
'../../assets/fonts/Jura-Medium.ttf'
, '../../assets/fonts/MontserratAlternates-Bold.ttf'
, '../../assets/fonts/MontserratAlternates-ExtraBold.ttf'
, '../../assets/fonts/MontserratAlternates-ExtraLight.ttf'
, '../../assets/fonts/Montserrat-Thin.ttf'
, '../../assets/fonts/Quicksand-Bold.ttf'
, '../../assets/fonts/Quicksand-Light.ttf'
, '../../assets/fonts/Quicksand-Medium.ttf'
, '../../assets/fonts/Quicksand-Regular.ttf'
, '../../assets/fonts/Pacifico-Regular.ttf'
, '../../assets/fonts/VT323-Regular.ttf'
, '../../assets/fonts/JosefinSans-ThinItalic.ttf'
, '../../assets/fonts/JosefinSans-Thin.ttf'
, '../../assets/fonts/JosefinSans-SemiBoldItalic.ttf'
, '../../assets/fonts/JosefinSans-Regular.ttf'
, '../../assets/fonts/JosefinSans-LightItalic.ttf'
, '../../assets/fonts/JosefinSans-Light.ttf'
, '../../assets/fonts/JosefinSans-Italic.ttf'
, '../../assets/fonts/JosefinSans-BoldItalic.ttf'
, '../../assets/fonts/JosefinSans-Bold.ttf'
];
require.config({baseUrl: '../../lib'});
require(['bootstrap'], function(require) {
require(['../examples/simple/main'], function(main) {
main(window, fontFiles);
});
});
</script>
<style>
.glyph {
box-sizing: border-box;
display: inline-block;
}
.glyph:nth-child(2n) svg {
background: lightpink;
}
.glyph:nth-child(2n) svg path{
fill:red
}
.glyph svg {
width: 100%;
display: block;
overflow: visible;
}
/* default-widest 20 items */
.glyph {
width: calc(100% / 20);
}
@media (max-width: 1000px) {
.glyph {
width: calc(100% / 16);
}
}
@media (max-width: 700px) {
.glyph {
width: calc(100% / 12);
}
}
@media (max-width: 600px) {
.glyph {
width: calc(100% / 10);
}
}
@media (max-width: 500px) {
.glyph {
width: calc(100% / 8);
}
}
@media (max-width: 400px) {
.glyph {
width: calc(100% / 6);
}
}
@media (max-width: 300px) {
.glyph {
width: calc(100% / 4);
}
}
button.active {
background: lightgreen;
}
button.checked {
background: lightgreen;
}
button.italic-switch.checked:after{
content: ' ☑'
}
button.italic-switch:after {
content: ' ☐'
}
</style>
</head>
<body>
<h1>Font SpecimenTools Example</h1>
<p><em>We only show the very basics here, go to
<a href="https://github.com/graphicore/mdlFontSpecimen">mdlFontSpecimen</a>
to see how these SpecimenTools should be used.</em></p>
<h4>Size of Glyph-Set
<span class="font-data"
data-getter="NumberGlyphs"></span>
</h4>
<h4>Supported Languages
<span class="font-data"
data-getter="NumberSupportedLanguages"></span>
</h4>
<div>
<h4>All Supported Languages</h4>
<p class="font-data"
data-getter="SupportedLanguages"></p>
</h4>
<div>
<h2>Choose a Font</h2>
<div class="family-chooser"></div>
</div>
<div class="type-tester"
data-unit-font-size="px"
data-min-font-size="5"
data-max-font-size="128"
data-step-font-size="1"
data-value-font-size="18"
data-unit-letter-spacing="px"
data-min-letter-spacing="-5"
data-max-letter-spacing="5"
data-value-letter-spacing="0"
data-step-letter-spacing="0.1"
data-unit-line-height="%"
data-min-line-height="50"
data-max-line-height="300"
data-step-line-height="5"
data-value-line-height="100"
data-class-line-height="custom-class special-slider">
<h2 class="mdl-card__title-text">Test the Font</h2>
<h5>Default Features</h5>
<div class="type-tester__features--default"></div>
<h5>Optional Features</h5>
<div class="type-tester__features--optional"></div>
<h5>Font size: <span class="type-tester__label" data-target-property="font-size"></span></h5>
<div class="type-tester__slider" data-target-property="font-size"></div>
<h5>Letter spacing: <span class="type-tester__label" data-target-property="letter-spacing"></span></h5>
<div class="type-tester__slider" data-target-property="letter-spacing"></div>
<h5>Line height: <span class="type-tester__label" data-target-property="line-height"></span></h5>
<div class="type-tester__slider" data-target-property="line-height"></div>
<p class="current-font type-tester__content" contenteditable="true">
TYPE HERE …<br />
Web typography refers to the use of fonts on the World Wide Web. When
HTML was first created, font faces and styles were controlled exclusively
by the settings of each Web browser. There was no mechanism for individual
Web pages to control font display until Netscape introduced the &lt;font&gt;
tag in 1995, which was then standardized in the HTML 3.2 specification.
However, the font specified by the tag had to be installed on the user's
computer or a fallback font, such as a browser's default sans-serif or
monospace font, would be used. The first Cascading Style Sheets specification
was published in 1996 and provided the same capabilities.
</p>
<small><a href="https://en.wikipedia.org/wiki/Web_typography">Source: Wikipedia</a></small>
</div>
<div class="glyph-table" data-glyphtable-contains="A"></div>
</div>
</body>
</html>
Raw
main.js
define([
'specimenTools/loadFonts'
, 'specimenTools/initDocumentWidgets'
, 'specimenTools/services/PubSub'
, 'specimenTools/services/FontsData'
, 'specimenTools/services/WebfontProvider'
, 'specimenTools/widgets/GlyphTables'
, 'specimenTools/widgets/FamilyChooser'
, 'specimenTools/widgets/GenericFontData'
, 'specimenTools/widgets/CurrentWebFont'
, 'specimenTools/widgets/TypeTester'
], function(
loadFonts
, initDocumentWidgets
, PubSub
, FontsData
, WebFontProvider
, GlyphTables
, FamilyChooser
, GenericFontData
, CurrentWebFont
, TypeTester
) {
"use strict";
/**
* A very basic initialization function without passing configuration
* with the factories array
*/
function main(window, fontFiles) {
// This PubSub instance is the centrally connecting element between
// all modules. The order in which modules subscribe to PubSub
// channels is relevant in some cases. I.e. when a subscriber is
// dependant on the state of another module.
var pubsub = new PubSub()
, factories
, fontsData = new FontsData(pubsub, {
useLaxDetection: true,
// passing in this object with a font's postscript name
// allows this name to be overwritten
overwrites: {
'JosefinSans': 'Testname: Josefin Sans'
}
})
, webFontProvider = new WebFontProvider(window, pubsub, fontsData)
;
function customGlyphOrder() {
//jshint validthis:true
var glyphOrder = [], i, l, name;
for(i=0,l=this._font.glyphNames.names.length;i<l;i++) {
name = this._font.glyphNames.names[i];
if(name.indexOf(this._dataAttributes.contains) !== -1)
glyphOrder.push(i);
}
return glyphOrder;
}
var glyphTablesOptions = {
glyphTable: {
glyphOrderFunc: customGlyphOrder
}
};
factories = [
// [css-class of host element, Constructor(, further Constructor arguments, ...)]
// All Constructors are given [dom-container, pubsub] as the first two arguments.
['family-chooser', FamilyChooser, fontsData]
, ['glyph-table', GlyphTables, glyphTablesOptions]
, ['font-data', GenericFontData, fontsData]
, ['current-font', CurrentWebFont, webFontProvider]
, ['type-tester', TypeTester, fontsData]
];
initDocumentWidgets(window.document, factories, pubsub);
pubsub.subscribe('allFontsLoaded', function() {
pubsub.publish('activateFont', 0);
});
loadFonts.fromUrl(pubsub, fontFiles);
}
return main;
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment