Skip to content

Adding font-feature examples and update italics in font-variations #13

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 16 commits into from
Oct 23, 2018
Merged

Adding font-feature examples and update italics in font-variations #13

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
fe26024
Adding font-feature stuff
jpamental Oct 19, 2018
647be2d
Set theme jekyll-theme-slate
jpamental Oct 22, 2018
85deb81
More updates for new font feature pages
jpamental Oct 22, 2018
e6405de
Merge branch 'master' of https://github.com/jpamental/css-examples
jpamental Oct 22, 2018
4a87285
Adding inactive toggle
jpamental Oct 22, 2018
6ea2519
Toggle for position
jpamental Oct 22, 2018
e261d3a
Add fractions/ordinals/slashed zero example
jpamental Oct 22, 2018
2bc55da
Updating numeric styles
jpamental Oct 22, 2018
50babe3
Adding font-variant page
jpamental Oct 22, 2018
1286ec1
Updating switch label
jpamental Oct 22, 2018
bf0eeff
Adding alternates demo
jpamental Oct 23, 2018
8b2ab4b
Updated naming
jpamental Oct 23, 2018
c130e70
Simplifying features
jpamental Oct 23, 2018
6f9fe04
CSS scoping change
jpamental Oct 23, 2018
f70b3ba
Adding East Asian example
jpamental Oct 23, 2018
11e4754
Remove a glyph
jpamental Oct 23, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions _config.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
theme: jekyll-theme-slate
234 changes: 234 additions & 0 deletions font-features/font-kerning.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,234 @@
<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title>Font feature example - kerning</title>

<style>
@font-face{
font-family: 'Plex Serif';
font-weight: 400;
font-style: normal;
font-stretch: normal;
src: url('fonts/plex/IBMPlexSerif-Regular.woff') format('woff'),
url('fonts/plex/IBMPlexSerif-Regular.woff2') format('woff2');
}


html {
box-sizing: border-box;
font-size: 100%;
}

*,
*::before,
*::after {
box-sizing: inherit;
}

body {
font: 1.2em "Plex Serif", "Times New Roman", serif;
margin: 20px;
padding: 0;
}

.wrapper {
width: 100%;
display: grid;
grid-template-columns: 1fr;
grid-gap: 1rem;
}

@media screen and (min-width: 35rem) {
.wrapper {
grid-template-columns: 1fr 1fr;
}
}

@media screen and (min-width: 52rem) {
.wrapper {
grid-template-columns: 1fr 1fr;
}
}

textarea {
font-family: monospace;
display: block;
margin-bottom: 10px;
height: 160px;
background-color: #F4F7F8;
border: none;
border-left: 6px solid #558ABB;
color: #4D4E53;
padding: 1rem 0;
width: 100%;
}

textarea:nth-of-type(1) {
height: 130px;
}

textarea:nth-of-type(2) {
height: 100px;
}

.playable-buttons {
text-align: right;
width: 100%;
padding: 0.5rem 0;
font-size: 100%;
}

.section {
width: 100%;
border: 1px solid #4D4E53;
border-radius: 2px;
padding: 10px 14px 10px 10px;
margin-bottom: 10px;
}

.section input {
display: block;
margin: 5px;
}

.container * {
font-size: 4rem;
margin: 1.5rem 0;
}

</style>
<style class="editable1">
/* kerning: auto|normal|none */
.container1 * {
font-kerning: normal;
}
.inactive .container1 * {
font-kerning: none;
}
</style>
<style class="editable2">
/* 'kern' 1|0 (on or off) */
.container2 * {
font-feature-settings: 'kern' 1;
}
.inactive .container2 * {
font-feature-settings: 'kern' 0;
}
</style>
</head>

<body>
<div class="wrapper">
<div class="demo1">
<section class="section section1">
<div class="container container1">
<p>Puffy Pangolins</p>
</div>
</section>
<textarea class="playable-css1">
/* kerning: auto|normal|none */
.container1 * {
font-kerning: normal;
}
.inactive .container1 * {
font-kerning: none;
}
</textarea>
<textarea id="code1" class="playable-html1">
<div class="container container1">
<p>Puffy Pangolins</p>
</div>
</textarea>
<input type="checkbox" name="demo1_control" id="demo1_control" value="on" checked /> <label for="demo1_control">Kerning active</label>
</div>
<div class="demo2">
<section class="section section2">
<div class="container container2">
<p>Puffy Pangolins</p>
</div>
</section>
<textarea class="playable-css2">
/* 'kern' 1|0 (on or off) */
.container2 * {
font-feature-settings: 'kern' 1;
}
.inactive .container2 * {
font-feature-settings: 'kern' 0;
}
</textarea>
<textarea id="code2" class="playable-html2">
<div class="container container2">
<p>Puffy Pangolins</p>
</div>
</textarea>
<input type="checkbox" name="demo2_control" id="demo2_control" value="on" checked /> <label for="demo2_control">Kerning active</label>
</div>
</div>
<div class="playable-buttons">
<input id="reset" type="button" value="Reset">
</div>
</body>
<script>
var section1 = document.querySelector('.section1');
var editable1 = document.querySelector('.editable1');
var textareaHTML1 = document.querySelector('.playable-html1');
var textareaCSS1 = document.querySelector('.playable-css1');
var section2 = document.querySelector('.section2');
var editable2 = document.querySelector('.editable2');
var textareaHTML2 = document.querySelector('.playable-html2');
var textareaCSS2 = document.querySelector('.playable-css2');
var rangeinput = document.querySelector('.controls--slider');
var reset = document.getElementById('reset');
var htmlCode1 = textareaHTML1.value;
var cssCode1 = textareaCSS1.value;
var htmlCode2 = textareaHTML2.value;
var cssCode2 = textareaCSS2.value;
var demo1_active = document.getElementById('demo1_control');
var demo2_active = document.getElementById('demo2_control');

function fillCode() {
editable1.innerHTML = textareaCSS1.value;
section1.innerHTML = textareaHTML1.value;
editable2.innerHTML = textareaCSS2.value;
section2.innerHTML = textareaHTML2.value;
}

reset.addEventListener('click', function () {
textareaHTML1.value = htmlCode1;
textareaCSS1.value = cssCode1;
textareaHTML2.value = htmlCode2;
textareaCSS2.value = cssCode2;
demo1_active.checked = true;
demo1_active.parentNode.classList.remove('inactive');
demo2_active.checked = true;
demo2_active.parentNode.classList.remove('inactive');
fillCode();
});

demo1_active.addEventListener('change', function () {
if (this.checked) {
this.parentNode.classList.remove('inactive');
} else {
this.parentNode.classList.add('inactive');
}
});

demo2_active.addEventListener('change', function () {
if (this.checked) {
this.parentNode.classList.remove('inactive');
} else {
this.parentNode.classList.add('inactive');
}
});

textareaHTML1.addEventListener('input', fillCode);
textareaCSS1.addEventListener('input', fillCode);
textareaHTML2.addEventListener('input', fillCode);
textareaCSS2.addEventListener('input', fillCode);
window.addEventListener('load', fillCode);

</script>

</html>
Loading