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>En javascript, los caracteres se muestran como se esperaba, sin embargo, en html se desalinean y no sé por qué. Rendimiento esperado
Intenté reemplazar los espacios en blanco con caracteres Unicode pero fue demasiado tedioso. Cualquier orientación sería apreciada.
Simplemente envuelva el .wrapper con una etiqueta <pre> .
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>