Skip to content

Instantly share code, notes, and snippets.

View dennisschaaf's full-sized avatar

Dennis Schaaf dennisschaaf

11 followers · 12 following
  • San Jose, Ca | Munich, DE
View GitHub Profile
@dennisschaaf
dennisschaaf / A tool for Renaming fonts to solve Multiple font-face rules issue with wkhtmltopdf.md
Last active August 17, 2021 22:42
Renaming fonts to solve Multiple @font-face rules issue with wkhtmltopdf

The Problem

wkhtmltopdf is broken and cannot render multiple fonts because of some issues around names. See wkhtmltopdf/wkhtmltopdf#2435

Workaround

  1. Pick an 8 or less char name for each font and variation e.g. HelvBold, HelvLite, TimeReg
  2. Every variation needs to be a separate font file, with all the details renamed in Font Forge using the short name determined before.
  3. Give the font files the same short name (e.g. HelvBold.ttf)
@dennisschaaf
dennisschaaf / Dialog Controller.js
Last active December 27, 2015 00:09
Simple Angular Dialog Implementation
angular.module('myapp.controllers').controller('DialogCtrl',
[ '$rootScope'
, '$scope'
, '$timeout'
, function ($rootScope, $scope, $timeout) {
$scope.itemType = $scope.itemType;
$scope.dialogs = [];
@dennisschaaf
dennisschaaf / gist:6193976
Created August 9, 2013 14:21
Cross Fading Angular Video Player
// Cross Fading Video
// --------------
// A cross fading video
.directive('crossVideoSrc', ['$compile', function ($compile) {
return {
//restrict: 'C',
// This HTML will replace the zippy directive.
replace: true,
transclude: false,
template: '<div class="fading-player-container" ng-class="{player1:activePlayer == 1, player2:activePlayer == 2, transition:transition}">' +
@dennisschaaf
dennisschaaf / gist:1505946
Created December 21, 2011 12:55
SVG Path for Labyrinth
// The Path Data
var path = 'M120,4 V112 H4 V12 H48 V24 H16 V100 H108 V16 H72 V20 H104 V96 H20 V28 H52 V8 L56,4 V32 H24 V92 H100 V24 H68 V12 H112 V104 H12 V20 H44 V16 H8 V108 H116 V8 H64 V28 H96 V88 H28 V36 H56 V60 H68 V44 H80 V72 H44 V48 H40 V76 H84 V40 H64 V52 L60,56 V36 H88 V80 H36 V44 H48 V68 H76 V48 H72 V64 H52 V40 H32 V84 H92 V32 H60 V4Z';
// The Drawing Command
canto
.translate(10, 50)
.svgpath(path)
.fill()
.endPath();
@dennisschaaf
dennisschaaf / example2-canto.html
Created December 21, 2011 12:33
Canto structure
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://static.dennisschaaf.com/hand-canvas-pre-release.js"></script>
<script type="text/javascript" src="http://your-domain.com/hand-canto.js"></script>
<script type="text/javascript">
function drawCanvas(){
// Get the canto instance directly, we don't need to worry about canvas with this library.
var canto = canto('tutorial');
@dennisschaaf
dennisschaaf / gist:1505638
Created December 21, 2011 11:07
The modified Canto contstructor Call
/**
* The constructor for the Canto class.
* This constructor is private and is not exported. Use the canto()
* factory function instead.
* @constructor
* @private
*/
function Canto(canvas) {
if (!canvas.getContext)
throw new Error("canto() requires a canvas element or id");
@dennisschaaf
dennisschaaf / gist:1505587
Created December 21, 2011 10:47
The original Canto constructor call
/**
* The constructor for the Canto class.
* This constructor is private and is not exported. Use the canto()
* factory function instead.
* @constructor
* @private
*/
function Canto(canvas) {
if (!canvas.getContext)
throw new Error("canto() requires a canvas element or id");
@dennisschaaf
dennisschaaf / example1-drawCircle.js
Created December 20, 2011 12:29
Hand Drawn Circles in HTML5
// Draw Hand Drawn Circle With Outline
ctx.beginPath();
ctx.arc(100, 100, 80, 0, Math.PI * 2);
ctx.stroke();
// Draw filled Hand Drawn Circle
ctx.beginPath();
ctx.arc(300, 100, 80, 0, Math.PI * 2);
ctx.fill();
@dennisschaaf
dennisschaaf / example1-drawRect.js
Created December 20, 2011 12:01
Draw rectangles using canvas.
// Draw a stroked rect
ctx.beginPath();
ctx.rect(10, 10, 100, 100);
ctx.stroke();
// Draw a filled rect
ctx.fillRect(200, 10, 100, 100);
@dennisschaaf
dennisschaaf / example1-drawLine.js
Created December 20, 2011 11:39
A long hand drawn line in html5 canvas.
// Draw a long hand drawn line in html5 canvas
ctx.beginPath();
ctx.moveTo(300,35);
ctx.lineTo(35,150);
ctx.stroke();