Ascii art from panel to front-end

I would like to add the possibility of pasting an ASCII art into the panel and bringing it to the front-end, without being stripped of empty spaces and line-breaks.
This is for a highly retro website.
What would be the best field to use for that purpose?
Unfortunately, I have been failing so far.

Maybe that’s what you’re looking for?

Thank you @GB_DESIGN,

The format indeed is preserved in the .txt file on the server, but when I load it onto the website, all spaces are reduced to one and line-breaks are stripped.
Also in the panel, the art is not looking right.
I was hoping for a monospaced code field or something similar.

I assume that you have assigned a monofont to the text field in the template.
Try the output with this:

(I have not tested it)

You would probably want to solve that with CSS on the frontend, as it’s not Kirby that is collapsing the whitespace, but rather the browser.

You probably want to use something like white-space: pre or white-space: pre-wrap. Together with a monospace font, like GB_DESIGN suggested: font-family: monospace

See white-space - CSS: Cascading Style Sheets | MDN for reference.

You could also wrap the output into a <pre> tag (which by default comes with a white-space: pre style and a monospace font).

1 Like

I think that’s not really true: Kirby strips whitespace from the beginning (and end) of the string when saving a textarea field. Then, when you call markdown() or kirbytext() on the field, the whitespace from the rest of the lines is trimmed by the markdown() method.

So not using markdown()/kirbytext() in combination with pre tags will preserve the whitespace that is not at the beginning of the text.

2 Likes

Dear @rasteiner and @texnixe,
thank you so much. I had no idea, that CSS is stripping white space. TIL
It works perfectly now, thanks a lot! Have a lovely evening :slight_smile:

( I can indeed not begin the ASCII Art with white spaces, but within the lines, the spaces are preserved)