Formatting with <pre>

Question

I'm building a site that doesn't want any styling applied to the entry-content, because it should keep the formatting of the text.

Bizarly, it works on old entries, but new entries via the front-end system fail: http://madebylars.nl/music/?page_id=373

Example:

This one works:

http://madebylars.nl/music/?tab=the-tallest-man-on-earth-love-is-all

This one doesn't:

http://madebylars.nl/music/?tab=the-tallest-man-on-earth-like-the-wheel

They both look fine in the WordPress back-end, but only one of them looks nice on the front-end. Any thoughts on how to fix this?

I'm already wrapping the whole text in <pre> tags and stripping wp-content of html-tags.

This is the styling I use (on both!):

pre {
    background: none; 
    font: 13px "Courier 10 Pitch", Courier, monospace;
    line-height: 1.5;
    margin-bottom: 1.625em;
    overflow: auto;
    padding: 0.75em 1.625em;
    display: block;
    font-family: monospace;
    white-space: pre-wrap;
    letter-spacing: normal;
    word-wrap: break-word;
    word-spacing: normal;
    word-break: normal;
    margin: 1em 0px;
}

Answer 1

The pages you are linking use two different characters, one is the &mdash and the other I don't know the name, it does not translates into an Html entity...

Original:

2——-2——-7——-7——-| <-- Mixed characters

Using the character that works:

2---2---7---7---| <-- This one is not &mdash.

You may consider using a shortcode to encapsulate the tabs, so you can manipulate the characters and substitute faulty ones.

Answer 2

After some research it came out that WordPress, or more precisely "wp-texturize", automatically converts double dashes '--' to –.

Apparently, there is an – and an —. The first corresponds to the width of the letter "n", the second to the width of the letter "m". Interesting.

wordpress.stackexchange.com/questions/60379/… I have now solved this as follows:

<?php remove_filter( 'the_content', 'wptexturize' ); ?>

Put this in functions.php. Thanks guys!

Answer 3

There could be a number of reasons why it does not work: invalid markup, stripping content also removes <div>s (which in some cases are creating line breaks in wordpress editor) and so on.

Actually I think you should get the contents of the post directly from the database or use $post->post_content and strip_tags on it.

But check all of the formatting first on a static page. Create a dummy testing.php whithout any styles and output in it your code for a single post. Test it for various posts and if it works there it will work on the website.

Answer 4

Unless I'm way off-base and totally misunderstanding the question, in the second link (the one that doesn't work), different lines have a different number of characters. Here's the strings directly under INTRO

First string:  —————-| (7 chars)
Second string: ———-0—–| (8 chars)
Third string:  ——0——-0-| (9 chars)

Are you saying you want it to look like this:

First string:  ———————-| (9 chars)
Second string: ————-0—–| (9 chars)
Third string:  ——0——-0-| (9 chars)