Need help? Check out our Support site, then


How to recreate font style of <pre> tag

  1. I really like the look of the font from the preformatted <pre> tag. However, it's a hassle to actually use the <pre> tag in my posts because it doesn't automatically break lines, and I have to manually insert break lines to format my posts.
    Pasting <pre> text onto a Microsoft Word document, I have 9-point Consolas font, formatted to HTML Preformatting. To try to mimic this, I add the tag <span style="font: 10pt consolas;">. However, 10pt is too small, and 11pt is too big (I can't make it fall in between). The same problem goes when replacing 10pt and 11pt with 95% and 100%, respectively.
    On top of that, the span tag seems to be missing something, because while the font is correct, the formatting just looks different. When I pasted my new text to the Word document, I have formatting set to apple-style-span, as well as a larger font than I would like.
    Is there any way for me to perfectly mimic the font style, formatting, and size of <pre> without having to manually enter line breaks?

    The blog I need help with is uhwuggawuh.wordpress.com.

  2. Oh, yeah. Blog at uhwuggawuh.wordpress.com. Post in question is the lastest post.

  3. Why not link your blog to your wordpress.com username? Just saying...

  4. First off, for the web, it is best to use either percentages or em units for font sizes so that they maintain their size relationship to all other items in the page regardless of monitor resolution etc.

    I would suggest the following rather than your span stuff:

    <span style="font-family:consolas; font-size:1.1em;">

    The em units can even be set with two decimals such as .96 or 1.01 or 1.25.

    Also note that I've checked my Mac and my PC and neither of them have the consolas font as part of the standard install, which means that my browsers are likely to substitute either times or courier for them. Never use a font that is not part of a standard OS installation or you are putting yourself at the mercy of whatever the visitor's particular browser decides to substitute.

Topic Closed

This topic has been closed to new replies.

About this Topic