Bold display

Some people begin their weekend on the veranda of a mountain cabin, savoring a crumpet smothered in marmalade and creamery butter. Some people opt for a SPA with the hope of renewal, refreshed from the rapid exchange of hot and cold water. Some people lean toward a hyperventilating PC knowing full well this will cause back pain a few years down the line, updating a repository with another excuse for web components.

Feeling pity for one of the not-so fictional figures? Well, it might not help the situation, but here’s just what you can do with the new code, with a custom element named dot-matrix-display.

Building on top of past efforts, in an HTML document you can showcase ASCII art in the body of a pre element, so that whitespace is fully preserved.

<pre>
oo oo
ooooo
ooooo
 ooo
  o</pre>

From this starting point import the component and surround the pre tags with the helper structure.

<dot-matrix-display>
	<pre><!-- ... --></pre>
</dot-matrix-display>

That’s it. On your end, there’s nothing else left to do but fill the multi-line string with the "o" character and delight in the crisp SVG. The letters are picked up and quickly re-used to draw circles with vector graphics.

But wait, there is more!

Past circles for dots you can add circles for a pixelated matrix as well. This time you will need the period character ".", or as many characters as you want to detail the picture.

<pre>
.......
.oo.oo.
.ooooo.
.ooooo.
..ooo..
...o...</pre>

Not yet impressed? Well, I’ve put more thought into the web component — the adventure continued past the morning fling —, so that you have access to an almost respectable API. A base interface which allows for some configuration while providing sensible defaults.

Consider the characters. These start off with the letter “o” and full stops, but you can swap either with the dot and matrix attributes.

<dot-matrix-display dot="o" matrix="x">
	<!-- ... -->
</dot-matrix-display>

These options are structural and affect the way the grid is built. To update the design as well there are two more attributes, which work even as properties: inset and rounding. The first one will dictate how much the circle is inset, padded in each little cell. In a cell 1 unit wide and tall, you can understand how the maximum value is precisely half of the measure. The second attribute means you can draw a circle, or sand off the corners a little less to draw soft rectangles.

<dot-matrix-display inset="0.15" rounding="0.1">
	<!-- ... -->
</dot-matrix-display>

To close the styles we move to CSS, where you are spoiled with regular and custom properties. With standard key-value pairs you can paint with color and background through the custom element.

dot-matrix-display {
	color: hsl(29 100% 58%);
	background: hsl(25 66% 21%);
}

The color cascades to change the circles, while the background paints over the area of the node itself, SVG included.

But you have even more control in the form of three defined properties:

--color-dot, to draw the circles for the dot character
--color-matrix, expectedly achieving the same end for the matrix
--color-display, for the otherwise hidden backdrop of the vector graphic

dot-matrix-display {
	--color-dot: hsl(210 14% 89%);
	--color-matrix: hsl(210 7% 56%);
	--color-display: hsl(214 14% 10%);
}

It may seem redundant to have multiple ways to set color and background, but the idea is to give you the ability to choose. You may want to use regular properties for what they are designed, to style the selected element instead of the content within.

dot-matrix-display {
	color: hsl(210 14% 89%);
	background: hsl(214 14% 10%);
	padding: 2rem;
}

And that should be more than enough. You are set to open a notepad and space out your creations one character at a time.

To revisit distant lands.

    .     ooooo   .    oo  
.    o o   o  .   o  o 
.   ooooo  o ... o .. o
.   o  oo  o . . o .. o
.      ooooo . .  o  o 
.ooooooo  o  . .   oo  
. ooooo   o  ...       
.     o   o            
.     o   o      oooooo
.     o  oo      o    o
.     ooooo ooo   oooo 
.      o o  o o        
.      o o   o . . . . 
.      o o  o o . . . .
.     oooo  ooo  . . .

To entertain a small space adventure.

             oo                 
   . . .  ooo            . .
           ooo       . .  . 
           oo            . .
          ooooo             
         ooooooooo          
. . . . ooooo ooooo         
         ooooooooo          
          ooooo             
           oo          . .  
           ooo     . .  .   
   . . .  ooo          . .  
         oo

Or to draw a down-to-earth map which took as much time as you’d expect to complete.

                      o                              
           ooooooooooo         o    o            
         oooooooooooo    oo          oo          
     ooo o     oooooo     o    o   ooooo  oo     
 oo    ooo oo  ooooo          oo ooooooooooooo  o
oooooooooooo o  oooo     oooooooooooooooooooooooo
ooooooooooo oo  oo  o    oooooooooooooooooooooooo
 oo oooooo  oo        ooooooooooooooooooooooooo  
     oooooo oooo      oooooooooooooooooooooo o   
     ooooooooooo      ooooooooooooooooooooo      
      ooooooooo       ooo oooooooooooooooo       
       oooooo           o  ooooooooooooo o       
       ooo o         oooooooooooooooooooo        
        ooo  o       ooooooo ooo ooooooo         
           oooo     ooooooooo o  oo  oo o        
            ooooo    ooooooooo    o   o o        
           ooooooo   ooooooooo       o oo        
            oooooo       oooo        oooo ooo    
             ooooo       oooo o            o     
             oooo        ooooo          oooo     
             ooo         ooo o         oooooo    
             oo           oo           oooooo    
            ooo                           ooo  oo
            oo                              o  o 
             o

Time somebody might finally deem to be well spent indeed.