Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Manually draw pixel-perfect glyphs for Box Drawing and Block Elements characters

See original GitHub issue

Details

Browser and browser version: Chrome 76.0.3809.132 (64 bit), FireFox 69.0 (64 bit)
OS version: Windows 7 Pro 64 bit
xterm.js version: ^3.14.5

Steps to reproduce

index.html:

<!doctype html>
<html>

<head>
	<link rel="stylesheet" href="node_modules/xterm/dist/xterm.css" />
	<script src="node_modules/xterm/dist/xterm.js"></script>
</head>

<body>
	<div id="terminal"></div>
	<script>
		var options = {
			rows: 30,
			cols: 80,
			fontFamily: '"Courier New", "DejaVu Sans Mono", "Everson Mono", FreeMono, "Andale Mono", monospace',
			fontSize: 12,
			convertEol: true
		};
		var term = new Terminal(options);
		term.open(document.getElementById('terminal'));

		term.write('           ╔═════════════════════════════════════════════════════════╕\n');
		term.write('           ║                                                         │\n');
		term.write('           ║              ╔═══════════════╦════════╤════════╗        │\n');
		term.write('           ║              ║               ║        │        ║        │\n');
		term.write('           ║              ║               ║        │        ║        │\n');
	</script>
</body>

</html>

There are several related issues but it does not help:

https://github.com/xtermjs/xterm.js/issues/475 https://github.com/xtermjs/xterm.js/issues/992

Issue Analytics

State:
Created 4 years ago
Reactions:4
Comments:29 (18 by maintainers)

Top GitHub Comments

9reactions

Tyriarcommented, Aug 19, 2021

@meganrogge and I just finished this, here’s the result:

Canvas (1.1 line height, 1 letter spacing):

Webgl (same):

The setting is customGlyphs and is enabled by default

4reactions

guregucommented, May 5, 2020

I’ve done some experimenting with manually drawing certain characters. Demo page: https://roguelike.solutions/xterm/xtermtest.html

Code is rough, but available here: https://github.com/xtermjs/xterm.js/compare/master...guregu:box-drawing

Currently, it’s two parts, one is boxDrawingLineSegments which borrows an algorithm from iTerm2. It defines 7 kind of arbitrary vertical and horizontal anchor points per character cell and strokes lines or curves corresponding to them. This works for almost all of the box-drawing lines, but doesn’t work for the dotted line characters which require more anchor points. Having precise control over drawing the lines also means we don’t need to clip horizontally to avoid spillover. I’m trying to think of a better way to represent these that will also work with the dotted lines. Perhaps instead of splitting cells into 7 somewhat-arbitrary points, instead we can define the locations like “left”, “center”, “center minus n devicePixelRatio pixels”, etc. Also, iTerm2 is GPL2 and I tried to write it to be as original as possible and avoid license issues, but I’m not sure where the figurative line is drawn here. This is another reason to use a fancier original algorithm. Consider the current implementation a proof of concept.

Next is boxDrawingBoxes (needs a better name 😅) which splits a character cell into eighths and fills in rectangles corresponding to them. This is sufficient to draw the solid block characters, including new ones from the Symbols for Legacy Computing block. This should be enough to support the quadrant characters too, but in order to support sextants it will need to split characters into sixths. Allowing a divisor to be defined would be enough to support most block-like characters.

I don’t yet support the polygon characters from the Symbols for Legacy Computing block, but using similar techniques should work for them. I’m not sure how to go about drawing the shade characters like ░ ▒ ▓, but maybe they could be special-cased. There’s also the question of how far we want to go with this.

To clean the code up, maybe we could define an interface for drawing segments, and its implementors could be lines, curves, n-th boxes, etc. This is all very experimental, but if it seems like a good idea I’d be happy to contribute (and add support for the WebGL renderer).

Top Results From Across the Web

Glyphs 3 Handbook

Glyphs 3 is a professional Mac application for creating OpenType fonts. It allows you to draw, edit and test letter shapes in a...

Box-drawing character - Wikipedia

Box -drawing characters, also known as line-drawing characters, are a form of semigraphics widely used in text user interfaces to draw various geometric ......

The Basics of Drawing Type & Creating Your Own ...

Learn how to create your own handwritten script font in this typography drawing tutorial. Need ready-to-use fonts?

Terminal Appearance in Visual Studio Code

These include box drawing characters ( U+2500-U+257F ), block elements ... support these characters as well as having the characters draw pixel perfect...

Draw pixel-perfect art - Adobe Support

Align new/transformed objects with the pixel grid · Pixel Snapping Options dialog box · Draw an object aligned to the pixel grid ·...