APack: Alphabet Packing Writing System

APack is a writing system that explores writing alphabets in a Chinese character style. Instead of placing letters sequentially, APack packs letters for one word into a single grid.

English and Chinese use fundamentally different writing systems. In English or other Latin scripts, letters are pre-defined and arranged in a linear sequence. In contrast, Chinese characters are spatially composed using strokes rather than following a strict left-to-right structure.

What if we could write English in a Chinese-style manner—arranging the letters of a word spatially into a single unified character? Potential applications include stamps, wallpapers, concrete poems, icons, and more.

And world clocks!

Get started

You can create your own piece using the online APack editor. If you’d like to use APack in your project, it’s also available as a JavaScript package, just follow the instructions below to get started.

$ npm install apackjs -S

import * as ap from "apackjs";

const node = ap.text("hello world").render();

document.body.append(node);

API Reference

# ap.text(content[, options])

Renders the given content with optional styling and layout options.

ap.text("hello world");

# options.cellSize

Sets the size of each cell.

ap.text("hello world", {cellSize: 200});

# options.cellWidth

# options.cellHeight

Sets the dimensions of each cell, defaults to options.cellSize.

ap.text("hello world", {
  cellWidth: 320,
  cellHeight: 320,
  style: {styleBackground: "#F1BB4D"},
  word: {stroke: "#492577", strokeWidth: 10},
  font: "astrology",
});

# options.font

Specifies the font to use for rendering.

ap.text("hello world", {font: "astrology"});

# options.layout

Set the layout for packing.

ap.text("hello world", {
  layout: {type: "treemap", grid: true},
});

# options.word

Customizes the word styling.

ap.text("hello world", {
  word: {
    stroke: "red",
    strokeWidth: 3,
    fill: "none",
  },
});

# options.style

Configures the overall style of the output.

ap.text("hello world", {
  style: {
    styleBackground: "red",
  },
});

# options.grid

Adds and customizes a grid overlay.

ap.text("hello world", {
  grid: {
    stroke: "#ccc",
    fill: "none",
  },
});

# options.padding

Sets the padding around the content.

ap.text("hello world", {padding: 0.2, grid: true});