Box drawing characters in HTML
Box drawing characters are the lines, corners and junctions used to build tables and diagrams out of text. They occupy U+2500 to U+257F and none of them has a named HTML entity.
At a glance
- Character
- ─ │ ┌ ┐ └ ┘ ├ ┤ ┬ ┴ ┼
- Named entity
- None. Use the numeric references.
- Decimal reference
- ─ │ ┌ ┐ └ ┘ and neighbours
- Hex reference
- ─ │ ┌ ┐ └ ┘ and neighbours
- Unicode code point
- U+2500 to U+257F
- Unicode name
- BOX DRAWINGS LIGHT HORIZONTAL, VERTICAL, and the corner and junction forms
- In the entity reference
- Not in the 152 entity list
In detail
The block is organised by stroke weight. There is a light set, a heavy set, a double line set, and a series of mixed junctions where a light line meets a heavy or double one. That mixing is the part people miss: a corner joining a light horizontal to a double vertical is its own character, and using the plain double corner there leaves a visible gap where the strokes fail to meet.
Everything about these characters assumes a monospace font. In a proportional face the horizontal line is a different width from the vertical stroke's advance, so columns drift a little further out of alignment on every row and a twenty line diagram ends up visibly skewed. Set an explicit monospace family on the container rather than trusting an inherited one.
The second requirement is whitespace preservation. HTML collapses runs of spaces and strips leading indentation, which destroys a diagram built from spaces and lines. A pre element, or white-space: pre on a block, keeps the layout you typed. Wrapping is the other half of the problem: a long line that wraps turns a box into confetti, so allow horizontal scrolling rather than letting it reflow.
None of this survives being read aloud. A box drawn in characters is announced as a stream of line and corner names, which is worse than useless. If the diagram carries meaning, put a text description next to it and hide the drawing from assistive technology, exactly as you would with a decorative image.
Examples
<pre aria-hidden="true">
┌───┬───┐
│ A │ B │
├───┼───┤
│ C │ D │
└───┴───┘
</pre>
<p class="sr-only">A two by two grid containing A, B, C and D.</p>pre.diagram {
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
white-space: pre;
overflow-x: auto;
line-height: 1;
tab-size: 4;
}line-height: 1 closes the vertical gaps between stacked line characters.
Things that catch people out
- A line-height above 1 leaves a hairline gap between the vertical strokes of consecutive rows, which makes a solid box look dashed.
- Copying a diagram out of a terminal often brings trailing spaces that a trimming build step removes, and the right hand edge of the box disappears with them.
- Mixing weights without the correct transition characters leaves visible notches at every junction. Look the junction up rather than guessing which corner to use.
Try it: HTML Entity Reference
Search 152 entities across 9 categories, switch the copy format between the character, the name, the decimal form and the hex form, and copy in one click.
HTML Entity Reference
LOCAL · Browser-OnlySearchable reference of 150+ HTML entities with one-click copy in any format
152 entities across 9 categories
Commonly Used
→Arrows(13)
±Math(35)
$Currency(8)
…Punctuation(21)
©Symbols(24)
πGreek(30)
½Fractions(6)
●Geometric(7)
æLatin Special(8)
Click any entity card to copy it in your chosen format. All data is embedded in the page and works offline.
Related HTML entities
All html entities →Card suits in HTML: spade, club and diamond
The spade, club and diamond suit characters with their named entities and code points, the outlined variants, and how to colour the red suits correctly.
Non-breaking space ( ) in HTML
The no-break space at U+00A0, what it prevents beyond line breaking, why it defeats site search, and the CSS properties that do the job better.
Middle dot (·) in HTML
The interpunct at U+00B7, its entity forms, its use as a byline separator, its role in Catalan spelling, and how it differs from the bullet and dot operator.
Euro sign (€) in HTML
The euro sign at U+20AC, why it fell outside Latin-1, which side of the amount it belongs on in each language, and how to format currency properly.
Pound sign (£) in HTML
The pound sign at U+00A3, its entity forms, why the name is ambiguous between sterling and the hash key, and the encoding bug that doubles the character.
Yen sign (¥) in HTML
The yen sign at U+00A5, its entity forms, the one and two bar variants, why it is shared with the yuan, and the backslash problem on older Japanese systems.
Tools for this
- Unicode Character Finder Free online unicode character finder - search and copy special Unicode characters and symbols
- HTML Entity Reference Free online HTML entity reference - search and copy HTML entities with live preview