A new way of drawing boxes in the terminal (possibly)

Not all CEOs of tech startups have the time to write code. Fortunately while Textualize is still in its development phase I have plenty of opportunity to get my hands dirty.

I get a kick out of being creative within the limitation of the terminal. I may even have come up with with an entirely new way of drawing boxes in the terminal. As bizarre as that sounds

Boxes in the terminal are not new. Rich is full of them, but they predate Rich by a long time.

CLI apps will typically use box drawing characters to build boxes out of unicode characters. There are characters for vertical lines, horizontal lines, corners, and cross pieces. With a mixture of regular, heavy, and double lines. Even rounded corners. They work like lego: throw them together in the right order and you can display exotic things such as panels and tables at the command prompt.

But there is a problem. Look what happens when you set a background color:

© 2022 Will McGugan

A Rich panel.

The background color leaks outside of the border line. It's easy to see why this happens. I've blown up a small box in this sketch:

© 2022 Will McGugan

Your basic terminal box.

Each character in a terminal has exactly 2 colors. No more, no less. There is a background color and a foreground color. Consequently you can't set the color inside of the border independently of the color outside of the border. So background colors are always going to bleed outside of the apparent edge.

Textual added the ability to use entirely different characters when rendering boxes. Unicode contains one eighth vertical and horizontal blocks which are fantastic for displaying terminal progress bars with apparently higher "resolution" that a single character. But they weren't great for borders. You can see why here:

© 2022 Will McGugan

Can you arrange these to form a box?

No corners pieces. Darn. Without corners it is not possible to render a full box with independent inside and outside colors.

Turns out I was wrong. There is. I don't know why it didn't occur to me before. Have another look at the image above. It's like one of those irritating puzzles. Make a box with only those 4 characters (you can create copies and change colors). Give it a shot. I'll wait.

Boxes all the way down

Here's the solution:

© 2022 Will McGugan

A box with no color bleeding.

A box with independent inside and outside colors which doesn't violate the "two colors per character rule". It's easy to imaging how you can extend this box to larger sizes, and surround other text.

It's been possible to display boxes like this for a while (literally decades). But I haven't seen it done like this in the wild. How can that be possible? Surely every combination of unicode characters in the terminal has been tried?

If no prior art emerges, I'm calling this technique "McGugan Boxes". I'd like "Inventor of McGugan boxes" to be inscribed on my tombstone.

Here's an example of McGugan Boxes being used in a Textual demo:

Textual update

The next release of Textual will land on 10/24 (24th of October in US format, or "1KB day"). Featuring McGugan boxes and amazing docs.

Mark the date or join the mailing list on Textualize.io.