'How to make HTML element that is manually drawn stay fixed?
I am trying to manually draw a rectangle in HTML using dashes and special characters (-, +, *) like this:
<div>
<pre>
+--------------------------------------------------------------------------------+
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
+--------------------------------------------------------------------------------+
</pre>
</a>
</div>
I also plan on putting text and other elements inside the rectangle, but if I do that, the rectangle would look wonky:
<div>
<a href="HOME.HTM" id="coc">
<pre>
+--------------------------------------------------------------------------------+
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| random text to put inside |
+--------------------------------------------------------------------------------+
</pre>
</a>
</div>
Which would be rendered on the screen as something like this: 
How would I force the HTML to align properly and maintain the rectangular shape that's drawn even with text elements inside?
Solution 1:[1]
I would just use a border-image. Lets say you got this image that is 210x210 pixels with a grid consisting of nine squares each with a size of 70x70 pixels.
Just mess around with border-image-slice and border-width to get something that is good enough.
And don't use pre. Just style it to look like a monochrome screen.
body {
background-color: black;
color: limegreen;
font-family: "Courier New";
}
.ascii-border {
--vertical-slice: 60;
--horizontal-slice: 70;
height: 300px;
width: 400px;
padding: 1rem;
border: 4px double currentColor;
border-image: url(https://i.stack.imgur.com/9aAyn.png);
border-image-slice: var(--vertical-slice) var(--horizontal-slice);
border-width: 20px;
border-image-repeat: round;
}<div class="ascii-border">
Hello world
</div>Solution 2:[2]
You can use two separate elements and align them using relative positioning:
<div class="container">
<div class="box">
+---+
| |
| |
| |
+---+
</div>
<div class="text">
some text
</div>
</div>
CSS:
.container {
position: relative;
}
.box {
white-space: pre;
font-family: monospace;
}
.text {
position: absolute;
top: 0;
left: 0;
white-space: pre;
font-family: monospace;
}
Final result:
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | Rickard Elimää |
| Solution 2 |