Formatting with <pre>

2 Views

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

Read More

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;
}
Post Views: 2

Related posts

Leave a Reply

4 comments

  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.

  2. After some research it came out that WordPress, or more precisely “wp-texturize”, automatically converts double dashes ‘–‘ to &ndash;.

    Apparently, there is an &ndash; and an &mdash;. 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!

  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.

  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)