@foldspace_npm/harness 0.1.31 → 0.1.32

package/src/video/composer/composer.mjs

@@ -0,0 +1,554 @@
+// The composer: runs in a hidden Chrome that `foldspace record` launches. It
+// reads the plan (made in Node from the recording), draws every frame of the
+// video on a canvas - the opening card, the recorded scenes, captions, logo -
+// encodes H.264 with WebCodecs and muxes an MP4, then posts the file back.
+//
+// The look is the one a customer demo video settled on - the whole product on
+// screen (scaled to fit, never cropped or zoomed), a caption card bottom-left
+// once each answer has settled - in Foldspace's brand, as the product video's
+// storyboard draws it: its one blue on black, white text, Poppins, the
+// official logo. The opening card meets the product's agent; each caption
+// names the capabilities its scene shows and says what the user gets.
+
+import { ArrayBufferTarget, Muxer } from "../vendor/mp4-muxer.min.mjs";
+import { BRAND, CAPTION_EDGE, CAPTION_FILL, LOGO_FILES, MARK_RATIO, WORDMARK_RATIO } from "../brand.mjs";
+import {
+  CAPTION,
+  FPS,
+  activeClips,
+  baselineIn,
+  captionAlpha,
+  captionLayout,
+  chooseLogoSpot,
+  containRect,
+  fadeOutAlpha,
+  frameIndexAt,
+  logoCandidates,
+  normalLine,
+  parseHex,
+  patchStats,
+  placeBox,
+  sourceTime,
+  unionBox,
+  wrapWords,
+} from "../timeline.mjs";
+
+const BG = BRAND.black;
+const WHITE = BRAND.white;
+const FONT = "Poppins, Roboto, sans-serif";
+const rgba = (hex, alpha) => `rgba(${parseHex(hex).join(", ")}, ${alpha})`;
+// H.264 High, then Main, then Baseline - all level 4.0, enough for 1920x1080 at 30 fps.
+const CODECS = ["avc1.640028", "avc1.4d0028", "avc1.42e028"];
+
+const post = (name, body, type = "application/json") =>
+  fetch(`../${name}`, { method: "POST", body, headers: { "content-type": type } });
+const fail = (code, message) => post("fail", JSON.stringify({ code, message: String(message || code) }));
+
+window.addEventListener("error", (event) => fail("page_error", event.message));
+window.addEventListener("unhandledrejection", (event) => fail("page_error", event.reason?.message || event.reason));
+
+async function loadFonts() {
+  for (const [file, weight] of [
+    ["Poppins-Regular.woff2", "400"],
+    ["Poppins-SemiBold.woff2", "600"],
+    ["Poppins-ExtraBold.woff2", "800"],
+  ]) {
+    const face = new FontFace("Poppins", `url(../fonts/${file})`, { weight });
+    await face.load();
+    document.fonts.add(face);
+  }
+}
+
+async function loadImage(url) {
+  const image = new Image();
+  image.src = url;
+  await image.decode();
+  return image;
+}
+
+async function pickCodec(width, height, bitrate) {
+  if (typeof VideoEncoder !== "function" || typeof VideoFrame !== "function") return null;
+  for (const codec of CODECS) {
+    const config = {
+      codec,
+      width,
+      height,
+      bitrate,
+      framerate: FPS,
+      latencyMode: "quality",
+      hardwareAcceleration: "no-preference",
+      avc: { format: "avc" },
+    };
+    try {
+      const support = await VideoEncoder.isConfigSupported(config);
+      if (support.supported) return config;
+    } catch {
+      // try the next profile
+    }
+  }
+  return null;
+}
+
+// ------------------------------------------------------------ text
+
+function font(weight, size) {
+  return `${weight} ${size}px ${FONT}`;
+}
+
+/** Words wrapped to `maxWidth` in the font set on `ctx`, keeping any line breaks already there. */
+function wrap(ctx, text, maxWidth) {
+  return wrapWords(text, maxWidth, (value) => ctx.measureText(value).width);
+}
+
+/** The largest size, down to `min`, at which `text` fits on one line; wraps below that. */
+function fitText(ctx, text, weight, size, min, maxWidth, spacing = 0) {
+  let at = size;
+  for (; at > min; at -= 2) {
+    ctx.font = font(weight, at);
+    ctx.letterSpacing = `${spacing * at}px`;
+    if (ctx.measureText(text).width <= maxWidth) {
+      ctx.letterSpacing = "0px";
+      return { size: at, lines: [text] };
+    }
+  }
+  ctx.font = font(weight, min);
+  ctx.letterSpacing = `${spacing * min}px`;
+  const lines = wrap(ctx, text, maxWidth);
+  ctx.letterSpacing = "0px";
+  return { size: min, lines };
+}
+
+function drawLines(ctx, lines, x, y, lineHeight, align = "left") {
+  ctx.textAlign = align;
+  lines.forEach((line, index) => ctx.fillText(line, x, y + index * lineHeight));
+}
+
+// Eyebrows are spaced capitals, as on foldspace.ai.
+const EYEBROW_SPACING = 0.12;
+
+function paintBlack(ctx, width, height) {
+  ctx.fillStyle = BG;
+  ctx.fillRect(0, 0, width, height);
+}
+
+/** The card's opening fade, from black. */
+function fadeIn(ctx, card, localT, { width, height }) {
+  if (card.fadeInS && localT < card.fadeInS) {
+    ctx.fillStyle = rgba(BG, 1 - localT / card.fadeInS);
+    ctx.fillRect(0, 0, width, height);
+  }
+}
+
+// ------------------------------------------------------------ cards
+
+// On a 1080-high frame. The title shrinks for a long product name or the
+// square frame, down to `titleMin`, and only then wraps.
+const OPENING = { title: 96, titleMin: 56, lineHeight: 1.1, side: 80, gap: 34, by: 24, byGap: 14, logo: 20 };
+
+/**
+ * The opening card, on black and centred: "Meet the <product>" in white over
+ * "Product Agent" in Foldspace blue, both ExtraBold at one size, then "Built
+ * with" in muted grey followed by the white wordmark.
+ */
+function drawOpening(ctx, card, localT, { width, height }, art) {
+  paintBlack(ctx, width, height);
+  const title = fitText(ctx, `Meet the ${card.product}`, 800, OPENING.title, OPENING.titleMin, width - OPENING.side * 2);
+  const lines = [...title.lines.map((text) => ({ text, color: WHITE })), { text: "Product Agent", color: BRAND.blue }];
+  const step = title.size * OPENING.lineHeight;
+  const byLine = normalLine(OPENING.by);
+  let y = (height - (lines.length * step + OPENING.gap + byLine)) / 2;
+  ctx.textBaseline = "alphabetic";
+  ctx.textAlign = "center";
+  ctx.font = font(800, title.size);
+  for (const line of lines) {
+    ctx.fillStyle = line.color;
+    ctx.fillText(line.text, width / 2, y + baselineIn(step, title.size));
+    y += step;
+  }
+  y += OPENING.gap;
+  ctx.font = font(400, OPENING.by);
+  const byW = ctx.measureText("Built with").width;
+  const logoW = OPENING.logo * WORDMARK_RATIO;
+  const x = (width - (byW + OPENING.byGap + logoW)) / 2;
+  ctx.textAlign = "left";
+  ctx.fillStyle = BRAND.muted;
+  ctx.fillText("Built with", x, y + baselineIn(byLine, OPENING.by));
+  ctx.drawImage(art.onDark, x + byW + OPENING.byGap, y + (byLine - OPENING.logo) / 2, logoW, OPENING.logo);
+  fadeIn(ctx, card, localT, { width, height });
+}
+
+/**
+ * The closing card, on black and centred: the blue mark, the eyebrow in
+ * muted spaced capitals, the title in white, a short blue rule, and the
+ * last line in muted grey.
+ */
+function drawEndCard(ctx, card, localT, { width, height }, art) {
+  paintBlack(ctx, width, height);
+  const maxWidth = width - 160;
+  const eyebrow = fitText(ctx, card.eyebrow.toUpperCase(), 600, 28, 18, maxWidth, EYEBROW_SPACING);
+  const title = fitText(ctx, card.title, 800, 84, 48, maxWidth);
+  const sub = fitText(ctx, card.sub, 400, 30, 20, maxWidth);
+  const parts = [
+    ...(card.mark ? [{ kind: "mark", h: 60, gap: 30 }] : []),
+    { kind: "eyebrow", ...eyebrow, step: eyebrow.size * 1.3, gap: 18 },
+    { kind: "title", ...title, step: title.size * 1.15, gap: 30 },
+    { kind: "rule", w: 120, h: 6, gap: 30 },
+    { kind: "sub", ...sub, step: sub.size * 1.3, gap: 0 },
+  ];
+  for (const part of parts) if (part.lines) part.h = part.lines.length * part.step;
+  const cx = width / 2;
+  let y = Math.round((height - parts.reduce((sum, part) => sum + part.h + part.gap, 0)) / 2);
+  ctx.textBaseline = "top";
+  for (const part of parts) {
+    if (part.kind === "mark") {
+      const w = part.h * MARK_RATIO;
+      ctx.drawImage(art.mark, cx - w / 2, y, w, part.h);
+    } else if (part.kind === "eyebrow") {
+      ctx.fillStyle = BRAND.muted;
+      ctx.font = font(600, part.size);
+      ctx.letterSpacing = `${EYEBROW_SPACING * part.size}px`;
+      // The spacing trails the last letter: shift by half of it to stay centred.
+      drawLines(ctx, part.lines, cx + (EYEBROW_SPACING * part.size) / 2, y, part.step, "center");
+      ctx.letterSpacing = "0px";
+    } else if (part.kind === "title") {
+      ctx.fillStyle = WHITE;
+      ctx.font = font(800, part.size);
+      drawLines(ctx, part.lines, cx, y, part.step, "center");
+    } else if (part.kind === "rule") {
+      ctx.fillStyle = BRAND.blue;
+      ctx.beginPath();
+      ctx.roundRect(Math.round(cx - part.w / 2), y, part.w, part.h, part.h / 2);
+      ctx.fill();
+    } else if (part.kind === "sub") {
+      ctx.fillStyle = BRAND.muted;
+      ctx.font = font(400, part.size);
+      drawLines(ctx, part.lines, cx, y, part.step, "center");
+    }
+    y += part.h + part.gap;
+  }
+  fadeIn(ctx, card, localT, { width, height });
+}
+
+// ------------------------------------------------------------ caption
+
+/** The width of Poppins text: what timeline.mjs's captionLayout measures with. */
+function measurer(ctx) {
+  return (text, { weight, size, spacing = 0 }) => {
+    ctx.font = font(weight, size);
+    ctx.letterSpacing = `${spacing * size}px`;
+    const width = ctx.measureText(text).width;
+    ctx.letterSpacing = "0px";
+    return width;
+  };
+}
+
+/** The caption card's size and parts, bottom-left of the picture. */
+function measureCaption(ctx, caption, { width, height }, viewport) {
+  const content = viewport ? containRect(viewport.width, viewport.height, width, height) : null;
+  return captionLayout(caption, { width, height, measure: measurer(ctx), content });
+}
+
+/**
+ * The panel colour at 88%, with a faint white edge, as the storyboard's
+ * cards. Row 1: the capabilities as blue pills with white names, then "2 OF
+ * 4" in muted grey. Row 2: the question, small and muted, in curly quotes.
+ * Row 3: the scene's line, large and white, its highlighted words on a blue
+ * block - each line's part of a highlight its own block, as a browser draws
+ * the storyboard's Marked.
+ */
+function drawCaption(ctx, card, alpha) {
+  if (!(alpha > 0)) return;
+  const c = CAPTION;
+  ctx.save();
+  ctx.globalAlpha = alpha;
+  ctx.translate(card.x, card.y);
+  ctx.beginPath();
+  ctx.roundRect(0, 0, card.w, card.h, card.radius);
+  ctx.fillStyle = rgba(CAPTION_FILL.color, CAPTION_FILL.alpha);
+  ctx.fill();
+  ctx.beginPath();
+  ctx.roundRect(card.border / 2, card.border / 2, card.w - card.border, card.h - card.border, card.radius - card.border / 2);
+  ctx.lineWidth = card.border;
+  ctx.strokeStyle = CAPTION_EDGE;
+  ctx.stroke();
+  ctx.textBaseline = "alphabetic";
+  ctx.textAlign = "left";
+
+  ctx.font = font(600, c.pill);
+  for (const pill of card.pills) {
+    ctx.beginPath();
+    ctx.roundRect(pill.x, pill.y, pill.w, pill.h, pill.h / 2);
+    ctx.fillStyle = BRAND.blue;
+    ctx.fill();
+    ctx.fillStyle = WHITE;
+    ctx.fillText(pill.name, pill.textX, pill.baseline);
+  }
+  ctx.fillStyle = BRAND.muted;
+  ctx.font = font(600, c.place);
+  ctx.letterSpacing = `${c.placeSpacing * c.place}px`;
+  ctx.fillText(card.place.text, card.place.x, card.place.baseline);
+  ctx.letterSpacing = "0px";
+
+  ctx.fillStyle = BRAND.muted;
+  ctx.font = font(400, c.question);
+  for (const line of card.questionLines) ctx.fillText(line.text, line.x, line.baseline);
+
+  // Line by line, the blocks first and the words over them, as a browser
+  // paints inline backgrounds.
+  const { size, lines, mark } = card.line;
+  ctx.font = font(600, size);
+  ctx.letterSpacing = `${c.lineSpacing * size}px`;
+  for (const line of lines) {
+    for (const run of line.runs) {
+      if (!run.mark) continue;
+      ctx.beginPath();
+      ctx.roundRect(run.x, line.baseline + mark.top, run.w, mark.h, mark.radius);
+      ctx.fillStyle = BRAND.blue;
+      ctx.fill();
+    }
+    ctx.fillStyle = WHITE;
+    for (const run of line.runs) ctx.fillText(run.text, run.textX, line.baseline);
+  }
+  ctx.letterSpacing = "0px";
+  ctx.restore();
+}
+
+// ------------------------------------------------------------ logo
+
+// The official wordmark, small: 20 px high (about 190 px wide) on a
+// 1080-high frame. No backing pill - that read as a watermark bar - so the
+// white one goes on dark patches and the dark one on light patches.
+const LOGO_H = 20;
+
+function measureLogo() {
+  return { w: Math.round(LOGO_H * WORDMARK_RATIO), h: LOGO_H };
+}
+
+/** The wordmark; `ink` "light" (the white one) on a dark patch, "dark" on a light one. */
+function drawLogo(ctx, art, logo, place, alpha, ink = "light") {
+  if (!(alpha > 0)) return;
+  const light = ink !== "dark";
+  ctx.save();
+  ctx.globalAlpha = alpha;
+  // A soft halo of the opposite tone keeps it apart from what is behind it.
+  ctx.shadowColor = light ? "rgba(0, 0, 0, 0.5)" : "rgba(255, 255, 255, 0.7)";
+  ctx.shadowBlur = 6;
+  ctx.drawImage(light ? art.onDark : art.onLight, place.x, place.y, logo.w, logo.h);
+  ctx.restore();
+}
+
+/**
+ * Look at each scene's first and last picture under every spot the logo could
+ * take: how busy each patch is (the app's own logo, a menu, text) and how
+ * bright. Returns { busy: { spot: mean }, brightness: [per clip { spot: mean }] }.
+ */
+async function lookUnderSpots(clips, candidates, { width, height }) {
+  const scratch = new OffscreenCanvas(width, height);
+  const sctx = scratch.getContext("2d", { alpha: false, willReadFrequently: true });
+  const busy = {};
+  const seen = {};
+  const brightness = clips.map(() => ({}));
+  for (const [index, clip] of clips.entries()) {
+    if (clip.kind !== "scene" || !clip.frames.length) continue;
+    const sums = {};
+    let looked = 0;
+    for (const pick of new Set([0, clip.frames.length - 1])) {
+      let picture;
+      try {
+        const response = await fetch(`../rec/${clip.dir}/${clip.frames[pick]}`);
+        picture = await createImageBitmap(await response.blob());
+      } catch {
+        continue; // a picture that will not load is one less look
+      }
+      sctx.fillStyle = BG;
+      sctx.fillRect(0, 0, width, height);
+      const fit = containRect(picture.width, picture.height, width, height);
+      sctx.drawImage(picture, fit.x, fit.y, fit.w, fit.h);
+      picture.close();
+      looked += 1;
+      for (const spot of candidates) {
+        // A little around it too: an edge just outside still crowds it.
+        const x = Math.max(0, Math.round(spot.x - 8));
+        const y = Math.max(0, Math.round(spot.y - 8));
+        const w = Math.min(width - x, Math.round(spot.w + 16));
+        const h = Math.min(height - y, Math.round(spot.h + 16));
+        const stats = patchStats(sctx.getImageData(x, y, w, h).data, w, h);
+        busy[spot.spot] = (busy[spot.spot] || 0) + stats.busy;
+        seen[spot.spot] = (seen[spot.spot] || 0) + 1;
+        sums[spot.spot] = (sums[spot.spot] || 0) + stats.brightness;
+      }
+    }
+    for (const spot of Object.keys(sums)) brightness[index][spot] = sums[spot] / looked;
+  }
+  for (const spot of Object.keys(busy)) busy[spot] /= seen[spot];
+  return { busy, brightness };
+}
+
+// ------------------------------------------------------------ scenes
+
+/** The recorded pictures of one scene, decoded as they are needed. */
+function frameSource(scene) {
+  let index = -1;
+  let bitmap = null;
+  return {
+    async at(srcT) {
+      const wanted = frameIndexAt(scene.frameTimes, srcT);
+      if (wanted < 0) return null;
+      if (wanted !== index) {
+        // A picture that will not load or decode leaves the one before on
+        // screen: one lost picture is not worth a lost video.
+        try {
+          const response = await fetch(`../rec/${scene.dir}/${scene.frames[wanted]}`);
+          if (!response.ok) throw new Error(`picture ${wanted}: ${response.status}`);
+          const next = await createImageBitmap(await response.blob());
+          bitmap?.close();
+          bitmap = next;
+        } catch (error) {
+          if (!bitmap) throw error;
+        }
+        index = wanted;
+      }
+      return bitmap;
+    },
+  };
+}
+
+async function drawScene(ctx, scene, source, captionCard, localT, { width, height }) {
+  ctx.fillStyle = BG;
+  ctx.fillRect(0, 0, width, height);
+  const picture = await source.at(sourceTime(scene.segments, localT));
+  if (picture) {
+    const fit = containRect(picture.width, picture.height, width, height);
+    ctx.imageSmoothingEnabled = true;
+    ctx.imageSmoothingQuality = "high";
+    ctx.drawImage(picture, fit.x, fit.y, fit.w, fit.h);
+  }
+  drawCaption(ctx, captionCard, captionAlpha(scene.caption, localT));
+}
+
+// ------------------------------------------------------------ main
+
+async function main() {
+  const plan = await (await fetch("../plan.json")).json();
+  const { width, height } = plan;
+  await loadFonts();
+  const art = {
+    onDark: await loadImage(`../assets/${LOGO_FILES.onDark}`),
+    onLight: await loadImage(`../assets/${LOGO_FILES.onLight}`),
+    mark: await loadImage(`../assets/${LOGO_FILES.mark}`),
+  };
+  const config = await pickCodec(width, height, plan.bitrate);
+  if (!config) {
+    await fail("no_h264", "This Chrome cannot encode H.264 video.");
+    return;
+  }
+
+  const canvas = new OffscreenCanvas(width, height);
+  const ctx = canvas.getContext("2d", { alpha: false });
+  const layer = new OffscreenCanvas(width, height);
+  const layerCtx = layer.getContext("2d", { alpha: false });
+
+  const clips = plan.clips;
+  const sources = clips.map((clip) => (clip.kind === "scene" ? frameSource(clip) : null));
+  const captions = clips.map((clip) => (clip.kind === "scene" ? measureCaption(ctx, clip.captionText, plan, clip.viewport) : null));
+
+  // One spot for the whole video, clear of the agent panel in every scene and
+  // of every caption card, and on the calmest part of the app - never on its
+  // own logo. The ink follows each scene's brightness there.
+  const logo = measureLogo();
+  const avoid = [];
+  const panels = [];
+  let content = null;
+  clips.forEach((clip, index) => {
+    if (clip.kind !== "scene") return;
+    avoid.push(captions[index]);
+    if (!clip.viewport) return;
+    const fit = containRect(clip.viewport.width, clip.viewport.height, width, height);
+    content = content || fit;
+    for (const box of clip.panel) panels.push(placeBox(box, clip.viewport, fit));
+  });
+  avoid.push(...panels);
+  const candidates = logoCandidates({ width, height, logo, content, panel: unionBox(panels) });
+  const under = await lookUnderSpots(clips, candidates, plan);
+  const place = chooseLogoSpot({ candidates, avoid, content, busy: under.busy });
+  const inks = clips.map((clip, index) =>
+    clip.kind === "scene" && (under.brightness[index][place.spot] ?? 0) > 0.55 ? "dark" : "light",
+  );
+
+  const muxer = new Muxer({
+    target: new ArrayBufferTarget(),
+    video: { codec: "avc", width, height, frameRate: FPS },
+    fastStart: "in-memory",
+    firstTimestampBehavior: "offset",
+  });
+  let encodeError = null;
+  const encoder = new VideoEncoder({
+    output: (chunk, meta) => muxer.addVideoChunk(chunk, meta),
+    error: (error) => {
+      encodeError = error;
+    },
+  });
+  encoder.configure(config);
+
+  // The small logo is drawn with each scene, in that scene's ink, so a
+  // dissolve blends one into the other. The cards carry the logo themselves.
+  const drawClip = async (target, index, localT) => {
+    const clip = clips[index];
+    if (clip.kind === "scene") {
+      await drawScene(target, clip, sources[index], captions[index], localT, plan);
+      drawLogo(target, art, logo, place, 1, inks[index]);
+    } else if (clip.kind === "opening") {
+      drawOpening(target, clip, localT, plan, art);
+    } else {
+      drawEndCard(target, clip, localT, plan, art);
+    }
+  };
+
+  const total = Math.round(plan.layout.totalS * FPS);
+  const posterAt = Math.min(total - 1, Math.max(0, Math.round(plan.posterS * FPS)));
+  let poster = null;
+  for (let i = 0; i < total; i++) {
+    const t = i / FPS;
+    const showing = activeClips(plan.layout, t);
+    for (const [order, item] of showing.entries()) {
+      if (order === 0) {
+        await drawClip(ctx, item.index, item.localT);
+      } else {
+        await drawClip(layerCtx, item.index, item.localT);
+        ctx.save();
+        ctx.globalAlpha = item.alpha;
+        ctx.drawImage(layer, 0, 0);
+        ctx.restore();
+      }
+    }
+    const fade = fadeOutAlpha(plan.layout.totalS, t);
+    if (fade < 1) {
+      ctx.fillStyle = rgba(BG, 1 - fade);
+      ctx.fillRect(0, 0, width, height);
+    }
+    if (i === posterAt) poster = await canvas.convertToBlob({ type: "image/jpeg", quality: 0.9 });
+
+    const frame = new VideoFrame(canvas, {
+      timestamp: Math.round((i * 1e6) / FPS),
+      duration: Math.round(1e6 / FPS),
+    });
+    encoder.encode(frame, { keyFrame: i % (FPS * 2) === 0 });
+    frame.close();
+    if (encodeError) throw encodeError;
+    while (encoder.encodeQueueSize > 4) await new Promise((resolve) => setTimeout(resolve, 1));
+    if (i % (FPS * 2) === 0) post("progress", JSON.stringify({ frame: i, of: total })).catch(() => {});
+  }
+  await encoder.flush();
+  if (encodeError) throw encodeError;
+  encoder.close();
+  muxer.finalize();
+
+  await post("out", muxer.target.buffer, "video/mp4");
+  if (poster) await post("poster", poster, "image/jpeg");
+  await post(
+    "done",
+    JSON.stringify({ frames: total, codec: config.codec, logo: place.spot, logoClear: place.clear }),
+  );
+}
+
+main().catch((error) => fail("page_error", error?.message || error));

package/src/video/composer/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>foldspace record - composer</title>
+<style>html, body { margin: 0; background: #000000; }</style>
+</head>
+<body>
+<!-- Loaded in a hidden Chrome by `foldspace record`. It draws the video
+     frame by frame and hands the MP4 back; nothing here is ever shown. -->
+<script type="module" src="composer.mjs"></script>
+</body>
+</html>

package/src/video/fonts/OFL.txt

@@ -0,0 +1,93 @@
+Copyright 2020 The Poppins Project Authors (https://github.com/itfoundry/Poppins)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.