Seeking feedback: Charming Pretext extension for flowing text inside shapes
- 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:
```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.
| |
|
|
|-----|-----|-----|
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