chenglou / chenglou/pretext

Seeking feedback: Charming Pretext extension for flowing text inside shapes

Open
#99 2 comments 1 reaction 0 assignees View on GitHub
Dominant language
TypeScript
Stars
50.4k
Forks
2.7k
Avg merge
2h 40m
Merged PRs (30d)
69

Description

Hi @chenglou!

Thank you so much for creating this brilliant library! It’s really exciting to see how text can flow with such expressive control and a concise, elegant API design. I’m a toolmaker interested in data visualization and generative art. To make it easier to create text-based visualizations and generative pieces, I built an extension on top of Pretext called [Charming Pretext](https://charmingjs.org/pretext). Here’s a quick example:

Image

```js
import * as cm from "charmingjs";

const layout = cm.layoutTextInPath({
text: "Hello, Charming Pretext! I love generative art!", // Filling the path with this text
path: cm.pathCircle(160, 160, 150), // Built a circle path.
fontSize: 12,
fontFamily: "Inter",
});

context.font = `${layout.fontSize}px ${layout.fontFamily}`;
context.textAlign = "center";
context.textBaseline = "middle";

for (const t of layout.texts) {
context.save();
context.translate(t.x, t.y);
context.rotate((t.angle * Math.PI) / 180);
context.fillText(t.text, 0, 0);
context.restore();
}
```

It essentially allows text to flow within arbitrary shapes defined by SVG paths. I’ve also created a few [demos](https://pretext.charmingjs.org/) to explore its potential.

| Image | Image | Image|
|-----|-----|-----|

I’m not entirely sure if this is the best approach to implementing something like this, so I would really appreciate any feedback or suggestions you might have.

Thanks again for your inspiring work on this project!

Contributor guide

No contributing guide indexed for this repository

Research direction

The issue describes an external Charming Pretext extension and links to its demos, but names no Pretext files, tests, or entry points. Start by reviewing the repository structure and existing text-measurement and layout APIs; done would require a concrete, agreed-upon change beyond providing feedback on the extension.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, typescript
Domain
computer-graphics
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Quiet
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.