Background image position and <pre>/<code> tag question

I am building a default sheet for my linux-related pages.
Since many linux users still rely on/prefer viewing textmode and
unstyled content I try to stick to the correct html tags to pertain good
readibility on browsers w/o css-support.

For important notes, warnings etc I use the <pre> tag, which shows in a
neat bordered box when viewed with css, and depending on its class a
clarifying background-image is shown.

I would like the background image to 'break out' of the surrounding
border, so it shows as overlapping the bordered text edge.

I tried using a negative background-position but that makes the image
disappear under the border. z-index no help here, as it relates to all
of the <pre> tag.

FIRST QUESTION: Any idea how I can have the images shown overlapping
both the underlying page and the styled content without resorting to
complicating separate tags and/or absolute positioning?

Then I have code samples on my pages, and I would prefer to use the
<code> tags surrounding these. Unfortunately this doesn't keep the
formatting like <pre> does, including spaces, returns etc. So I am
tempted to use pre tags instead with a class 'code' added, but this
isn't correct use of the available tags in html.

SECOND QUESTION: Is there a way of making my code tags adopt the <pre>
qualities wrt formatting ? Or is the only way using <code><pre> ...
</pre></code> combo's? (Aligning properly using &nbsp, tabs and such is
really not a desirable option.)

Thanks for reading, and more so for replying!
Rgds
Sh.

Schraalhans Keukenmeester wrote:

I am building a default sheet for my linux-related pages.
Since many linux users still rely on/prefer viewing textmode and
unstyled content I try to stick to the correct html tags to pertain good
readibility on browsers w/o css-support.

Do we? I use linux, and I occasionally check my pages in one of the text
browsers, but I normally use konqueror and sometimes firefox. Do you know
what the stats are for text only usage? I would like to know. Thanks!

For important notes, warnings etc I use the <pre> tag, which shows in a
neat bordered box when viewed with css, and depending on its class a
clarifying background-image is shown.

I would stick to using <pre> for preformatted text, like formulae and
poetry. Keep it to its intended use for clarity.

I would like the background image to 'break out' of the surrounding
border, so it shows as overlapping the bordered text edge.

I tried using a negative background-position but that makes the image
disappear under the border. z-index no help here, as it relates to all
of the <pre> tag.

In text only mode, this is obviously pointless. This would be for the
graphically enabled.

FIRST QUESTION: Any idea how I can have the images shown overlapping
both the underlying page and the styled content without resorting to
complicating separate tags and/or absolute positioning?

I don't think so, but I wouldn't ask me if I was trying to do this. There
may indeed be a way with javascript or something similar.

Then I have code samples on my pages, and I would prefer to use the
code> tags surrounding these. Unfortunately this doesn't keep the
formatting like <pre> does, including spaces, returns etc. So I am
tempted to use pre tags instead with a class 'code' added, but this
isn't correct use of the available tags in html.

I would use the code tag, and specify a monospace font within the style
definition. Courier is an obvious but ugly choice. I might pick another
font as the primary option, and downgrade back to courier for those who
don't have the other fonts.

SECOND QUESTION: Is there a way of making my code tags adopt the <pre
qualities wrt formatting ? Or is the only way using <code><pre> ...
/pre></code> combo's? (Aligning properly using &nbsp, tabs and such is
really not a desirable option.)

In a style sheet. See above.

Thanks for reading, and more so for replying!

Thanks for asking, I hope this helps.

Carolyn
--
Carolyn Marenger

Carolyn Marenger wrote:

Schraalhans Keukenmeester wrote:


I am building a default sheet for my linux-related pages.
Since many linux users still rely on/prefer viewing textmode and
unstyled content I try to stick to the correct html tags to pertain good
readibility on browsers w/o css-support.


Do we? I use linux, and I occasionally check my pages in one of the text
browsers, but I normally use konqueror and sometimes firefox. Do you know
what the stats are for text only usage? I would like to know. Thanks!

Hmm, I may have exaggerated here. And I have no stats either. I was just

thinking of 'all' those poor people out there working on *nix boxes with
no X support installed. Or projecting my own experience onto an
imaginary crowd. So rephrase: It is possible my page will be viewed
using browsers that don't support css styling, or by people who have
style turned off. And judging from my own experience and prejudice, such
users -if any- are more likely to be found amongst *nix users than MS
slaves. As for the stats, I intend to find out.

Anyways, adhering to (widely accepted) standards/recommendations never
hurt anyone.

