How to recreate font style of <pre> tag

  • Author
    Posts
  • #425666

    fotenny
    Member

    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.

    #425865

    fotenny
    Member

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

    #425866

    justjennifer
    Moderator

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

    #425881

    justjennifer
    Moderator
    #425892

    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.