Added images for ligations
This commit is contained in:
be5invis
parent
f15e685b5b
commit
2b4abb2d76
1
.gitignore
vendored
1
.gitignore
vendored
|
|
@ -40,6 +40,7 @@ pages/
|
|||
releases/
|
||||
release-archives/
|
||||
snapshot/assets/
|
||||
snapshot/index.css
|
||||
|
||||
# Generated scripts
|
||||
.buildglyphs.all.patel
|
||||
|
|
|
|||
|
|
@ -1063,7 +1063,7 @@ if [not recursive] : begin
|
|||
if [not lookups.(ligationLookupName)] : set lookups.(ligationLookupName)
|
||||
.type 'gsub_chaining'
|
||||
.subtables : list
|
||||
chain-rule {less} {arrowStick 'arrowStickLC'} {arrowStick 'arrowStickCR'} {greater}
|
||||
chain-rule {less} {arrowStick 'arrowStickLC'} {arrowStick 'arrowStickCR'} {greater} # <--> <==>
|
||||
chain-rule {less} {arrowStick 'arrowStickLR'} {greater} # <->, <=>
|
||||
chain-rule {less} {arrowStick 'arrowStickLJ'} {less} # <-<, <=<
|
||||
chain-rule {less} {arrowStick 'arrowStickLC'} {arrowStick 'arrowStickCF'} # <--, <==
|
||||
|
|
@ -1076,7 +1076,7 @@ if [not recursive] : begin
|
|||
chain-rule {arrowStick 'arrowStickFC'} {arrowStick 'arrowStickCR'} {greater} # -->, ==>
|
||||
only {'hask'} : chain-rule {arrowStick 'arrowStickFR1'} {greater 'greaterShift1'} {greater} # ->>, =>>
|
||||
chain-rule {arrowStick 'arrowStickFR'} {greater} # ->, =>
|
||||
chain-rule {arrowStick 'arrowStickFJ1'} {less 'lessShiftN1'} {less} # -<<, =<<
|
||||
only {'hask'} : chain-rule {arrowStick 'arrowStickFJ1'} {less 'lessShiftN1'} {less} # -<<, =<<
|
||||
only {'hask'} : chain-rule {arrowStick 'arrowStickFJ'} {less} # -<, =<
|
||||
|
||||
#opbd
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 27 KiB After Width: | Height: | Size: 27 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 101 KiB After Width: | Height: | Size: 101 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 408 KiB After Width: | Height: | Size: 407 KiB |
BIN
images/ligations.png
Normal file
BIN
images/ligations.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 36 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 152 KiB After Width: | Height: | Size: 152 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 164 KiB After Width: | Height: | Size: 164 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 354 KiB After Width: | Height: | Size: 354 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 81 KiB After Width: | Height: | Size: 81 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 260 KiB After Width: | Height: | Size: 260 KiB |
1
makefile
1
makefile
|
|
@ -157,6 +157,7 @@ d-webfonts : webfont-pkg-d-sans webfont-pkg-d-slab
|
|||
d-snapshot : x-snapshot-d-sans x-snapshot-d-slab
|
||||
|
||||
electronsnaps1: d-snapshot
|
||||
cd snapshot && stylus index.styl -c
|
||||
cd snapshot && electron getsnap.js --dir ../images
|
||||
images/opentype.png: electronsnaps1
|
||||
optipng $@
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
var app = require('app');
|
||||
var BrowserWindow = require('browser-window');
|
||||
const {app, BrowserWindow} = require('electron');
|
||||
var argv = require('yargs').argv;
|
||||
var fs = require('fs');
|
||||
var cp = require('child_process');
|
||||
|
|
@ -9,20 +8,20 @@ var allWindowClosed = false;
|
|||
var pendingTasks = 0;
|
||||
var zoom = 2
|
||||
|
||||
function checkQuit(){
|
||||
if(allWindowClosed && pendingTasks == 0) app.quit();
|
||||
function checkQuit() {
|
||||
if (allWindowClosed && pendingTasks == 0) app.quit();
|
||||
}
|
||||
|
||||
app.on('window-all-closed', function() {
|
||||
app.on('window-all-closed', function () {
|
||||
allWindowClosed = true;
|
||||
checkQuit()
|
||||
});
|
||||
|
||||
function combineImages(images, outfile, width, height, doubleTrim){
|
||||
function combineImages(images, outfile, width, height, doubleTrim) {
|
||||
var command = 'convert ' + images.join(' ') + ' -append -crop ' + width + 'x' + height + '+0+0 +repage -bordercolor #008000 -fuzz 5% -trim ' + (doubleTrim ? '-bordercolor ' + doubleTrim + ' -trim ' : '') + outfile;
|
||||
console.log(command);
|
||||
cp.exec(command, function(err, stdout, stderr){
|
||||
images.forEach(function(file){
|
||||
cp.exec(command, function (err, stdout, stderr) {
|
||||
images.forEach(function (file) {
|
||||
fs.unlinkSync(file);
|
||||
});
|
||||
pendingTasks -= 1;
|
||||
|
|
@ -31,36 +30,36 @@ function combineImages(images, outfile, width, height, doubleTrim){
|
|||
};
|
||||
|
||||
var ipc = require('electron').ipcMain;
|
||||
function GOTO(phase){ currentPhase = phase };
|
||||
function GOTO(phase) { currentPhase = phase };
|
||||
var phases = {
|
||||
prepare : function(event, arg){
|
||||
prepare: function (event, arg) {
|
||||
console.log(arg);
|
||||
GOTO(phases['receive-rect']);
|
||||
},
|
||||
'receive-rect' : function(event, rect){
|
||||
'receive-rect': function (event, rect) {
|
||||
pendingTasks += 1
|
||||
rect = JSON.parse(JSON.stringify(rect));
|
||||
var file = argv.dir + '/' + rect.name + '.png';
|
||||
var j = 0;
|
||||
var totalFiles = Math.ceil(rect.height / rect.windowHeight);
|
||||
var pendingFiles = totalFiles;
|
||||
function doneFileWrite(){
|
||||
function doneFileWrite() {
|
||||
pendingFiles -= 1;
|
||||
if(pendingFiles <= 0) {
|
||||
if (pendingFiles <= 0) {
|
||||
var images = [];
|
||||
for(var k = 0; k < j; k++){
|
||||
for (var k = 0; k < j; k++) {
|
||||
images.push(argv.dir + '/' + rect.name + '.' + k + '.png')
|
||||
}
|
||||
combineImages(images, file, rect.windowWidth * rect.dpi, rect.height * rect.dpi, rect.doubleTrim);
|
||||
}
|
||||
}
|
||||
function step(){
|
||||
function step() {
|
||||
event.sender.send('scroll', rect.y + j * rect.windowHeight);
|
||||
GOTO(function(event){
|
||||
mainWindow.capturePage(function(image){
|
||||
GOTO(function (event) {
|
||||
mainWindow.capturePage(function (image) {
|
||||
fs.writeFile(argv.dir + '/' + rect.name + '.' + j + '.png', image.toPng(), doneFileWrite);
|
||||
j += 1;
|
||||
if(j >= totalFiles) { // Move to next image
|
||||
if (j >= totalFiles) { // Move to next image
|
||||
event.sender.send('complete', file);
|
||||
GOTO(phases['receive-rect']);
|
||||
} else {
|
||||
|
|
@ -73,18 +72,20 @@ var phases = {
|
|||
}
|
||||
};
|
||||
var currentPhase = phases['prepare'];
|
||||
ipc.on('snapshot', function(){
|
||||
ipc.on('snapshot', function () {
|
||||
currentPhase.apply(this, arguments)
|
||||
});
|
||||
ipc.on('log', function(event, arg){
|
||||
ipc.on('log', function (event, arg) {
|
||||
console.log(arg);
|
||||
})
|
||||
|
||||
app.on('ready', function() {
|
||||
app.on('ready', function () {
|
||||
mainWindow = new BrowserWindow({
|
||||
width: 64 * 16 * zoom, height: 1024 * zoom,
|
||||
x: 5000, y: 5000,
|
||||
zoomFactor: zoom,
|
||||
webPreferences: {
|
||||
zoomFactor: zoom
|
||||
},
|
||||
show: false
|
||||
});
|
||||
mainWindow.showInactive();
|
||||
|
|
|
|||
|
|
@ -1,286 +1,8 @@
|
|||
<!DOCTYPE html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
@import url(iosevka.css);
|
||||
@import url(iosevka-slab.css);
|
||||
|
||||
.thin { font-weight: 100 }
|
||||
.extralight { font-weight: 200 }
|
||||
.light { font-weight: 300 }
|
||||
.medium { font-weight: 500 }
|
||||
.bold { font-weight: 700 }
|
||||
.extrabold { font-weight: 800 }
|
||||
.heavy { font-weight: 900 }
|
||||
.italic { font-style: italic }
|
||||
.oblique { font-style: oblique }
|
||||
.slab { font-family: "Iosevka Slab", monospace }
|
||||
|
||||
html,body{
|
||||
margin: 0;
|
||||
padding:0;
|
||||
}
|
||||
body {
|
||||
font-family: "Iosevka";
|
||||
background: #008000;
|
||||
padding-bottom: 60em;
|
||||
font-size: 15px;
|
||||
}
|
||||
pre, code { font-family: "Iosevka"; }
|
||||
|
||||
::-webkit-scrollbar {display: none;}
|
||||
|
||||
body > section {
|
||||
margin: 3em auto;
|
||||
width: 900px;
|
||||
background: white;
|
||||
}
|
||||
|
||||
/* hljs */
|
||||
section.preview {
|
||||
text-align: center;
|
||||
font-size: 80%;
|
||||
}
|
||||
section.preview pre {
|
||||
display: inline-block;
|
||||
text-align: left;
|
||||
margin: 1.2rem 0;
|
||||
line-height: 1.5;
|
||||
}
|
||||
section.color-light {
|
||||
background-color: hsl(39, 6%, 95%);
|
||||
color: #333;
|
||||
}
|
||||
.color-light .keyword, .color-light .class, .color-light .tag, .color-light .pseudo, .color-light .attr_selector, .color-light .constant, .color-light .xml .title {
|
||||
color: #446fbd;
|
||||
}
|
||||
.color-light .comment {
|
||||
color: hsl(0, 0%, 62%);
|
||||
}
|
||||
.color-light .title, .color-light .attribute, .color-light .params, .color-light .built_in {
|
||||
color: #8757ad;
|
||||
}
|
||||
.color-light .string, .color-light .pi, .color-light .language-less .keyword, .color-light .xml .value {
|
||||
color: #e88501;
|
||||
}
|
||||
.color-light .number, .color-light .xml .attribute {
|
||||
color: #6d8600;
|
||||
}
|
||||
.color-light .operator {
|
||||
color: #c33500;
|
||||
}
|
||||
section.color-dark {
|
||||
background-color: hsl(39, 6%, 12%);
|
||||
color: #cfcfcf;
|
||||
}
|
||||
.color-dark .keyword, .color-dark .class, .color-dark .tag, .color-dark .pseudo, .color-dark .attr_selector, .color-dark .constant, .color-dark .xml .title {
|
||||
color: #6c9ef8;
|
||||
}
|
||||
.color-dark .comment {
|
||||
color: #767676;
|
||||
}
|
||||
.color-dark .title, .color-dark .attribute, .color-dark .params, .color-dark .built_in {
|
||||
color: #b77fdb;
|
||||
}
|
||||
.color-dark .string, .color-dark .pi, .color-dark .language-less .keyword, .color-dark .xml .value {
|
||||
color: #D89333;
|
||||
}
|
||||
.color-dark .number, .color-dark .xml .attribute {
|
||||
color: #85a300;
|
||||
}
|
||||
.color-dark .operator {
|
||||
color: #c34564;
|
||||
}
|
||||
|
||||
section#matrix {
|
||||
height: 480px;
|
||||
position: relative;
|
||||
}
|
||||
section#matrix > div {
|
||||
position: absolute;
|
||||
font-size: 90px;
|
||||
left: 50%;
|
||||
margin-left: -3.75em;
|
||||
top: 50%;
|
||||
margin-top: -1.95em;
|
||||
}
|
||||
section#matrix > div.slab {
|
||||
margin-left: -3.25em;
|
||||
margin-top: -1.44em;
|
||||
}
|
||||
section#matrix > div > row {
|
||||
display: block;
|
||||
text-align: center;
|
||||
line-height: 0.8em;
|
||||
}
|
||||
|
||||
section#matrix > div > row > span {
|
||||
font-size: 0.4em;
|
||||
padding: 0 0.5em
|
||||
}
|
||||
|
||||
section#opentype {
|
||||
width: 34.5em;
|
||||
padding: 0 3em
|
||||
}
|
||||
section#opentype > h2 {
|
||||
display: none;
|
||||
}
|
||||
section#opentype > div.hr {
|
||||
font-size: 80%;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.2em;
|
||||
margin: 3rem auto;
|
||||
text-align: center;
|
||||
display: block;
|
||||
}
|
||||
section#opentype > div.hr:before, section#opentype > div.hr:after {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
border-bottom: 1px solid #ddd;
|
||||
width: 4em;
|
||||
margin: 0 1em;
|
||||
vertical-align: 0.3em;
|
||||
}
|
||||
section#opentype > div {
|
||||
display: flex;
|
||||
margin-bottom: 1em;
|
||||
align-items: center;
|
||||
}
|
||||
section#opentype > div > span {
|
||||
display: block;
|
||||
line-height: 1.5em;
|
||||
height: 4.5em;
|
||||
padding: 0.25em;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
section#opentype span.normal-example {
|
||||
padding: 0.25em;
|
||||
text-align: right;
|
||||
width: 5rem;
|
||||
}
|
||||
section#opentype span.arrow {
|
||||
line-height: 4.5em;
|
||||
margin: 0 0.5rem 0 0.25em;
|
||||
}
|
||||
section#opentype span.feature-example {
|
||||
border-color: #ccc;
|
||||
border-radius: 0.25rem;
|
||||
margin-right: 0.5rem;
|
||||
padding: 0.25em 0.5em;
|
||||
width: 5em;
|
||||
}
|
||||
|
||||
section#opentype span.lhs {
|
||||
display: block;
|
||||
font-size: 75%;
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
|
||||
section#opentype span.rhs.sub {
|
||||
color: #989898;
|
||||
}
|
||||
section#opentype span.rhs.sub b {
|
||||
font-weight: normal;
|
||||
color: black;
|
||||
}
|
||||
|
||||
#family {
|
||||
background: white;
|
||||
font-size: 0.9em
|
||||
}
|
||||
#picker:hover .menu{
|
||||
display: block;
|
||||
}
|
||||
#family .group {
|
||||
display: flex;
|
||||
}
|
||||
#family .group a {
|
||||
display: block;
|
||||
padding: 0.5rem;
|
||||
flex: 1;
|
||||
text-shadow: none;
|
||||
color: black;
|
||||
text-decoration: none;
|
||||
}
|
||||
#family .group a.italic, #family .group a.oblique {
|
||||
flex: 1.3
|
||||
}
|
||||
#family .group a.slab {
|
||||
flex: 1.2
|
||||
}
|
||||
#family .group a.slab.italic, #family .group a.slab.oblique {
|
||||
flex: 1.7
|
||||
}
|
||||
|
||||
#downloadoptions {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
#downloadoptions > div {
|
||||
flex: none;
|
||||
width: 12em;
|
||||
border: 3px solid #ddd;
|
||||
border-radius: 1em;
|
||||
margin: 0.5em;
|
||||
}
|
||||
#downloadoptions > div > h3 {
|
||||
margin: 0;
|
||||
padding: 1rem 0 1rem 0;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
font-size: 1em;
|
||||
}
|
||||
#downloadoptions > div > ul {
|
||||
display: flex;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
justify-content: center;
|
||||
}
|
||||
#downloadoptions > div > ul > li {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 3.5em;
|
||||
position: relative;
|
||||
padding: 0 0.5em 1em
|
||||
}
|
||||
#downloadoptions > div > ul > li > div {
|
||||
font-size: 0.8em;
|
||||
height: 2em;
|
||||
width: 2em;
|
||||
line-height: 2em;
|
||||
text-align: center;
|
||||
padding: 0.5em;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 0.5em;
|
||||
}
|
||||
#downloadoptions > div > ul > li > h4 {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 1.25em;
|
||||
margin: 0;
|
||||
font-size: 0.6em;
|
||||
text-align: center;
|
||||
font-weight: normal;
|
||||
}
|
||||
#downloadoptions .missing {
|
||||
color: rgba(0, 0, 0, 0.25)
|
||||
}
|
||||
#downloadoptions span{
|
||||
outline: 1px solid rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
#downloadoptions .fwm {
|
||||
padding-left: 0.25em;
|
||||
padding-right: 0.25em;
|
||||
margin-right: 0.25em;
|
||||
margin-left: -0.125em;
|
||||
}
|
||||
#downloadoptions .fwl {
|
||||
padding-right: 0.5em;
|
||||
}
|
||||
|
||||
</style>
|
||||
<link rel="stylesheet" href="index.css"></link>
|
||||
</head>
|
||||
<body>
|
||||
<h1>This page is used for taking snapshots of Iosevka only.</h1>
|
||||
<section id="family" class="menu">
|
||||
|
|
@ -482,100 +204,17 @@ section#opentype span.rhs.sub b {
|
|||
</div>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
if(window && window.process && window.process.type && process.versions['electron']) (function(){
|
||||
console.log('I AN IN ELECTRON');
|
||||
var windowWidth = window.innerWidth;
|
||||
var windowHeight = window.innerHeight;
|
||||
var dpi = window.devicePixelRatio;
|
||||
var ipc = require('electron').ipcRenderer;
|
||||
|
||||
var onScroll = function(){};
|
||||
ipc.on('scroll', function(){
|
||||
onScroll.apply(this, arguments);
|
||||
setTimeout(function(){ ipc.send('snapshot', 'scroll-done') }, 100);
|
||||
});
|
||||
var onComplete = function(){};
|
||||
ipc.on('complete', function(){ onComplete.apply(this, arguments) });
|
||||
|
||||
function captureElement(options, callback){
|
||||
window.scroll(0, 0);
|
||||
setTimeout(function(){
|
||||
var rect = options.el.getBoundingClientRect();
|
||||
ipc.send('snapshot', {
|
||||
name: options.name,
|
||||
windowWidth: windowWidth,
|
||||
windowHeight: windowHeight,
|
||||
doubleTrim: options.doubleTrim,
|
||||
dpi: dpi,
|
||||
x: rect.left | 0,
|
||||
y: rect.top | 0,
|
||||
width: rect.width | 0,
|
||||
height: rect.height | 0
|
||||
});
|
||||
onScroll = function(event, arg){
|
||||
window.scrollTo(0, arg)
|
||||
};
|
||||
onComplete = function(){
|
||||
if(callback) callback();
|
||||
onComplete = function(){};
|
||||
};
|
||||
}, 10);
|
||||
}
|
||||
|
||||
var snapshotTasks = [
|
||||
{
|
||||
el: document.querySelector('#languages'),
|
||||
name: 'languages'
|
||||
},
|
||||
{
|
||||
el: document.querySelector('#variants'),
|
||||
name: 'variants'
|
||||
},
|
||||
{
|
||||
el: document.querySelector('#opentype'),
|
||||
name: 'opentype'
|
||||
},
|
||||
{
|
||||
el: document.querySelector('#matrix'),
|
||||
name: 'matrix'
|
||||
},
|
||||
{
|
||||
el: document.querySelector('#family'),
|
||||
name: 'family'
|
||||
},
|
||||
{
|
||||
el: document.querySelector('#previews'),
|
||||
name: 'preview-all'
|
||||
},
|
||||
{
|
||||
el: document.querySelector('#weights'),
|
||||
name: 'weights'
|
||||
},
|
||||
{
|
||||
el: document.querySelector('#downloadoptions'),
|
||||
name: 'download-options',
|
||||
doubleTrim: 'white'
|
||||
}
|
||||
]
|
||||
|
||||
window.onload = function(){
|
||||
ipc.send('snapshot', 'i am ready');
|
||||
console.log('I AM READY');
|
||||
current = 0;
|
||||
var step = function(){
|
||||
var doit = function(){
|
||||
captureElement(snapshotTasks[current], function(){
|
||||
current += 1;
|
||||
if(current >= snapshotTasks.length) window.close()
|
||||
else setTimeout(step, 100)
|
||||
})
|
||||
};
|
||||
if(snapshotTasks[current].prepare) snapshotTasks[current].prepare(doit);
|
||||
else setTimeout(doit, 1)
|
||||
};
|
||||
setTimeout(step, 2000);
|
||||
}
|
||||
})()
|
||||
</script>
|
||||
<section id="ligations">
|
||||
<table>
|
||||
<tr class="first"><th>Feature Tags</th><th>Designed For</th><th>Sample</th></tr>
|
||||
<tr><td><i>No Ligation</i></td><td> </td><td class="nolig"><pre>-<< -< <-- <<- <- -> ->> --> >- >>- <-> <--> <!--
|
||||
=<< =< <== <<= <= => =>> ==> >= >>= <=> <==></pre></td></tr>
|
||||
<tr><td>calt</td><td><i>Default setting in editors</i></td><td><pre><s>-<<</s> <s>-<</s> <-- <s><<-</s> <- -> <s>->></s> --> <s>>-</s> <s>>>-</s> <-> <--> <!--
|
||||
<s>=<<</s> <s>=<</s> <== <s><<=</s> <s><=</s> => <s>=>></s> ==> <s>>=</s> <s>>>=</s> <=> <==></pre></td></tr>
|
||||
<tr><td>XHS_, XPTL</td><td>Haskell, PatEL</td><td style="font-feature-settings: "XHS_" 1"><pre>-<< -< <-- <<- <- -> ->> --> >- >>- <-> <--> <!--
|
||||
=<< =< <== <<= <s><=</s> => =>> ==> <s>>=</s> >>= <=> <==></pre></td></tr>
|
||||
</table>
|
||||
</section>
|
||||
|
||||
<script src="index.js"></script>
|
||||
</body>
|
||||
98
snapshot/index.js
Normal file
98
snapshot/index.js
Normal file
|
|
@ -0,0 +1,98 @@
|
|||
if(window && window.process && window.process.type && process.versions['electron']) (function(){
|
||||
console.log('I AN IN ELECTRON');
|
||||
var windowWidth = window.innerWidth;
|
||||
var windowHeight = window.innerHeight;
|
||||
var dpi = window.devicePixelRatio;
|
||||
var ipc = require('electron').ipcRenderer;
|
||||
|
||||
var onScroll = function(){};
|
||||
ipc.on('scroll', function(){
|
||||
onScroll.apply(this, arguments);
|
||||
setTimeout(function(){ ipc.send('snapshot', 'scroll-done') }, 500);
|
||||
});
|
||||
var onComplete = function(){};
|
||||
ipc.on('complete', function(){ onComplete.apply(this, arguments) });
|
||||
|
||||
function captureElement(options, callback){
|
||||
window.scroll(0, 0);
|
||||
setTimeout(function(){
|
||||
var rect = options.el.getBoundingClientRect();
|
||||
onScroll = function(event, arg){
|
||||
window.scrollTo(0, arg);
|
||||
};
|
||||
onComplete = function(){
|
||||
if(callback) callback();
|
||||
onComplete = function(){};
|
||||
};
|
||||
ipc.send('snapshot', {
|
||||
name: options.name,
|
||||
windowWidth: windowWidth,
|
||||
windowHeight: windowHeight,
|
||||
doubleTrim: options.doubleTrim,
|
||||
dpi: dpi,
|
||||
x: rect.left | 0,
|
||||
y: rect.top | 0,
|
||||
width: rect.width | 0,
|
||||
height: rect.height | 0
|
||||
});
|
||||
}, 10);
|
||||
}
|
||||
|
||||
window.onload = function(){
|
||||
var snapshotTasks = [
|
||||
{
|
||||
el: document.querySelector('#downloadoptions'),
|
||||
name: 'download-options',
|
||||
doubleTrim: 'white'
|
||||
},
|
||||
{
|
||||
el: document.querySelector('#languages'),
|
||||
name: 'languages'
|
||||
},
|
||||
{
|
||||
el: document.querySelector('#variants'),
|
||||
name: 'variants'
|
||||
},
|
||||
{
|
||||
el: document.querySelector('#opentype'),
|
||||
name: 'opentype'
|
||||
},
|
||||
{
|
||||
el: document.querySelector('#matrix'),
|
||||
name: 'matrix'
|
||||
},
|
||||
{
|
||||
el: document.querySelector('#family'),
|
||||
name: 'family'
|
||||
},
|
||||
{
|
||||
el: document.querySelector('#previews'),
|
||||
name: 'preview-all'
|
||||
},
|
||||
{
|
||||
el: document.querySelector('#weights'),
|
||||
name: 'weights'
|
||||
},
|
||||
{
|
||||
el: document.querySelector('#ligations'),
|
||||
name: 'ligations',
|
||||
doubleTrim: 'white'
|
||||
}
|
||||
];
|
||||
current = 0;
|
||||
var step = function(){
|
||||
var doit = function(){
|
||||
captureElement(snapshotTasks[current], function(){
|
||||
current += 1;
|
||||
if(current >= snapshotTasks.length) window.close()
|
||||
else setTimeout(step, 100)
|
||||
})
|
||||
};
|
||||
if(snapshotTasks[current].prepare) snapshotTasks[current].prepare(doit);
|
||||
else setTimeout(doit, 100)
|
||||
};
|
||||
ipc.send('snapshot', 'i am ready');
|
||||
console.log('I AM READY');
|
||||
setTimeout(step, 2000);
|
||||
}
|
||||
})()
|
||||
258
snapshot/index.styl
Normal file
258
snapshot/index.styl
Normal file
|
|
@ -0,0 +1,258 @@
|
|||
@import url(iosevka.css)
|
||||
@import url(iosevka-slab.css)
|
||||
|
||||
.thin { font-weight: 100 }
|
||||
.extralight { font-weight: 200 }
|
||||
.light { font-weight: 300 }
|
||||
.medium { font-weight: 500 }
|
||||
.bold { font-weight: 700 }
|
||||
.extrabold { font-weight: 800 }
|
||||
.heavy { font-weight: 900 }
|
||||
.italic { font-style: italic }
|
||||
.oblique { font-style: oblique }
|
||||
.slab { font-family: "Iosevka Slab", monospace }
|
||||
|
||||
html,body{
|
||||
margin: 0
|
||||
padding:0
|
||||
}
|
||||
body {
|
||||
font-family: "Iosevka"
|
||||
background: #008000
|
||||
padding-bottom: 60em
|
||||
font-size: 15px
|
||||
}
|
||||
pre, code { font-family: "Iosevka"; }
|
||||
|
||||
::-webkit-scrollbar {display: none;}
|
||||
|
||||
body > section {
|
||||
margin: 3em auto
|
||||
width: 900px
|
||||
background: white
|
||||
}
|
||||
|
||||
/* hljs */
|
||||
section.preview {
|
||||
text-align: center
|
||||
font-size: 80%
|
||||
}
|
||||
section.preview pre {
|
||||
display: inline-block
|
||||
text-align: left
|
||||
margin: 1.2rem 0
|
||||
line-height: 1.5
|
||||
}
|
||||
section.color-light {
|
||||
background-color: hsl(39, 6%, 95%)
|
||||
color: #333
|
||||
}
|
||||
.color-light .keyword, .color-light .class, .color-light .tag, .color-light .pseudo, .color-light .attr_selector, .color-light .constant, .color-light .xml .title {
|
||||
color: #446fbd
|
||||
}
|
||||
.color-light .comment {
|
||||
color: hsl(0, 0%, 62%)
|
||||
}
|
||||
.color-light .title, .color-light .attribute, .color-light .params, .color-light .built_in {
|
||||
color: #8757ad
|
||||
}
|
||||
.color-light .string, .color-light .pi, .color-light .language-less .keyword, .color-light .xml .value {
|
||||
color: #e88501
|
||||
}
|
||||
.color-light .number, .color-light .xml .attribute {
|
||||
color: #6d8600
|
||||
}
|
||||
.color-light .operator {
|
||||
color: #c33500
|
||||
}
|
||||
section.color-dark {
|
||||
background-color: hsl(39, 6%, 12%)
|
||||
color: #cfcfcf
|
||||
}
|
||||
.color-dark .keyword, .color-dark .class, .color-dark .tag, .color-dark .pseudo, .color-dark .attr_selector, .color-dark .constant, .color-dark .xml .title {
|
||||
color: #6c9ef8
|
||||
}
|
||||
.color-dark .comment {
|
||||
color: #767676
|
||||
}
|
||||
.color-dark .title, .color-dark .attribute, .color-dark .params, .color-dark .built_in {
|
||||
color: #b77fdb
|
||||
}
|
||||
.color-dark .string, .color-dark .pi, .color-dark .language-less .keyword, .color-dark .xml .value {
|
||||
color: #D89333
|
||||
}
|
||||
.color-dark .number, .color-dark .xml .attribute {
|
||||
color: #85a300
|
||||
}
|
||||
.color-dark .operator {
|
||||
color: #c34564
|
||||
}
|
||||
|
||||
section#matrix
|
||||
height: 480px
|
||||
position: relative
|
||||
> div
|
||||
position: absolute
|
||||
font-size: 90px
|
||||
left: 50%
|
||||
margin-left: -3.75em
|
||||
top: 50%
|
||||
margin-top: -1.95em
|
||||
> row
|
||||
display: block
|
||||
text-align: center
|
||||
line-height: 0.8em
|
||||
> span
|
||||
font-size: 0.4em
|
||||
padding: 0 0.5em
|
||||
&.slab
|
||||
margin-left: -3.25em
|
||||
margin-top: -1.44em
|
||||
|
||||
section#matrix > div > row > span {
|
||||
font-size: 0.4em
|
||||
padding: 0 0.5em
|
||||
}
|
||||
|
||||
section#opentype
|
||||
width: 34.5em
|
||||
padding: 0 3em
|
||||
> h2 { display: none }
|
||||
> div.hr
|
||||
font-size: 80%
|
||||
text-transform: uppercase
|
||||
letter-spacing: 0.2em
|
||||
margin: 3rem auto
|
||||
text-align: center
|
||||
display: block
|
||||
&:before, &:after
|
||||
content: ''
|
||||
display: inline-block
|
||||
border-bottom: 1px solid #ddd
|
||||
width: 4em
|
||||
margin: 0 1em
|
||||
vertical-align: 0.3em
|
||||
> div
|
||||
display: flex
|
||||
margin-bottom: 1em
|
||||
align-items: center
|
||||
> span
|
||||
display: block
|
||||
line-height: 1.5em
|
||||
height: 4.5em
|
||||
padding: 0.25em
|
||||
border: 1px solid transparent
|
||||
|
||||
span.normal-example
|
||||
padding: 0.25em
|
||||
text-align: right
|
||||
width: 5rem
|
||||
span.arrow
|
||||
line-height: 4.5em
|
||||
margin: 0 0.5rem 0 0.25em
|
||||
span.feature-example
|
||||
border-color: #ccc
|
||||
border-radius: 0.25rem
|
||||
margin-right: 0.5rem
|
||||
padding: 0.25em 0.5em
|
||||
width: 5em
|
||||
span.lhs
|
||||
display: block
|
||||
font-size: 75%
|
||||
border-bottom: 1px solid #ddd
|
||||
span.rhs.sub
|
||||
color: #989898
|
||||
b
|
||||
font-weight: normal
|
||||
color: black
|
||||
|
||||
|
||||
#family
|
||||
background: white
|
||||
font-size: 0.9em
|
||||
.group { display: flex }
|
||||
.group a
|
||||
display: block
|
||||
padding: 0.5rem
|
||||
flex: 1
|
||||
text-shadow: none
|
||||
color: black
|
||||
text-decoration: none
|
||||
&.italic, &.oblique { flex: 1.3 }
|
||||
&.slab { flex: 1.2 }
|
||||
&.slab.italic, &.slab.oblique { flex: 1.7 }
|
||||
|
||||
#downloadoptions
|
||||
display: flex
|
||||
justify-content: center
|
||||
> div
|
||||
flex: none
|
||||
width: 12em
|
||||
border: 3px solid #ddd
|
||||
border-radius: 1em
|
||||
margin: 0.5em
|
||||
> h3
|
||||
margin: 0
|
||||
padding: 1rem 0 1rem 0
|
||||
text-align: center
|
||||
font-weight: bold
|
||||
font-size: 1em
|
||||
> ul
|
||||
display: flex
|
||||
list-style: none
|
||||
margin: 0
|
||||
padding: 0
|
||||
justify-content: center
|
||||
> li
|
||||
margin: 0
|
||||
padding: 0
|
||||
height: 3.5em
|
||||
position: relative
|
||||
padding: 0 0.5em 1em
|
||||
> div
|
||||
font-size: 0.8em
|
||||
height: 2em
|
||||
width: 2em
|
||||
line-height: 2em
|
||||
text-align: center
|
||||
padding: 0.5em
|
||||
border: 1px solid #ddd
|
||||
border-radius: 0.5em
|
||||
> h4
|
||||
position: absolute
|
||||
left: 0
|
||||
right: 0
|
||||
bottom: 1.25em
|
||||
margin: 0
|
||||
font-size: 0.6em
|
||||
text-align: center
|
||||
font-weight: normal
|
||||
.missing
|
||||
color: rgba(0, 0, 0, 0.25)
|
||||
span
|
||||
outline: 1px solid rgba(0, 0, 0, 0.2)
|
||||
.fwm
|
||||
padding-left: 0.25em
|
||||
padding-right: 0.25em
|
||||
margin-right: 0.25em
|
||||
margin-left: -0.125em
|
||||
.fwl
|
||||
padding-right: 0.5em
|
||||
|
||||
#ligations > table
|
||||
border-spacing 0
|
||||
border-top 2px solid black
|
||||
border-bottom 2px solid black
|
||||
margin 1em
|
||||
pre
|
||||
margin 0
|
||||
th, td
|
||||
padding: 0.4em 1em
|
||||
text-align: justify
|
||||
tr.first th
|
||||
border-bottom: 1px solid black
|
||||
s, .nolig
|
||||
text-decoration: none
|
||||
opacity: 0.25
|
||||
.nolig
|
||||
font-feature-settings: "calt" 0;
|
||||
Loading…
Reference in New Issue
Block a user