For important notes, warnings etc I use the <pre> tag, which shows in a
neat bordered box when viewed with css, and depending on its class a
clarifying background-image is shown.


I would stick to using <pre> for preformatted text, like formulae and
poetry. Keep it to its intended use for clarity.

Precisely my point! I've seen the weirdest and highly unorthodox (ab)use
of tags and constructs. All hidden quite nicely in popular browsers, but
close to unusable in others, at times.

I would like the background image to 'break out' of the surrounding
border, so it shows as overlapping the bordered text edge.

I tried using a negative background-position but that makes the image
disappear under the border. z-index no help here, as it relates to all
of the <pre> tag.


In text only mode, this is obviously pointless. This would be for the
graphically enabled.

Correct. The text-only/no-css browsing blahblah above only served as a
motivation/defense for my intent to comply with standards.

FIRST QUESTION: Any idea how I can have the images shown overlapping
both the underlying page and the styled content without resorting to
complicating separate tags and/or absolute positioning?


I don't think so, but I wouldn't ask me if I was trying to do this. There
may indeed be a way with javascript or something similar.

I am trying a new construction with a wrapper div and relative placement
of the bg image outside the <pre> tag. Not ideal, but it works okay
sofar (only I am scared to try my handiwork in IE now... I may need
counseling later on).

Then I have code samples on my pages, and I would prefer to use the
code> tags surrounding these. Unfortunately this doesn't keep the
formatting like <pre> does, including spaces, returns etc. So I am
tempted to use pre tags instead with a class 'code' added, but this
isn't correct use of the available tags in html.


I would use the code tag, and specify a monospace font within the style
definition. Courier is an obvious but ugly choice. I might pick another
font as the primary option, and downgrade back to courier for those who
don't have the other fonts.

Courier is _indeed_ ugly. recognizable though, and immediately
associated by many with coding. Any font in particular you'd go for in
the monospaced department? Most I've ran into have as much as or less
appeal than courier. While we're at it, which regular font strikes your
fancy?

SECOND QUESTION: Is there a way of making my code tags adopt the <pre
qualities wrt formatting ? Or is the only way using <code><pre> ...
/pre></code> combo's? (Aligning properly using &nbsp, tabs and such is
really not a desirable option.)


In a style sheet. See above.
How does one ensure <code> content looks neatly indented on a non-styled

display? Perhaps nest a <pre> inside it... Hmm, maybe I am too fussy here.

Thanks for reading, and more so for replying!


Thanks for asking, I hope this helps.

Carolyn
Cheers, and welcome. It did help, or at least refuel inspiration.

