let wrapper = document.querySelector(".wrapper");
let Text = function (s) {
let Text = {
"M": [
"███╗ ███╗",
"████╗ ████║",
"██╔████╔██║",
"██║╚██╔╝██║",
"██║ ╚═╝ ██║",
"╚═╝ ╚═╝",
]
}
for (let i = 0; i < s.length; i++) {
let currentChar = Text[s.charAt(i)];
currentChar.forEach(element => {
let span = document.createElement("span");
let spanContent = document.createTextNode(element);
span.appendChild(spanContent);
wrapper.appendChild(span);
currentChar = Text[s.charAt(i) + 1];
});
}
}
Text("M");span::before {
content: "\a";
white-space: pre;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="wrapper">
</div>
</body>
</html>In javascript the characters are displayed as expected however in html they become misaligned and I don't know why. Expected Output
I tried replacing the blank spaces with Unicode characters but it was too tedious. Any guidance would be appreciated.
Just wrap the .wrapper with a <pre> tag.
let wrapper = document.querySelector(".wrapper");
let Text = function (s) {
let M = {
"M": [
"███╗ ███╗",
"████╗ ████║",
"██╔████╔██║",
"██║╚██╔╝██║",
"██║ ╚═╝ ██║",
"╚═╝ ╚═╝",
]
}
for (let i = 0; i < s.length; i++) {
let currentChar = M[s.charAt(i)];
currentChar.forEach(element => {
let span = document.createElement("span");
let spanContent = document.createTextNode(element);
span.appendChild(spanContent);
wrapper.appendChild(span);
currentChar = Text[s.charAt(i) + 1];
});
}
}
Text("M");span::before {
content: "\a";
white-space: pre;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<pre>
<div class="wrapper"></div>
</pre>
</body>
</html>