How to return raw text and maintain its shape and structure?

Question

I create a mini-application where users can paste any texts & share it. Let's say the user inputs these texts below.

Ex.

╔══╗
╚╗╔╝
╔╝(¯`v´¯)
╚══`.¸.[Stackoverflow]

When I load it on textarea, it displays correctly.

Link

But when I return raw of that

I kept getting display inline (broken)

╔══╗ ╚╗╔╝ ╔╝(¯`v´¯) ╚══`.¸.[Stackoverflow]

Link

---

All I did was this

public function raw($uuid)
{
    $paste  = Paste::where('uuid', base64_decode($uuid))->first();

    if($paste->type == 'json'){
        return response()->json($paste->data);
    } else {
        return $paste->raw;
    }
    
}

How can I maintain the same format as I would have render it in my textarea ?

---

Ex 2.

Display in text-area

▀██▀─▄███▄─▀██─██▀██▀▀█
─██─███─███─██─██─██▄█
─██─▀██▄██▀─▀█▄█▀─██▀█
▄██▄▄█▀▀▀─────▀──▄██▄▄█

Raw Response

As you can see in raw it displays so bad ...

▀██▀─▄███▄─▀██─██▀██▀▀█ ─██─███─███─██─██─██▄█ ─██─▀██▄██▀─▀█▄█▀─██▀█ ▄██▄▄█▀▀▀─────▀──▄██▄▄█

---

Edit

If I wrap it around pre tag

return '<textarea style="width: 100%; height: 100%;">'. $paste->raw.'</textarea>';

I get a better result

Answer 1

Instead of having to wrap the text in <pre></pre> tags, just apply the CSS property white-space: pre to whichever textarea or other element you are collecting that text in.

Here is the documentation for the pre CSS property: MDN Web Docs: white-space

That will force the line breaks to be respected. That should also copy & paste just fine. Your existing solution already appears to copy and paste just fine for me as well. Make sure to use a monospace font for that text box, as that is necessary to keep all the columns in line.

You can find plenty of great, free monospace font options here on Google Fonts: https://fonts.google.com/?category=Monospace

Examples

🚫 Without white-space: pre

** Make sure to click the "Run code snippet" button below to see the rendered preview

<div id="ascii-art" contenteditable>╔══╗
╚╗╔╝
╔╝(¯`v´¯)
╚══`.¸.[Stackoverflow]</div>

✅ With white-space: pre and a monospace font

** Make sure to click the "Run code snippet" button below to see the rendered preview

@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap');

#ascii-art {
  font-family: 'Roboto Mono', monospace;
  white-space: pre;
}

<div id="ascii-art" contenteditable>╔══╗
╚╗╔╝
╔╝(¯`v´¯)
╚══`.¸.[Stackoverflow]</div>

BONUS

If you would like to get all the characters tight and up against each other, add the CSS below:

white-space: pre;
font-family: consolas;
letter-spacing: -0.3px;
line-height: 1.19;

The letter-spacing and line-height values will need to be adjusted slightly as you change the font-family and font-size. Here is that CSS in action for both artworks you provided:

#ascii-art {
  white-space: pre;
  font-family: consolas;
  letter-spacing: -0.3px;
  line-height: 1.19;
}

<div id="ascii-art" contenteditable>▀██▀─▄███▄─▀██─██▀██▀▀█
─██─███─███─██─██─██▄█
─██─▀██▄██▀─▀█▄█▀─██▀█
▄██▄▄█▀▀▀─────▀──▄██▄▄█

╔══╗
╚╗╔╝
╔╝(¯`v´¯)
╚══`.¸.[Stackoverflow]</div>