And made me laugh indirectly (I checked out your domain in my browser.
Never before read a whole site's content in under 10 secs.)

Sh.

On Sun, 26 Mar 2006, Toby Inkster wrote:

Schraalhans Keukenmeester wrote:

Courier is _indeed_ ugly. recognizable though, and immediately
associated by many with coding. Any font in particular you'd go for in
the monospaced department?

I like...

font-family: "Bitstream Vera Sans Mono", "Lucida Console",
"Andale Mono", monospace;

Just a routine comment here, that the visual appearance isn't the
only relevant feature of a font: its character repertoire is also
important, in general.

And the monospaced fonts supplied as standard with MS OSes are dismal,
in this regard, even in comparison to their supplied proportional
fonts. (Many MS users would also have access to Arial Unicode MS,
which makes the contrast between proportional and monospaced
repertoires even more crass).

There's a Lucida Console font supplied with XP, which, according to
SIL Viewglyph, has the ominous score of Number of Glyphs = 666. One
might compare this with some of the usual proportional fonts such as
Times New Roman which is listed with 1674, or Lucida Sans Unicode with
1776 - or Arial Unicode MS, for those who have it, with 50377.

Do you have information on the repertoires of the other fonts that you
mentioned, at least in the versions that users would be likely to
have? Well, I just downloaded Bitstream Vera Sans Mono version 1.10
from the Gnome project, and it appears to have a mere 269 glyphs. On
a web page, I did find a reference to a version of Andale Mono WGL4
which could be purchased.

(All these glyph counts are based only on the "Number of Glyphs"
reported in the Font Statistics by SIL Viewglyph, but I suppose they
do give a vague idea of the scope of the font's repertoire - even if
one needs to look much more closely to see if the ranges covered are
of any use for one's own requirements.)

Some background to this in my own little page about browsers and
fonts:
http://ppewww.ph.gla.ac.uk/~flavell/...tml#Monospaced

regards

On Sun, 26 Mar 2006, Toby Inkster wrote:

Monospaced fonts are mostly only used for coding examples, which
generally only need ASCII characters anyway.

That may be your opinion, and often also mine; but I do think other
authors may have a different attitude, and I don't think it's our
place to refuse them. I was asked for help by someone who wanted
their Polytonic Greek to appear correctly as they wanted it in
monospaced, to take one example.

And when a glyph is missing, the browser *should* substitute in a
glyph from another font anyway. (Of course, not all browsers are
smart enough.)

Indeed it should, and some browsers do a decent job of it; but MSIE
evidently has quite some way to go yet (anyone care to comment on any
improvements to this issue IE7? - I've no real plans to beta it
myself).

Be that as it may, it's preferable if all the characters needed for a
particular piece of text can come from the same font.

Schraalhans Keukenmeester wrote:

Since many linux users still rely on/prefer viewing textmode and
unstyled content I try to stick to the correct html tags to pertain good
readibility on browsers w/o css-support.

A bogus observation, but reasonable enough for the very few who
actually are using text-only browsing.

For important notes, warnings etc I use the <pre> tag,

Stop doing that. You're entirely mis-using <pre> and that's the root of
most of your troubles.

which shows in a
neat bordered box when viewed with css, and depending on its class a
clarifying background-image is shown.

So the reason you're doing bizarre mis-use of HTML is to support
text-only users, but now you're worrying about the handling of images ?

On Sun, 26 Mar 2006, Toby Inkster wrote:

Having skimmed through a few of your Unicode tables,

Which exactly?

I can't find any
characters that display in the non-<tt> column, but not the <tt> column,

Try <http://ppewww.ph.gla.ac.uk/~flavell/unicode/unidata06.html#x0679>

so I suppose that MSIE is doing font substitution.

I can't believe that.

--
All free men, wherever they may live, are citizens of Denmark.
And therefore, as a free man, I take pride in the words "Jeg er dansker!"

Schraalhans Keukenmeester wrote:

Carolyn Marenger wrote:
Schraalhans Keukenmeester wrote:


I am building a default sheet for my linux-related pages.
Since many linux users still rely on/prefer viewing textmode and
unstyled content I try to stick to the correct html tags to pertain good
readibility on browsers w/o css-support.


Do we? I use linux, and I occasionally check my pages in one of the text
browsers, but I normally use konqueror and sometimes firefox. Do you
know
what the stats are for text only usage? I would like to know. Thanks!

Hmm, I may have exaggerated here. And I have no stats either. I was just
thinking of 'all' those poor people out there working on *nix boxes with
no X support installed. Or projecting my own experience onto an
imaginary crowd. So rephrase: It is possible my page will be viewed
using browsers that don't support css styling, or by people who have
style turned off. And judging from my own experience and prejudice, such
users -if any- are more likely to be found amongst *nix users than MS
slaves. As for the stats, I intend to find out.

Anyways, adhering to (widely accepted) standards/recommendations never
hurt anyone.

To the best of my knowledge, this is an accurate statement. However, here
is a twist on it... Can you name one software company who by breaking
standards and reinventing their own twist on them, has made billions and
hurt thousands?

I do like to adhere to standards, and I hate the amount of time it takes to
create a standards compliant page, only to have to hack it so that it also
works in various versions of MicrosoftIE.

For important notes, warnings etc I use the <pre> tag, which shows in a
neat bordered box when viewed with css, and depending on its class a
clarifying background-image is shown.

I would stick to using <pre> for preformatted text, like formulae and
poetry. Keep it to its intended use for clarity.

Precisely my point! I've seen the weirdest and highly unorthodox (ab)use
of tags and constructs. All hidden quite nicely in popular browsers, but
close to unusable in others, at times.

I used to do a lot of that back when I coded in 3.2. I can remember hours
of sorting through levels of tables, to get that one item moved from the
third position of the fourth column to the 2nd position of the first
column. Just thinking back to those days scares me. I don't understand
why people still do it. CSS is so much easier to maintain.

I would like the background image to 'break out' of the surrounding
border, so it shows as overlapping the bordered text edge.

I tried using a negative background-position but that makes the image
disappear under the border. z-index no help here, as it relates to all
of the <pre> tag.

In text only mode, this is obviously pointless. This would be for the
graphically enabled.

Correct. The text-only/no-css browsing blahblah above only served as a
motivation/defense for my intent to comply with standards.

In that case let me back you up. I go with the philosophy of design for
text, accentuate with graphics. Anyone can get the content, graphical
browsers can see pretty versions of it. Auditory ones can hear it. And I
also like to reformat it for printers, to hide the erroneous menus and crap
that is useless in a printed document.

FIRST QUESTION: Any idea how I can have the images shown overlapping
both the underlying page and the styled content without resorting to
complicating separate tags and/or absolute positioning?

I don't think so, but I wouldn't ask me if I was trying to do this.
There may indeed be a way with javascript or something similar.

I am trying a new construction with a wrapper div and relative placement
of the bg image outside the <pre> tag. Not ideal, but it works okay
sofar (only I am scared to try my handiwork in IE now... I may need
counseling later on).

If you need counselling later on, then I will let you lie on my cybercouch
and tell me all about it. I will be taking numerous notes in my
cybernotebook which to any but a trained eye, will look like cyberdoodles.

Then I have code samples on my pages, and I would prefer to use the
code> tags surrounding these. Unfortunately this doesn't keep the
formatting like <pre> does, including spaces, returns etc. So I am
tempted to use pre tags instead with a class 'code' added, but this
isn't correct use of the available tags in html.

I would use the code tag, and specify a monospace font within the style
definition. Courier is an obvious but ugly choice. I might pick another
font as the primary option, and downgrade back to courier for those who
don't have the other fonts.

Courier is _indeed_ ugly. recognizable though, and immediately
associated by many with coding. Any font in particular you'd go for in
the monospaced department? Most I've ran into have as much as or less
appeal than courier. While we're at it, which regular font strikes your
fancy?

On my own system, I use Century Schoolbook Mono for a mono spaced font. I
don't remember where I first got my hands on it - must have been some 'doze
software, before I made the switch to Linux.

On a day to day basis, I use a little font called Classical Garamond. I
have done a bunch of work with people with learning disabilities, including
dyslexia. There is a specific font, somewhat expensive last time I looked,
available for dyslexics. It is easier for dyslexics to read, and seems to
reduce eye strain for most other people, myself included. Classical
Garamond is a very close match to the other.

<snip>

Cheers, and welcome. It did help, or at least refuel inspiration.
And made me laugh indirectly (I checked out your domain in my browser.
Never before read a whole site's content in under 10 secs.)

You are one of the first to view the site and not tell me about the single
type that exists and hasn't been corrected for the last year. I did
however know if it's existence. I am glad it gave you a laugh!

Carolyn
--
Carolyn Marenger

On Mon, 27 Mar 2006, Toby Inkster wrote:

Try <http://ppewww.ph.gla.ac.uk/~flavell/...a06.html#x0679

Yep -- that was one of the pages I looked at earlier. Every character that
displays in the "&#dec;" column also displays fine in the "<tt>" column;
sometimes in a different font, though that is to be expected.
This is the latest IE 7 beta, installed on a plain Windows XP SP 2 system.
No fonts installed apart from those that were there by default.

So this is very different from Internet Explorer 6!
IE 6 takes all Arabic letters in <tt> from Courier New (or whatever
your choice was). Courier New lacks many "extended Arabic" letters
but it claims to "support Arabic".

On Tue, 28 Mar 2006, Andreas Prilop wrote:

On Mon, 27 Mar 2006, Toby Inkster wrote:

Try <http://ppewww.ph.gla.ac.uk/~flavell/...a06.html#x0679

Yep -- that was one of the pages I looked at earlier. Every character that
displays in the "&#dec;" column also displays fine in the "<tt>" column;
sometimes in a different font, though that is to be expected.
This is the latest IE 7 beta, installed on a plain Windows XP SP 2 system.
No fonts installed apart from those that were there by default.

So this is very different from Internet Explorer 6!

Indeed, this was an interesting report, thanks. I hadn't noticed any
earlier mention of these particular improvements, which are certainly
long overdue.

IE 6 takes all Arabic letters in <tt> from Courier New (or whatever
your choice was). Courier New lacks many "extended Arabic" letters
but it claims to "support Arabic".

Quite so!

What would be -very- handy would be a utility to report which of one's
installed fonts does in fact contain a given character - instead of
having to hunt around some likely fonts and browsing them with a font
browser to find out. It looks as if Mozilla (I suppose I mean "Gecko")
knows how to do the trick of at least finding one, but I don't know
how to get it to report which font it has actually landed on.

Certainly your specific test character
http://ppewww.ph.gla.ac.uk/~flavell/...a06.html#x0679,
viewed in one of the gecko-based browsers here, comes out (in the <tt>
column) in a style that looks way different from any of the other
characters in that column.