Tanner Hodges tannerhodges

OS X Screencast to animated GIF

This gist shows how to create a GIF screencast using only free OS X tools: QuickTime, ffmpeg, and gifsicle.

Instructions

To capture the video (filesize: 19MB), using the free "QuickTime Player" application:

Demonstrates the effect of dominant baseline for each of its possible values on text positioning in an SVG.

Each browser/ mobile browser seems to handle these a bit differently. Here are some issues:

Retrieving bounding boxes only works correctly after the font is loaded (and there is no easy way to find out when this happens)
The bounding box width does not reflect the actual extent of a text, but how far it advances the cursor. That means that in an italic letter 'f' in many fonts, part of the f will actually lie outside of the bounding box
The baseline-shift style does not work in FF
dominant-baseline values are interpreted different among browsers

All in all its best just use 'alphabetical' (which is consistent across browsers) and do any further vertical positioning by manually by using the x,y or dx,dy or the transform attributes. Also, if one needs to find out about the actual bounds of a text, one cannot rely on the getBBox() or the getBoundingClientRect() DOM methods, but has to use

	/**
	* Slide an element down like jQuery's slideDown function using CSS3 transitions.
	* @see https://gist.github.com/ludder/4226288
	* @param {element} el
	* @param {string} timing
	* @return {void}
	*/
	function slideDown(el, timing) {
	timing = timing \|\| '300ms ease';

	[
	{
	"keys": ["ctrl+2"],
	"command": "run_macro_file",
	"args": {
	"file": "Packages/User/to-2.sublime-macro"
	}
	},
	{
	"keys": ["ctrl+4"],

	//
	// Converts code indentation from 4 spaces to 2 spaces
	//
	// For a hotkey, add to Preferences > Key Bindings - User:
	//
	// { "keys": ["ctrl+alt+i"], "command": "run_macro_file", "args": {"file": "res://Packages/User/ConvertTwoSpacesToFour.sublime-macro"} }
	//
	[
	{
	"args": { "setting": "tab_size", "value": 4 },

	#!/usr/bin/env sh

	PROJECTS_DIR=$HOME/Desktop/Werk/mode
	LOG_FILE=$PROJECTS_DIR/commits.txt
	AUTHOR='Chris Gutierrez'

	# store the current dir
	CUR_DIR=$(pwd)

	#hey user

	<svg width="500" height="500" style="background-color:orange;" version="1.1" xmlns="http://www.w3.org/2000/svg">
	<defs>
	<filter id="dropShadowStack">
	<feGaussianBlur stdDeviation="3"/>
	<feOffset dx="3" dy="3" result="offsetblur"/>
	<feFlood flood-color="#720"/>
	<feComposite in2="offsetblur" operator="in"/>
	<feMerge>
	<feMergeNode/>
	<feMergeNode in="SourceGraphic"/>

	var my_element = document.getElementById('my-element');
	//-- Returns true/false
	my_element.isVisible(my_element);

	/* base font size + viewport height + viewport width */
	h1 {
	font-size: calc(2rem + 4vh + 4vw);
	}

	/* responsive font-size responsive */
	html {
	font-size: calc(100% + .2vh + .2vw);
	}

	<!-- Found at http://stackoverflow.com/a/14593540/1786459 -->
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset=utf-8 />
	<title>JS Bin</title>
	<style id="jsbin-css">
	.strikethrough {
	position: relative;
	}