Can the <pre> tag's font-family, be changed?

Discussion in 'CSS' started by wbailey, Sep 16, 2009.

  1. #1
    I am trying to preserve the pre-formatted text that comes in columns, but change the font to arial or something other than courier.

    I understand that pre-formatting could be done using a <p> tag and some css. However I can't modify the HTML. So I'm forced to use the <pre> tag. Is there anyway to preserve the white-space and keep things lined up, but use a font other than courier.

    
    <html>
         <head>
    	 <style type="text/css">
              pre {font-family:arial;}
             </style>
        </head>
    
        <body>
    
         <pre>
               first line
                          second line
                      t   h   i  r  d     l  i  n  e
          </pre>
         </body>
    </html>
    
    HTML:
    This is an example of the formatting I want to preserve.
    
    
    Name       : test test                    Name           : test test
    Address    : test                         Address        : test
    
    
    
    HTML:

    This is what happens when I change the font to arial.

    
    
    Name       : test test                    Name           : test test
    Address      : test                         Address        : test
    
    
    HTML:
     
    Last edited: Sep 16, 2009
    wbailey, Sep 16, 2009 IP
  2. ceban

    ceban Peon

    Messages:
    21
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #2
    To preserve white-spacing you should use another fixed-width font.
    In this case Arial it's not a fixed width font.
     
    ceban, Sep 16, 2009 IP