Ascii art

• 

  evayparra · Member · Oct 17, 2020 at 7:27 am

  • Copy link
  • Add topic to favorites

  Hi! I am trying to paste some ascii art in a wordpress page and sometimes it displays nicely but some other it looks very messy and I can’t figure out why.

  When I paste ascii from this page looks messy: http://dechi.xrea.jp/library/log/TON1BCeLyg/004.html

  When I do it from this page it doesn’t: https://www.asciiart.eu/books/books

  I don’t own the wordpress page, it belongs to an art book fair where I am an exhibitor, so I have some access and editing privileges but cannot really use plugins.

  I have noticed that whenever the ascii image works at the bottom of the text window appears PRE, bit when it doesn’t P or DIV appears

  Could someone help me figure out this?

  Thank you very much

• 

  staff-mckluskey · Staff · Oct 17, 2020 at 2:14 pm

  • Copy link

  Hi there,

  What is the address of the site where you’re trying to add it?

• 

  evayparra · Member · Oct 17, 2020 at 5:16 pm

  • Copy link

  Hi fresatomica

  The page is: https://vancouverartbookfair.com/fair/exhibitors/calipso-press/

  There you can see some of the ascii I have managed to display in a proper way : )

• 

  kokkieh · Staff · Oct 18, 2020 at 7:17 am

  • Copy link

  Hi there,

  I have noticed that whenever the ascii image works at the bottom of the text window appears PRE, bit when it doesn’t P or DIV appears

  This is the key. Websites are written in HTML, and HTML hates whitespace – any unnecessary spaces appearing in a line, or unnecessary blank lines appearing between lines, will automatically be stripped out.

  The only way to prevent this is to wrap your content inside a <pre></pre> HTML tag. That “pre” stands for “preformatted”, and that tells the editor and browser that anything inside those tags should be shown exactly as it was added.

  https://developer.mozilla.org/en-US/docs/Web/HTML/Element/pre

  So ascii art will always need to be added inside that HTML tag.

  If you’re using the WordPress block editor, there’s a Preformatted Block you can use for this.

  That said, the site you linked to above is not hosted on WordPress.com, but using the open source WordPress software at another hosting provider. Support for that version of WordPress is provided by the WordPress.org community at https://wordpress.org/support/forums/, so you can ask there if you need more help with this site in future.