Skip to content

Instantly share code, notes, and snippets.

View bramstein's full-sized avatar

Bram Stein bramstein

View GitHub Profile
<!doctype html>
<html>
<head>
<title>Chrome 33 web font bug</title>
<style>
@font-face {
font-family: TestFont;
/* This is not a real web font, but close enough
to trick browsers into thinking it is. */
src: url(data:font/opentype;base64,);
@bramstein
bramstein / subpixel-word-spacing-detect.js
Last active September 5, 2015 07:34
Detect sub-pixel word- and letter-spacing.
var subpixelWordSpacing = false;
if (document.defaultView && document.defaultView.getComputedStyle) {
// Store the original word spacing on the document element
var originalWordSpacing = document.defaultView.getComputedStyle(document.documentElement, null).wordSpacing;
// Set the word-spacing to half a pixel
document.documentElement.style.wordSpacing = '0.5px';
// This will return either 0px or 1px if sub-pixel word-spacing is not supported, otherwise
var wordSpacing = [2.333, -0.333, 1, 0.7, -0.25, 0.083].map(function (v) {
return [v, 15 + Math.round(Math.random() * 4)];
});
function truncate(x) {
if (x > 0 && x < 0.1) {
return 0;
}
if (x < 0 && x > -0.1) {
return 0;

A Treesaver document can contain one or more individual articles:

<body>
  <article id="first">
  </article>
  <article id="second">
  </article>
</body>

These articles will be shown in the order they are declared in. Articles can link to other articles by identifier. So in the above example, the first article can link to the second one with <a href="#second">...</a>.

@bramstein
bramstein / Treesaver TOC
Created April 28, 2011 10:07
New and simplified Treesaver Table Of Contents
A Treesaver document can contain one or more individual articles:
<body>
<article id="first">
</article>
<article id="second">
</article>
</body>
These articles will be shown in the order they are declared in. Articles can link to other articles by identifier. So in the above example, the first article can link to the second one with `<a href="#second">...</a>`.
<!doctype html>
<html>
<head>
<script src="mustache.js"></script>
<script src="../1.js"></script>
<script src="../2.js"></script>
<script src="../3.js"></script>
<script>
window.onload = function () {
var e1 = document.getElementById('t1'),
<!doctype html>
<html>
<head>
<script src="mustache.js"></script>
<script src="../1.js"></script>
<script src="../2.js"></script>
<script src="../3.js"></script>
<script>
window.onload = function () {
var e1 = document.getElementById('t1'),
<!doctype html>
<html>
<head>
<script src="tempo.js"></script>
<script src="../1.js"></script>
<script src="../2.js"></script>
<script src="../3.js"></script>
<script>
window.onload = function () {
Tempo.prepare('t1').render(v1);
<!doctype html>
<html>
<head>
<script src="mock.js"></script>
<script src="array.js"></script>
<script src="dom.js"></script>
<script src="object.js"></script>
<script src="template.js"></script>
<script src="../1.js"></script>
<script src="../2.js"></script>
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style>
.example {
width: 3500px;
font-family: 'times new roman', 'FreeSerif', serif;
font-size: 140px;