https://github.com/pearmini/apack
Write alphabets in the Chinese character style.
https://github.com/pearmini/apack
Last synced: about 1 year ago
JSON representation
Write alphabets in the Chinese character style.
- Host: GitHub
- URL: https://github.com/pearmini/apack
- Owner: pearmini
- Created: 2025-04-03T03:36:10.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-05-11T11:59:28.000Z (about 1 year ago)
- Last Synced: 2025-05-11T12:33:33.309Z (about 1 year ago)
- Language: JavaScript
- Homepage: https://apack.bairui.dev/
- Size: 497 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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.
## Get started
You can create your own piece using the online [APack editor](https://apack.bairui.dev/). 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.
```bash
$ npm install apackjs -S
```
```js
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.
```js
ap.text("hello world");
```
# options.**cellSize**
Sets the size of each cell.
```js
ap.text("hello world", {cellSize: 200});
```
# options.**cellWidth**
# options.**cellHeight**
Sets the dimensions of each cell, defaults to [options.cellSize](#options-cellsize).
```js
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.
```js
ap.text("hello world", {font: "astrology"});
```
# options.**layout**
Set the layout for packing.
```js
ap.text("hello world", {
layout: {type: "treemap", grid: true},
});
```
# options.**word**
Customizes the word styling.
```js
ap.text("hello world", {
word: {
stroke: "red",
strokeWidth: 3,
fill: "none",
},
});
```
# options.**style**
Configures the overall style of the output.
```js
ap.text("hello world", {
style: {
styleBackground: "red",
},
});
```
# options.**grid**
Adds and customizes a grid overlay.
```js
ap.text("hello world", {
grid: {
stroke: "#ccc",
fill: "none",
},
});
```
# options.**padding**
Sets the padding around the content.
```js
ap.text("hello world", {padding: 0.2, grid: true});
```
