commit bd6f762f946536c371d44418f107a88962c34566
parent 824fb7fd2f5da39f65b469def167b4dbf0b4ed21
Author: Emily Eisenberg <emily@khanacademy.org>
Date: Mon, 22 Sep 2014 14:23:23 -0700
Improve the fonts.less experience
Summary:
Create a fonts.less file which generates identical css to fonts.css, but using
less rules to be more understandable and customizable. For example, add the
ability to change where the fonts directory is located (instead of mandating it
be located next to the less file), and add the ability to disable specific font
formats (like disable EOTs when IE8 support isn't needed).
Test Plan:
- Ensure that the test page and huxley page still work
- Ensure that the output of `./node_modules/.bin/lessc static/fonts.less` is
the same as the original css by running both through
`./node_modules/.bin/cleancss` and diffing them.
- Ensure that the huxley screenshots haven't changed
- Ensure that the build step still works
Reviewers: alpert
Reviewed By: alpert
Differential Revision: http://phabricator.khanacademy.org/D13326
Diffstat:
8 files changed, 82 insertions(+), 250 deletions(-)
diff --git a/Makefile b/Makefile
@@ -10,13 +10,10 @@ build/katex.js: katex.js $(wildcard src/*.js)
build/katex.min.js: build/katex.js
./node_modules/.bin/uglifyjs --mangle < $< > $@
-build/katex.less.css: static/katex.less
- ./node_modules/.bin/lessc $< > $@
+build/%.less.css: static/%.less
+ ./node_modules/.bin/lessc $< $@
-build/katex.css: build/katex.less.css static/fonts.css
- cat $^ > $@
-
-build/katex.min.css: build/katex.css
+build/katex.min.css: build/katex.less.css
./node_modules/.bin/cleancss -o $@ $<
.PHONY: build/fonts
diff --git a/package.json b/package.json
@@ -16,7 +16,7 @@
"devDependencies": {
"browserify": "~2.29.1",
"express": "~3.3.3",
- "less": "~1.4.2",
+ "less": "~1.7.5",
"uglify-js": "~2.4.15",
"clean-css": "~2.2.15",
"huxley": "~0.8.1",
diff --git a/server.js b/server.js
@@ -30,13 +30,20 @@ app.get("/katex.css", function(req, res, next) {
next(err);
return;
}
- less.render(data, function(err, css) {
+
+ var parser = new less.Parser({
+ paths: ["./static"],
+ filename: "katex.less"
+ });
+
+ parser.parse(data, function(err, tree) {
if (err) {
next(err);
return;
}
+
res.setHeader("Content-Type", "text/css");
- res.send(css);
+ res.send(tree.toCSS());
});
});
});
diff --git a/static/fonts.css b/static/fonts.css
@@ -1,239 +0,0 @@
-@font-face {
- font-family: 'KaTeX_AMS';
- src: url('fonts/KaTeX_AMS-Regular.eot');
- src: url('fonts/KaTeX_AMS-Regular.eot?#iefix') format('embedded-opentype'),
- url('fonts/KaTeX_AMS-Regular.woff') format('woff'),
- url('fonts/KaTeX_AMS-Regular.ttf') format('truetype');
- font-weight: normal;
- font-style: normal;
-}
-
-@font-face {
- font-family: 'KaTeX_Caligraphic';
- src: url('fonts/KaTeX_Caligraphic-Bold.eot');
- src: url('fonts/KaTeX_Caligraphic-Bold.eot?#iefix') format('embedded-opentype'),
- url('fonts/KaTeX_Caligraphic-Bold.woff') format('woff'),
- url('fonts/KaTeX_Caligraphic-Bold.ttf') format('truetype');
- font-weight: bold;
- font-style: normal;
-}
-
-@font-face {
- font-family: 'KaTeX_Caligraphic';
- src: url('fonts/KaTeX_Caligraphic-Regular.eot');
- src: url('fonts/KaTeX_Caligraphic-Regular.eot?#iefix') format('embedded-opentype'),
- url('fonts/KaTeX_Caligraphic-Regular.woff') format('woff'),
- url('fonts/KaTeX_Caligraphic-Regular.ttf') format('truetype');
- font-weight: normal;
- font-style: normal;
-}
-
-@font-face {
- font-family: 'KaTeX_Fraktur';
- src: url('fonts/KaTeX_Fraktur-Bold.eot');
- src: url('fonts/KaTeX_Fraktur-Bold.eot?#iefix') format('embedded-opentype'),
- url('fonts/KaTeX_Fraktur-Bold.woff') format('woff'),
- url('fonts/KaTeX_Fraktur-Bold.ttf') format('truetype');
- font-weight: bold;
- font-style: normal;
-}
-
-@font-face {
- font-family: 'KaTeX_Fraktur';
- src: url('fonts/KaTeX_Fraktur-Regular.eot');
- src: url('fonts/KaTeX_Fraktur-Regular.eot?#iefix') format('embedded-opentype'),
- url('fonts/KaTeX_Fraktur-Regular.woff') format('woff'),
- url('fonts/KaTeX_Fraktur-Regular.ttf') format('truetype');
- font-weight: normal;
- font-style: normal;
-}
-
-@font-face {
- font-family: 'KaTeX_Greek';
- src: url('fonts/KaTeX_Greek-Bold.eot');
- src: url('fonts/KaTeX_Greek-Bold.eot?#iefix') format('embedded-opentype'),
- url('fonts/KaTeX_Greek-Bold.woff') format('woff'),
- url('fonts/KaTeX_Greek-Bold.ttf') format('truetype');
- font-weight: bold;
- font-style: normal;
-}
-
-@font-face {
- font-family: 'KaTeX_Greek';
- src: url('fonts/KaTeX_Greek-BoldItalic.eot');
- src: url('fonts/KaTeX_Greek-BoldItalic.eot?#iefix') format('embedded-opentype'),
- url('fonts/KaTeX_Greek-BoldItalic.woff') format('woff'),
- url('fonts/KaTeX_Greek-BoldItalic.ttf') format('truetype');
- font-weight: bold;
- font-style: italic;
-}
-
-@font-face {
- font-family: 'KaTeX_Greek';
- src: url('fonts/KaTeX_Greek-Italic.eot');
- src: url('fonts/KaTeX_Greek-Italic.eot?#iefix') format('embedded-opentype'),
- url('fonts/KaTeX_Greek-Italic.woff') format('woff'),
- url('fonts/KaTeX_Greek-Italic.ttf') format('truetype');
- font-weight: normal;
- font-style: italic;
-}
-
-@font-face {
- font-family: 'KaTeX_Greek';
- src: url('fonts/KaTeX_Greek-Regular.eot');
- src: url('fonts/KaTeX_Greek-Regular.eot?#iefix') format('embedded-opentype'),
- url('fonts/KaTeX_Greek-Regular.woff') format('woff'),
- url('fonts/KaTeX_Greek-Regular.ttf') format('truetype');
- font-weight: normal;
- font-style: normal;
-}
-
-@font-face {
- font-family: 'KaTeX_Main';
- src: url('fonts/KaTeX_Main-Bold.eot');
- src: url('fonts/KaTeX_Main-Bold.eot?#iefix') format('embedded-opentype'),
- url('fonts/KaTeX_Main-Bold.woff') format('woff'),
- url('fonts/KaTeX_Main-Bold.ttf') format('truetype');
- font-weight: bold;
- font-style: normal;
-}
-
-@font-face {
- font-family: 'KaTeX_Main';
- src: url('fonts/KaTeX_Main-Italic.eot');
- src: url('fonts/KaTeX_Main-Italic.eot?#iefix') format('embedded-opentype'),
- url('fonts/KaTeX_Main-Italic.woff') format('woff'),
- url('fonts/KaTeX_Main-Italic.ttf') format('truetype');
- font-weight: normal;
- font-style: italic;
-}
-
-@font-face {
- font-family: 'KaTeX_Main';
- src: url('fonts/KaTeX_Main-Regular.eot');
- src: url('fonts/KaTeX_Main-Regular.eot?#iefix') format('embedded-opentype'),
- url('fonts/KaTeX_Main-Regular.woff') format('woff'),
- url('fonts/KaTeX_Main-Regular.ttf') format('truetype');
- font-weight: normal;
- font-style: normal;
-}
-
-@font-face {
- font-family: 'KaTeX_Math';
- src: url('fonts/KaTeX_Math-BoldItalic.eot');
- src: url('fonts/KaTeX_Math-BoldItalic.eot?#iefix') format('embedded-opentype'),
- url('fonts/KaTeX_Math-BoldItalic.woff') format('woff'),
- url('fonts/KaTeX_Math-BoldItalic.ttf') format('truetype');
- font-weight: bold;
- font-style: italic;
-}
-
-@font-face {
- font-family: 'KaTeX_Math';
- src: url('fonts/KaTeX_Math-Italic.eot');
- src: url('fonts/KaTeX_Math-Italic.eot?#iefix') format('embedded-opentype'),
- url('fonts/KaTeX_Math-Italic.woff') format('woff'),
- url('fonts/KaTeX_Math-Italic.ttf') format('truetype');
- font-weight: normal;
- font-style: italic;
-}
-
-@font-face {
- font-family: 'KaTeX_Math';
- src: url('fonts/KaTeX_Math-Regular.eot');
- src: url('fonts/KaTeX_Math-Regular.eot?#iefix') format('embedded-opentype'),
- url('fonts/KaTeX_Math-Regular.woff') format('woff'),
- url('fonts/KaTeX_Math-Regular.ttf') format('truetype');
- font-weight: normal;
- font-style: normal;
-}
-
-@font-face {
- font-family: 'KaTeX_SansSerif';
- src: url('fonts/KaTeX_SansSerif-Bold.eot');
- src: url('fonts/KaTeX_SansSerif-Bold.eot?#iefix') format('embedded-opentype'),
- url('fonts/KaTeX_SansSerif-Bold.woff') format('woff'),
- url('fonts/KaTeX_SansSerif-Bold.ttf') format('truetype');
- font-weight: bold;
- font-style: normal;
-}
-
-@font-face {
- font-family: 'KaTeX_SansSerif';
- src: url('fonts/KaTeX_SansSerif-Italic.eot');
- src: url('fonts/KaTeX_SansSerif-Italic.eot?#iefix') format('embedded-opentype'),
- url('fonts/KaTeX_SansSerif-Italic.woff') format('woff'),
- url('fonts/KaTeX_SansSerif-Italic.ttf') format('truetype');
- font-weight: normal;
- font-style: italic;
-}
-
-@font-face {
- font-family: 'KaTeX_SansSerif';
- src: url('fonts/KaTeX_SansSerif-Regular.eot');
- src: url('fonts/KaTeX_SansSerif-Regular.eot?#iefix') format('embedded-opentype'),
- url('fonts/KaTeX_SansSerif-Regular.woff') format('woff'),
- url('fonts/KaTeX_SansSerif-Regular.ttf') format('truetype');
- font-weight: normal;
- font-style: normal;
-}
-
-@font-face {
- font-family: 'KaTeX_Script';
- src: url('fonts/KaTeX_Script-Regular.eot');
- src: url('fonts/KaTeX_Script-Regular.eot?#iefix') format('embedded-opentype'),
- url('fonts/KaTeX_Script-Regular.woff') format('woff'),
- url('fonts/KaTeX_Script-Regular.ttf') format('truetype');
- font-weight: normal;
- font-style: normal;
-}
-
-@font-face {
- font-family: 'KaTeX_Size1';
- src: url('fonts/KaTeX_Size1-Regular.eot');
- src: url('fonts/KaTeX_Size1-Regular.eot?#iefix') format('embedded-opentype'),
- url('fonts/KaTeX_Size1-Regular.woff') format('woff'),
- url('fonts/KaTeX_Size1-Regular.ttf') format('truetype');
- font-weight: normal;
- font-style: normal;
-}
-
-@font-face {
- font-family: 'KaTeX_Size2';
- src: url('fonts/KaTeX_Size2-Regular.eot');
- src: url('fonts/KaTeX_Size2-Regular.eot?#iefix') format('embedded-opentype'),
- url('fonts/KaTeX_Size2-Regular.woff') format('woff'),
- url('fonts/KaTeX_Size2-Regular.ttf') format('truetype');
- font-weight: normal;
- font-style: normal;
-}
-
-@font-face {
- font-family: 'KaTeX_Size3';
- src: url('fonts/KaTeX_Size3-Regular.eot');
- src: url('fonts/KaTeX_Size3-Regular.eot?#iefix') format('embedded-opentype'),
- url('fonts/KaTeX_Size3-Regular.woff') format('woff'),
- url('fonts/KaTeX_Size3-Regular.ttf') format('truetype');
- font-weight: normal;
- font-style: normal;
-}
-
-@font-face {
- font-family: 'KaTeX_Size4';
- src: url('fonts/KaTeX_Size4-Regular.eot');
- src: url('fonts/KaTeX_Size4-Regular.eot?#iefix') format('embedded-opentype'),
- url('fonts/KaTeX_Size4-Regular.woff') format('woff'),
- url('fonts/KaTeX_Size4-Regular.ttf') format('truetype');
- font-weight: normal;
- font-style: normal;
-}
-
-@font-face {
- font-family: 'KaTeX_Typewriter';
- src: url('fonts/KaTeX_Typewriter-Regular.eot');
- src: url('fonts/KaTeX_Typewriter-Regular.eot?#iefix') format('embedded-opentype'),
- url('fonts/KaTeX_Typewriter-Regular.woff') format('woff'),
- url('fonts/KaTeX_Typewriter-Regular.ttf') format('truetype');
- font-weight: normal;
- font-style: normal;
-}
diff --git a/static/fonts.less b/static/fonts.less
@@ -0,0 +1,67 @@
+@font-folder: "fonts";
+@use-eot: true;
+@use-ttf: true;
+@use-woff: true;
+
+.use-eot(@family, @family-suffix) when (@use-eot = true) {
+ src: url('@{font-folder}/KaTeX_@{family}-@{family-suffix}.eot');
+ src+: url('@{font-folder}/KaTeX_@{family}-@{family-suffix}.eot#iefix') format('embedded-opentype')
+}
+
+.use-woff(@family, @family-suffix) when (@use-woff = true) {
+ src+: url('@{font-folder}/KaTeX_@{family}-@{family-suffix}.woff') format('woff')
+}
+
+.use-ttf(@family, @family-suffix) when (@use-ttf = true) {
+ src+: url('@{font-folder}/KaTeX_@{family}-@{family-suffix}.ttf') format('ttf')
+}
+
+.generate-suffix(@weight, @style) when (@weight = normal) and (@style = normal) {
+ @suffix: 'Regular';
+}
+.generate-suffix(@weight, @style) when (@weight = normal) and (@style = italic) {
+ @suffix: 'Italic';
+}
+.generate-suffix(@weight, @style) when (@weight = bold) and (@style = normal) {
+ @suffix: 'Bold';
+}
+.generate-suffix(@weight, @style) when (@weight = bold) and (@style = italic) {
+ @suffix: 'BoldItalic';
+}
+
+.font-face(@family, @weight, @style) {
+ .generate-suffix(@weight, @style);
+ @font-face {
+ font-family: 'KaTeX_@{family}';
+ .use-eot(@family, @suffix);
+ .use-woff(@family, @suffix);
+ .use-ttf(@family, @suffix);
+ font-weight: @weight;
+ font-style: @style;
+ }
+}
+
+.font-face('AMS', normal, normal);
+.font-face('Caligraphic', bold, normal);
+.font-face('Caligraphic', normal, normal);
+.font-face('Fraktur', bold, normal);
+.font-face('Fraktur', normal, normal);
+.font-face('Greek', bold, normal);
+.font-face('Greek', bold, italic);
+.font-face('Greek', normal, italic);
+.font-face('Greek', normal, normal);
+.font-face('Main', bold, normal);
+.font-face('Main', normal, italic);
+.font-face('Main', normal, normal);
+.font-face('Math', bold, italic);
+.font-face('Math', normal, italic);
+.font-face('Math', normal, normal);
+.font-face('SansSerif', bold, normal);
+.font-face('SansSerif', normal, italic);
+.font-face('SansSerif', normal, normal);
+.font-face('Script', normal, normal);
+.font-face('Size1', normal, normal);
+.font-face('Size2', normal, normal);
+.font-face('Size3', normal, normal);
+.font-face('Size4', normal, normal);
+.font-face('Typewriter', normal, normal);
diff --git a/static/index.html b/static/index.html
@@ -3,7 +3,6 @@
<head>
<title>KaTeX Test</title>
<script src="katex.js" type="text/javascript"></script>
- <link href="fonts.css" rel="stylesheet" type="text/css">
<link href="katex.css" rel="stylesheet" type="text/css">
<link href="main.css" rel="stylesheet" type="text/css">
</head>
diff --git a/static/katex.less b/static/katex.less
@@ -1,3 +1,5 @@
+@import "fonts.less";
+
.katex {
font: normal 1.21em KaTeX_Main;
line-height: 1.2;
diff --git a/test/huxley/test.html b/test/huxley/test.html
@@ -3,7 +3,6 @@
<head>
<title>Huxley test</title>
<script src="/katex.js" type="text/javascript"></script>
- <link href="/fonts.css" rel="stylesheet" type="text/css">
<link href="/katex.css" rel="stylesheet" type="text/css">
<style type="text/css">
#math, #pre, #post {
