Javascript script to embed pedigree charts in web pages.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
MIT-LICENSE.txt
README.md
emperor.js
sample.css
sample.html

README.md

Emperor

Emperor is a Javascript script for embedding pedigree charts into blog posts. Requires jQuery.

Usage

1. Link to emperor.js in the <head> element of your theme. (Also make sure you're including jQuery.)

2. In your blog posts, create pedigrees like this:

<div class="emperor-pedigree">
	- John Doe | b. 1900
	-- Richard Doe | b. 1883
	--- Alazar Doe | b. 1850
	--- Mary Doe | b. 1853
	-- Annabelle Doe | b. 1881
	--- Jim Doe | b. 1853
</div>

You can also prefix names with "Father:", "Mother:", "Grandfather:", or "Grandmother:", to make it easier to keep track of who's who. Example:

<div class="emperor-pedigree">
	- John Doe | b. 1900
	-- Father: Richard Doe | b. 1883
	--- Grandfather: Alazar Doe | b. 1850
	--- Grandmother: Mary Doe | b. 1853
	-- Mother: Annabelle Doe | b. 1881
	--- Grandfather: Jim Doe | b. 1853
</div>

It doesn't matter what character you use for the leader:

<div class="emperor-pedigree">
	* John Doe | b. 1900
	## Father: Richard Doe | b. 1883
	++ Mother: Annabelle Doe | b. 1881
</div>

Note: if you're using SmartyPants or some other typographical substitution script that will change two hyphens into an em-dash, you'll probably want to use another leader character.

You can also add newlines to the detail area by adding pipes:

<div class="emperor-pedigree">
	- John Doe | 1900&ndash;1945 | San Diego, CA | Occupation: carpenter
	-- Father: Richard Doe | 1883&ndash;1933 | Occupation: lumberjack
	-- Mother: Annabelle Doe | 1881&ndash;1927 | Occupation: nurse
</div>

Styling

General

  • div.emperor-pedigree will let you style the container
  • div.emperor-pedigree table will let you style the table used to lay out the pedigree chart

People

  • div.emperor-pedigree .head will let you style all of the names (the part above the line)
  • div.emperor-pedigree .tail will let you style all of the details (the part below the line)

Gender-specific

  • div.emperor-pedigree .male will let you style the fathers and grandfathers (not the root)
  • div.emperor-pedigree .female will let you style the mothers and grandmothers (not the root)

Notes

Pedigree charts won't show up rendered when using a feed reader or Instapaper.