Tweak letter spacing in TeX/LaTeX

Using the microtype package:

\usepackage{microtype}
%% [...]
Normal Text
\textls[-40]{Condensed Text}
\textls[140]{Expanded Text}

Setting page margins in TeX/LaTeX

Use the geometry package. For example:

\usepackage[top=0.75in,left=0.75in,right=0.75in,bottom=0.75in]{geometry}

Tab-like alignment in TeX/LaTeX using \hfill

To right-align text:

\null\hfill Lorem Ipsum

Left and right aligned text:

Lorem \hfill Ipsum

Multiple columns:

Left \hfill Center \hfill Right

or

Left \hfill Center-Left \hfill Center-Right \hfill Right

etc.

TeX/LaTeX Font Sizes

To change the font size of text in a TeX/LaTeX document, use:

{\size Text to change the size of.}

where \size is one of:

\tiny
\scriptsize
\footnotesize
\small
\normalsize
\large
\Large
\LARGE
\huge
\Huge

Also see http://en.wikibooks.org/wiki/LaTeX/Fonts#Sizing_text for font size metrics and other details.

Short list of sources for Creative Commons images and media.

• Search for Creative Commons content via cc.org
• Search for Creative Commons content on Flickr or use this alternative interface from PhotoPin.
• Search for Creative Commons content via Google

The spectral11 brewer color palette

via graphviz.org; more info at mkweb.bcgsc.ca/brewer/

The paired12 brewer color palette

via graphviz.org; more info at mkweb.bcgsc.ca/brewer/

Cross-browser CSS transitions

.foo {
  transition:         opacity .25s ease-in-out;
  -webkit-transition: opacity .25s ease-in-out;
  -moz-transition:    opacity .25s ease-in-out;
  -o-transition:      opacity .25s ease-in-out;
}

Where the right-hand side has the general form:

PROPERTY DURATION [TIMING-FUNCTION] [TRANSITION-DELAY]

Transitions can chained:

 .foo { transition: opacity .25s ease-in-out, height 1s linear }

Transition timing functions

• linear - constant rate of change between states.

  cubic-bezier(0.0, 0.0, 1.0, 1.0)

• ease - (the default) slow acceleration, then faster, before rapidly slowing again at the end.

  cubic-bezier(0.25, 0.1, 0.25, 1.0)

• ease-in-out - like ease but accelerating/decelerating more rapidly (with a shorter transition between acceleration and deceleration).

  cubic-bezier(0.42, 0, 0.58, 1.0)

• ease-in - equivalent to the first half of ease-in-out; rapid accelerating then transitioning to a constant rate of change at the end.

  cubic-bezier(0.42, 0, 1, 1.0)

• ease-out - equivalent to the second half of ease-in-out; a constant rate of change transitioning rapid deceleration at the end.

  cubic-bezier(0.42, 0, 0.58, 1.0)

• cubic-bezier(x1,y1,x2,y2) - follows cubic Bézier curve using the control points (0,0), (x1,y1), (x2,y2) and (1,1).

• steps( n, [start|end] ) - stepwise function with n steps

How to read cubic-bezier functions

Imagine the transition as a stepwise function starting at (0,0) and ending at (1,1) and with two steps in between. The cubic-bezier(x1,y1,x2,y2) function specifies the points in the middle. In other words, x1 and x2 are the times at which the second and third steps happen, respectively (expressed as a fraction of the total transition duration) and y1 and y2 are how far along the transition is at x1 and x2, respectively (expressed as a fraction of the total transition "distance"). Very loosely, the cubic-bezier function "smooths" those steps.

These are nicely demonstrated here.

Presentational CSS Classes

These are the opposite of semantic markup, but I find them useful:

.align-both   { text-align: justify; }
.align-center { text-align: center; }
.align-left   { text-align: left; }
.align-right  { text-align: right; }
.float-left   { float: left; }
.float-right  { float: right; }
.nobr         { white-space: nowrap; }
.small        { font-size: 80%; } /* should really sync with the <small> tag rules */

Fixing CSS Resets

CSS reset frameworks often strip out all formatting. These CSS rules contain some re-resets:

/* I understand the theory behind replacing <i> and <b> with <em> and <strong>, but c'mon, really? */
i     { font-style: italic; }
b     { font-weight: bold; }
small { font-size: 80%; }

/* Make superscripts and subscripts actually do something: */
sup, sub { height: 0; line-height: 1; vertical-align: baseline; _vertical-align: bottom; position: relative; }
sup      {    bottom: 1ex; }
sub      {    top: .5ex; }

/* Mono-spaced types. */
pre, code, kbd, samp, tt { font-family: 'droid sans mono slashed', 'droid sans mono dotted', 'droid sans mono', monospace, monospace; }

Vertically centering block elements with CSS.

Via phrogz.net.

<style type="text/css">
    #wrapper { position:relative; } /* position:absolute is also ok */
    #wrapped { position:absolute; top:50%; height:10em; margin-top:-5em; }  /* margin-top = -1 * height/2 */
</style>
...
<div id="wrapper">
    <div id="wrapped">
        <p>Block content.</p>
        <p>But still vertically centered.</p>
    </div>
</div>