Text Box and Speech Bubble Generator
Wrap any text in a box or speech bubble made of Unicode line characters, plain ASCII or symbols. Wide characters such as Japanese count as two columns, so the right edge stays straight. Pick a "Comment" style to paste the result straight into code as // or /* */. To draw a table instead, see the ASCII Table Generator.
🔒 Runs in your browser · Your data is never sent to a server
Notes
- Fullwidth characters and emoji count as two columns and halfwidth characters as one. Some fonts do not draw fullwidth characters at exactly twice the width, so the right edge can drift. If you paste into code, check it in a monospace editor.
- In some fonts and environments, box-drawing characters (┌─┐ and so on) are drawn at double width and the frame breaks. If that happens, use the ASCII style.
- Turning on "Treat box lines as double-width" counts each box-drawing character as two columns. The right edge then lines up in fonts that draw these characters wide, but it drifts in fonts that draw them narrow. If the inner width would be odd, one space is added on the right to make it even. Only the single line, heavy line and rounded styles are affected, and rounded corners (╭╮╰╯) are still counted as one column. Double line, ASCII, #, * and bubble styles are unchanged (in fonts such as MS Gothic, double lines are drawn narrow, so leave the option off for them).
- Padding and the tail depend on the frame style. Horizontal and vertical padding are ignored for bubbles, and the tail applies to bubbles only.
- In block comments, */ inside your text is changed to * / so it cannot close the comment early.
- Tabs are replaced with four spaces. Combining and zero-width characters count as zero columns.
Glossary
Box-drawing characters
Unicode characters for drawing frames and tables (─ │ ┌ ┐ and so on). In a monospace font they join up without gaps.
Fullwidth vs. halfwidth
In a monospace font, a fullwidth character takes the width of two halfwidth ones. Padding by display width instead of character count is what keeps the right edge of the frame aligned.
FAQ
The right edge is crooked when I use Japanese text
The tool counts fullwidth characters as two columns, but if the font where you paste it does not draw them at exactly twice the width, the edge looks off. Check it in an editor with a monospace font that supports CJK. If it still breaks, try the ASCII style instead of box-drawing characters.
How do I paste the result into a code comment?
Choose a line comment (// # --) or a block comment (/* */) under "Comment". Every line is output with the prefix already added, so pick the one your language uses and paste it into the source.
What is the bubble tail for?
It is the slanted line that connects the bubble to the mouth of an ASCII-art character. If you have no character, or use the bubble on its own in a README, turn off "Bubble tail".
Can I set the box width or wrap long lines?
The width follows your longest line automatically. There is no word wrap, so break long text into lines yourself before entering it.
Is my text sent to a server?
No. Everything is formatted in your browser, and nothing you type is sent or stored anywhere else.
Share this page