Re: Font looking different in <pre></pre> tags


#1

I read the original post about
"Font looking different in <pre></pre> tags "
and wondered why nobody suggested the following:

<font size="6"><pre>
followed by the data, and ending with
</pre></font>

Make the size be 1-7 to control the display.
This works for me on all my browsers.


#2

Which post are you referring to, can you post a link to it?

The <font> element is obsolete, we have css to control the display of elements.


#3

I think I found it:-

That's a very old post!


#4

THIS is the site. Here's the URL:

and font still works in all browsers. All I'm doing is forcing pre-/pre to font-/font size.


#5

^ that. The <font> tag and "IE6" say as much.

If you're not happy with the default monospace, whitespace-as-in-source, You could try using CSS, I've not tried, but I see no reason why it wouldn't just as CSS can be used to override other browser defaults.


#6

It may do, presumably to support legacy code in the many out-dated sites that exist.
But that is not a reason to still be using obsolete code.
It has been removed from the html spec, so there it so guarantee it will continue to be supported. Without even going into the fact it makes for some pig-ugly code.
It was dropped for a reason, a good reason.
CSS is for style.
HTML is for content and structure.


#7

Hi there dickguertin,

and a warm welcome to these forums. :winky:

The "font element" that you are using is twentieth century
methodology and is deprecated in favour of CSS.

coothead


#8

Well coolhead, you may be right, but I've been coding web-pages since the Web was born in December 1991, and I do what works for me. I realize this is a Learning Center, and thought I'd address an old topic with old ideas - that still work.


#9

Things have progressed a long way since then. Did you read the link I posted?

Obsolete
This feature is obsolete. Although it may still work in some browsers, its use is discouraged since it could be removed at any time. Try to avoid using it.

Usage note:

Do not use this element! Though once normalized in HTML 3.2, it was deprecated in HTML 4.01, at the same time as all elements related to styling only, then obsoleted in HTML5.

Starting with HTML 4, HTML does not convey styling information anymore (outside the element or the style attribute of each element). For any new web development, styling should be written using CSS only.

The former behavior of the element can be achieved, and even better controlled using the CSS Fonts CSS properties.

And you are or course free to code in any way that suits you, but the question was:-

...and the answer was:-


#10

Sam, that's true, but not 10 years ago when the original problem was posted. I was addressing the problem as though I could have answered back then.


#11

The answer then was to use css:-


#12

Well, that is hunky-dory if you are just coding web pages for your personal use. :winky:

But, if you are coding web pages for clients then it is a totally irresponsible and
unacceptable behaviour. :unhappy:

coothead


#13

I have now. eg.

pre.nl { 
 white-space: nowrap; 
} 
pre.ff {
 font-family: "MS Gothic";
}
.....
<pre class="nl">How 
many 
lines 
here?</pre>
<pre class="ff">What font is this?</pre>


#14

Well Mittineague, that's interesting, but I still haven't found a way to apply "size" to pre-/pre using CSS. That's what other respondents are suggesting. Show me, and I'll adopt it.


#15

With CSS the property is font-size as in "font-size: whatever" I usually use a value in em's but you could use whatever you prefer.


#16

Here you go...

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>CSS pre styling</title>

<style media="screen">

pre {
    font-family: sans-serif;
    font-size: 2em;
    font-weight: bold;
    text-transform: uppercase;
    word-spacing: 2em;
    letter-spacing: 0.5em;
 }
</style>

</head>
<body> 
<pre>
lorem ipsum
</pre>

</body>
</html>

coothead


#17

I assume you meant </pre> near the end. I certainly don't want "uppercase". BUT, it's a good model. I had 75 .txt files that I wanted to present on the Web, but viewing them as Text made them hard to read, because the font was too small. I had to transform all the files by changing certain characters: &, <, > to their &name; forms. I then had to save them as .html files because as .txt files, they still were displayed as Text, including the html portions..For me, the most expedient way was to use a 5-line wrapper around the Text, 3 in front, and 2 at the end.

<!DOCTYPE html>
<html><body>
<font size="5"><pre>
  TEXT GOES HERE
</pre></font>
</body></html>

#18

I never actually assumed that you would. :unhappy:

The example was just used to show that the "pre element"
could be styled, just like any other element, with CSS. :winky:

coothead


#19

Yup, and thanks. I'll cross over to that new bridge when the old bridge crumbles.


#20

As I pointed out in post #12...

coothead