From bd6f762f946536c371d44418f107a88962c34566 Mon Sep 17 00:00:00 2001 From: Emily Eisenberg Date: Mon, 22 Sep 2014 14:23:23 -0700 Subject: [PATCH] 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 --- Makefile | 9 +- package.json | 2 +- server.js | 11 +- static/fonts.css | 239 ------------------------------------------ static/fonts.less | 67 ++++++++++++ static/index.html | 1 - static/katex.less | 2 + test/huxley/test.html | 1 - 8 files changed, 82 insertions(+), 250 deletions(-) delete mode 100644 static/fonts.css create mode 100644 static/fonts.less diff --git a/Makefile b/Makefile index 0f7561de7..64a61820b 100644 --- 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 index 520067675..4344ee912 100644 --- 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 index 13bae7c20..df2faa6a6 100644 --- 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 deleted file mode 100644 index e9c7b1289..000000000 --- a/static/fonts.css +++ /dev/null @@ -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 new file mode 100644 index 000000000..bb385f4c4 --- /dev/null +++ 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 index 3183ef3ef..eba1e5542 100644 --- a/static/index.html +++ b/static/index.html @@ -3,7 +3,6 @@ KaTeX Test - diff --git a/static/katex.less b/static/katex.less index 2bd18924e..669312ce8 100644 --- 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 index de74b934c..6ff6a2281 100644 --- a/test/huxley/test.html +++ b/test/huxley/test.html @@ -3,7 +3,6 @@ Huxley test -