How to recreate font style of <pre> tag

  • Author
  • #425666


    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



    Oh, yeah. Blog at Post in question is the lastest post.



    Why not link your blog to your username? Just saying…



    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.

The topic ‘How to recreate font style of <pre> tag’ is closed to new replies.