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.
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 -Simport * as ap from "apackjs";
const node = ap.text("hello world").render();
document.body.append(node);# 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});# 7B6C 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});