Skip to content

Add support for OT Variations #88

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

Open
meirsadan wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Add support for OT Variations #88

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c84b46f
Merge pull request #1 from impallari/master
meirsadan Oct 18, 2017
138d9d1
Add support for variable fonts
meirsadan Oct 18, 2017
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
24 changes: 12 additions & 12 deletions css/styles-v10.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,10 +33,10 @@ header h1 { margin: 0; padding: 40px 20px; }
#toggleotfeatures a { color: #fff; text-decoration:none; text-shadow: 1px 1px 2px black; }
#editions { float: right; }

/* OT Features Menu */
#otfeatures { float: left; width: 960px; margin: 0px 20px 10px; padding: 0px 0px 8px; background: #bababa; font: normal 13px/13px "Lucida Grande","Lucida Sans Unicode", arial, sans-serif !important; }
#otfeatures table td { padding: 4px 20px;}
#csscode { margin: 0; padding: 0; font: normal 10px/10px "Lucida Grande","Lucida Sans Unicode", arial, sans-serif; }
/* OT Panel (Features / Variations) */
.otpanel { float: left; width: 960px; margin: 0px 20px 10px; padding: 0px 0px 8px; background: #bababa; font: normal 13px/13px "Lucida Grande","Lucida Sans Unicode", arial, sans-serif !important; }
.otpanel table td { padding: 4px 20px;}
.csscode { margin: 0; padding: 0; font: normal 10px/10px "Lucida Grande","Lucida Sans Unicode", arial, sans-serif; }

/*-----------------------------------------------------------------------------------------------------
Content
Expand All @@ -59,14 +59,14 @@ div.tabs > div { padding: 20px; }
div.tabs > div h2 { margin-top: 0; }

/* Rules for changing case*/
.lowercase {
text-transform: lowercase;
}
.capitalized {
text-transform: capitalize;
}
.uppercase {
text-transform: uppercase;
.lowercase {
text-transform: lowercase;
}
.capitalized {
text-transform: capitalize;
}
.uppercase {
text-transform: uppercase;
}

/*-----------------------------------------------------------------------------------------------------
Expand Down
36 changes: 33 additions & 3 deletions includes/top.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,9 @@
<div id="toggleotfeatures">
<!-- Editions nav menu: Latins go first, then all scripts follow alphabetically, then tools, then helper. -->
<span id="editions"><a href="index.php">Latin 1</a> | <a href="index-latin-02.php">Latin 2</a> | <a href="index-cyrillic.php">Cyrillic</a> | <a href="index-devanagari.php">Devanagari</a> | <a href="index-hebrew.php">Hebrew</a> | <a href="index-kannada.php">Kannada</a> | <a href="index-malayalam.php">Malayalam</a> | <a href="index-tamil.php">Tamil</a> | <a href="index-telugu.php">Telugu</a> | <a href="tools.php">Tools</a> | <a href="specimen-helper.php">Specimen Helper</a></span>
<a href="javascript://" id="showhide">OpenType Features</a>
<a href="javascript://" id="showhide">OT Features</a>
</div>
<div id="otfeatures" style="display: none;">
<div id="otfeatures" class="otpanel" style="display: none;">
<table width="100%">
<tr>
<td valign="top" width="25%">
Expand Down Expand Up @@ -82,7 +82,37 @@
<tr>
<td colspan="3">
<p style="margin: 0 0 6px;">Recommended CSS:</p>
<p id="csscode"></p>
<p id="csscode" class="csscode"></p>
</td>
</tr>
</table>
</div>
<div id="otvariations" class="otpanel" style="display: none;">
<table width="100%">
<tr>
<td valign="top" width="25%">
<input class="varAxisRange" type="range" id="wght" min="0" max="1" step="0.001">
<label for="wght">Weight</label>
</td>
<td valign="top" width="25%">
<input class="varAxisRange" type="range" id="wdth" min="0" max="1" step="0.001">
<label for="wdth">Width</label>
</td>
<td valign="top" width="25%">
<input class="varAxisRange" type="range" id="opsz" min="0" max="1" step="0.001">
<label for="opsz">O. Size</label>
</td>
<td valign="top" width="25%">
<input class="varAxisRange" type="range" id="ital" min="0" max="1" step="0.001">
<label for="ital">Italic</label>
<input class="varAxisRange" type="range" id="slnt" min="0" max="1" step="0.001">
<label for="slnt">Slant</label>
</td>
</tr>
<tr>
<td colspan="3">
<p style="margin: 0 0 6px;">Recommended CSS:</p>
<p id="cssvarcode" class="csscode"></p>
</td>
</tr>
</table>
Expand Down
9 changes: 5 additions & 4 deletions index-hebrew.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,14 @@
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Font Testing Page - Hebrew Version</title>
<link type="text/css" href="css/styles-v9.css?rand=<?php echo rand(5,500)?>" rel="stylesheet" charset="utf-8" />
<link type="text/css" href="css/styles-v10.css?rand=<?php echo rand(5,500)?>" rel="stylesheet" charset="utf-8" />
<link type="text/css" href="css/print-v9.css" rel="stylesheet" media="print" charset="utf-8" />
<link type="text/css" href="css/rtl-v1.css?rand=<?php echo rand(5,500)?>" rel="stylesheet" charset="utf-8" />
<script src="js/jquery-1.7.2.min.js" type="text/javascript" charset="utf-8"></script>
<script>localStorage.clear();</script>
<script src="js/fontdrag.js" type="text/javascript" charset="utf-8"></script>
<script src="js/otfeatures-v9.1.js" type="text/javascript" charset="utf-8"></script>
<script src="js/otvars-v10.0.js" type="text/javascript" charset="utf-8"></script>
<script src="js/contentEditable.js" type="text/javascript" charset="utf-8"></script>
<script src="includes/hebrew/constants-hebrew.js" type="text/javascript" charset="utf-8"></script>
<script src="js/init.js" type="text/javascript" charset="utf-8"></script>
Expand All @@ -31,7 +32,7 @@
<?php include("includes/top.php"); ?>

<section id="custom">

<div class="tabs">
<!-- Navigation (Ideally, this should be outside the "custom" section, so the navigation's font does not change.) -->
<ul class="tabNavigation">
Expand All @@ -44,7 +45,7 @@
<li><a href="#hinting">Hinting</a></li>
<li><a href="#diacritics">Diacritics</a></li>
</ul>

<!-- Headlines (Content injected via constants.js) -->
<div id="headlines">
<!-- <div style="white-space: nowrap; overflow: hidden; width: 920px;"> -->
Expand Down Expand Up @@ -114,7 +115,7 @@
</div>
</div>

<!-- Latin -->
<!-- Diacritics -->
<div id="diacritics">
<?php include("includes/hebrew/diatrics.php"); ?>
</div>
Expand Down
1 change: 1 addition & 0 deletions index.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@
<script>localStorage.clear();</script>
<script src="js/fontdrag.js" type="text/javascript" charset="utf-8"></script>
<script src="js/otfeatures-v9.1.js" type="text/javascript" charset="utf-8"></script>
<script src="js/otvars-v10.0.js" type="text/javascript" charset="utf-8"></script>
<script src="js/contentEditable.js" type="text/javascript" charset="utf-8"></script>
<script src="includes/latin/constants-latin.js" type="text/javascript" charset="utf-8"></script>
<script src="js/init.js" type="text/javascript" charset="utf-8"></script>
Expand Down
2 changes: 1 addition & 1 deletion js/init.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
// OT Features Panel
$('#showhide').click(function () {
$('#otfeatures').slideToggle("fast", function() {
$("#showhide").text($(this).is(':visible') ? "Hide OpenType Features" : "OpenType Features");
$("#showhide").text($(this).is(':visible') ? "Hide Features" : "OT Features");
});
});

Expand Down
81 changes: 81 additions & 0 deletions js/otvars-v10.0.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,81 @@
// http://www.impallari.com/testing/
// Version 10.0
// Pablo Impallari
// Variation support: Meir Sadan
//
// CSS3 Syntax

var axes = {
wght: {
min: 1,
max: 999,
init: 400
},
wdth: {
min: 50,
max: 200,
init: 100
},
opsz: {
min: 1,
max: 128,
init: 16
},
ital: {
min: 0,
max: 1,
init: 0
},
slnt: {
min: -50,
max: 50,
init: 0
}
} ;

function refreshVariations() {

// CSS3 Syntax
var vars = [];
var axeNames = Object.keys( axes );
for (var a = 0; a < axeNames.length; a++ ) {
if (!$( '#' + axeNames[a] ).length)
continue;
var axe = axes[ axeNames[ a ] ];
var t = axe.min + (axe.max - axe.min ) * $( '#' + axeNames[ a ] ).val();
if (t <= axe.min + 0.001) t = axe.min + 0.001; // + 0.001; // fix rounding or Fixed->float conversion errors
if (t >= axe.max - 0.001) t = axe.max - 0.001; // - 0.001; // fix rounding or Fixed->float conversion errors
vars.push( '"' + axeNames[ a ] + '" ' + Math.floor(t) );
}

var codeCSS3 = vars.join( ', ' );

// Show Recommended Code
var recommendedCSS = "";
recommendedCSS += "font-variation-settings: " + codeCSS3 + "; <br/>";
$('#cssvarcode').html( recommendedCSS );

// Apply the Code
$('#custom').css("font-variation-settings", codeCSS3 );

};

$(function() {

$('#showhide').after( ' | <a href="javascript://" id="showhidevars">Variations</a>' );

// OT Variations Panel
$('#showhidevars').click(function () {
$('#otvariations').slideToggle("fast", function() {
$("#showhidevars").text($(this).is(':visible') ? "Variations" : "Variations");
});
});

// Variations Init
$('.varAxisRange').on( 'input', refreshVariations ).each( function() {
var axe = axes[ $( this ).attr( 'id' ) ];
$(this).val( ( axe.init - axe.min ) / ( axe.max - axe.min ) );
});
refreshVariations();

});