Re: [WSG] Style PRE with word wrap?
It's a pretty solution, but it doesn't word-wrap...at least not in Safari. Make your browser window thinner and see what happens? What I'm doing is no different except that I'm going through the trouble of having php count the number of tabs and then using that information to insert the correct class. If there are more than 5 \t's I just stop it there. This information is coming out of a database so it's no trouble going this route... Oh, I'm not using pre either...v On Jun 1, 2005, at 1:08 AM, Lachlan Hardy wrote: Vaska.WSG wrote: I've been reading around (via Google) and I find others with similar problems but no solution. Is there a solution to this? Whenever I present code in a page, I use something similar to the method Simon Willison put forward by in July 2002: http://development.incutio.com/simon/numbered-code-experiment.html Works for me. I've yet to find a better method (although if someone has one...) Cheers Lachlan ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
[WSG] Style PRE with word wrap?
I'm trying to make a page that will display some source code. The PRE tag works very will with retaining \t and \n but I can not find a way to make it wrap words. Words fly off the monitor... I've been reading around (via Google) and I find others with similar problems but no solution. Is there a solution to this? Help... ;) ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Style PRE with word wrap?
I'm trying to make a page that will display some source code. The PRE tag works very will with retaining \t and \n but I can not find a way to make it wrap words. Words fly off the monitor... Shouldn't you be using the code tag instead? It's a semantically better option. However, the problem will still remain. Prabhath http://nidahas.com ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Style PRE with word wrap?
Prabhath - code is an inline element, so while is should probably be included somewhere in marking up code, you need something else on the outside of it to create the block. pre is semantically pretty sound for this, since code is pre-formatted and some languages are white-space sensitive, for example. Vaska - Unfortunately there's nothing in the CSS2 spec that I know of to do what you want (see: http://www.w3.org/TR/REC-CSS2/text.html#white-space-prop). You can either obey the white-space in the source code or automatically wrap to the box, but not both. The equivalent part of the CSS Level 3 spec is massively improved though; providing additional white-space values and additional properties for controlling individual parts of white-space handling. white-space itself now effectively sets different combinations of values for these new properties. I have no idea what Opera/Firefox/Safari/K support is like for this yet, but I believe that the text module is pretty stable spec wise, so expect some implementations sooner rather than later, if not already. See: http://www.w3.org/TR/css3-text/#white-space If implementations do exist, you might be able to compromise your design by using a CSS2 compatible white-space setting and overflow scrolling for any long lines, then set the CSS3 value afterwards for better handling in newer browsers as and when they support it. Cheers, Ben On 5/31/05, Prabhath Sirisena [EMAIL PROTECTED] wrote: I'm trying to make a page that will display some source code. The PRE tag works very will with retaining \t and \n but I can not find a way to make it wrap words. Words fly off the monitor... Shouldn't you be using the code tag instead? It's a semantically better option. However, the problem will still remain. Prabhath http://nidahas.com ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** -- http://www.ben-ward.co.uk ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Style PRE with word wrap?
- Original Message - From: Patrick Lauke [EMAIL PROTECTED] To split hairs, though, the problem with pre seems to be that it appears very much like a presentational, rather than a semantic element. Any semantics seem to be inferred by the fact that the content is preformatted, which is a rather weak argument...by the same rationale, one might as well say that B, I, U etc are semantic. Heck, even the spec's definition 'The PRE element tells visual user agents that the enclosed text is preformatted.' http://www.w3.org/TR/html4/struct/text.html#edef-PRE strikes me as purely presentational. Patrick --- Patrick, Surely, the fact that pre denotes 'preformatting' means that the formatting has occurred 'somewhere else' and not in the body of the html. So, in that sense, in what way is pre 'presentational' any more than all CSS is 'presentational? To take a simple example, if I set CSS rules in defining H1 characteristics, is using that h1 tag in the html 'purely presentational' or is it different to pre? If so, why is that? Why is one 'semantic', and not the other? Sometimes, pre strikes me just like a css declaration, except that you don't have to declare what the formatting is in the header :-) N.B. I'm not arguing here, I'm asking the question! Bob McClelland, Cornwall (U.K.) www.gwelanmor-internet.co.uk ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Style PRE with word wrap?
After some testing, I think it's best to stick to using pre for blocks of code. code won't preserve whitespace, so your code's not going to have any indenting unless you use a lot of non-breaking spaces which will inflate the size of your file and not to mention a real be a pain in the butt to add.
RE: [WSG] Style PRE with word wrap?
designer Surely, the fact that pre denotes 'preformatting' means that the formatting has occurred 'somewhere else' and not in the body of the html. So, in that sense, in what way is pre 'presentational' any more than all CSS is 'presentational? Aeh...I'm not quite following your reasoning here. But to pick up just on the last bit: CSS is *meant* for presentation, while HTML should only mark up *content*. That's where I see the problem: pre denotes how something looks, rather than what it is (which is the whole idea of semantic markup). To take a simple example, if I set CSS rules in defining H1 characteristics, is using that h1 tag in the html 'purely presentational' or is it different to pre? You'd use h1 only if the text you're marking up is an actual heading (unless you use h1 to mark up oh, i want that text nice and big, in which case you're abusing h1 for presentational purposes). But to reiterate: h1 has semantic connotations - the content it marks up is a heading. pre, on the other hand, does not provide any indication of what's inside, only how it's displayed. Sometimes, pre strikes me just like a css declaration, except that you don't have to declare what the formatting is in the header :-) And that's a bad thing; we want separation of content and presentation. Patrick Patrick H. Lauke Webmaster / University of Salford http://www.salford.ac.uk ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Style PRE with word wrap?
Thanks for the discussion folks...
Actually, because I can't really find a way to get by on the word-wrap
issue and also the use of indents (as they appear in the code) I've
done all of this in php without code or pre. It uses nbsp;'s for the
tabs (preg_replace(/\t/...). Aside from creating a few more regex
rules to deal with inputting slashes and the like, it seems to work
well enough.
What I'm doing is meant purely for presentation...it's a fast way for a
person to view a script and try to determine where a bug might live
(via the line number).
If you are curious this is what an output looks like (I'm not sure if
the nbsp;'s will encode when I send this email). If there is time I
might add some simple syntax highlighting rules to the script...
strong1/strongnbsp;nbsp;nbsp;nbsp;nbsp;lt;?phpbr /
strong2/strongnbsp;nbsp;nbsp;nbsp;nbsp;br /
strong3/strongnbsp;nbsp;nbsp;nbsp;nbsp;function
rowNumber($i)br /
strong4/strongnbsp;nbsp;nbsp;nbsp;nbsp;{br /
strong5/strongnbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;
nbsp;if ($i lt; 10) {br /
strong6/strongnbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;
nbsp;nbsp;nbsp;nbsp;nbsp;return
quot;lt;stronggt;$ilt;/stronggt;amp;nbsp;amp;nbsp;amp;nbsp;
amp;nbsp;amp;nbsp;quot;;br /
strong7/strongnbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;
nbsp;} elseif (($i gt;= 10) amp;amp; ($i lt;= 999)) {br /
strong8/strongnbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;
nbsp;nbsp;nbsp;nbsp;nbsp;return
quot;lt;stronggt;$ilt;/stronggt;amp;nbsp;amp;nbsp;amp;nbsp;
amp;nbsp;quot;;br /
strong9/strongnbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;
nbsp;} else {br /
strong10/strongnbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;
nbsp;nbsp;nbsp;nbsp;return
quot;lt;stronggt;$ilt;/stronggt;amp;nbsp;amp;nbsp;amp;nbsp;
quot;;br /
strong11/strongnbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;}br
/
strong12/strongnbsp;nbsp;nbsp;nbsp;}br /
strong13/strongnbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;br
/
strong14/strongnbsp;nbsp;nbsp;nbsp;?gt;br /
On May 31, 2005, at 2:43 PM, Patrick Lauke wrote:
designer
Surely, the fact that pre denotes 'preformatting' means that the
formatting has occurred 'somewhere else' and not in the body
of the html.
So, in that sense, in what way is pre 'presentational' any
more than all
CSS is 'presentational?
Aeh...I'm not quite following your reasoning here. But to pick up
just on the last bit: CSS is *meant* for presentation, while HTML
should only mark up *content*. That's where I see the problem:
pre denotes how something looks, rather than what it is (which
is the whole idea of semantic markup).
To take a simple example, if I set
CSS rules in
defining H1 characteristics, is using that h1 tag in the
html 'purely
presentational' or is it different to pre?
You'd use h1 only if the text you're marking up is an actual
heading (unless you use h1 to mark up oh, i want that text nice
and big, in which case you're abusing h1 for presentational
purposes).
But to reiterate: h1 has semantic connotations - the content it
marks up is a heading. pre, on the other hand, does not provide
any indication of what's inside, only how it's displayed.
Sometimes, pre strikes me just like a css declaration,
except that you
don't have to declare what the formatting is in the header :-)
And that's a bad thing; we want separation of content and presentation.
Patrick
Patrick H. Lauke
Webmaster / University of Salford
http://www.salford.ac.uk
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
RE: [WSG] Style PRE with word wrap?
Vaska.WSG I've done all of this in php without code or pre. CODE is still the semantically correct element to wrap around this type of content, though... What I'm doing is meant purely for presentation...it's a fast way for a person to view a script and try to determine where a bug might live (via the line number). strong1/strongnbsp;nbsp;nbsp;nbsp;nbsp;lt;?phpbr / strong2/strongnbsp;nbsp;nbsp;nbsp;nbsp;br / strong3/strongnbsp;nbsp;nbsp;nbsp;nbsp;function rowNumber($i)br / Presentational, indeed...why not something like (provided your code always starts from line 1, as support for CSS driven OL numbering other than the default seems a bit flaky, still) ol linbsp;nbsp;nbsp;nbsp;nbsp;lt;?php/li linbsp;nbsp;nbsp;nbsp;nbsp;/li linbsp;nbsp;nbsp;nbsp;nbsp;function rowNumber($i)/li ... /ol or even (if we're a bit pedantic) ol licodenbsp;nbsp;nbsp;nbsp;nbsp;lt;?php/code/li licodenbsp;nbsp;nbsp;nbsp;nbsp;/code/li licodenbsp;nbsp;nbsp;nbsp;nbsp;function rowNumber($i)/code/li ... /ol Patrick Patrick H. Lauke Webmaster / University of Salford http://www.salford.ac.uk ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
RE: [WSG] Style PRE with word wrap?
From: Ben
After some testing, I think it's best to stick to using pre for
blocks of code. code won't preserve whitespace, so your code's
not going to have any indenting unless you use a lot of non-breaking
spaces which will inflate the size of your file and not to mention
a real be a pain in the butt to add.
How about using the code element (since it IS code), and using
the following styles:
code {
display: block;
white-space: pre;
}
In my very quick test just now it seems to work in Firefox and IE,
so I'd assume it works pretty much anywhere. This gets you the best
of both worlds - the semantics of code and the presentation of
pre.
--
Martin Lambert
[EMAIL PROTECTED]
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] Style PRE with word wrap?
Vaska.WSG schrieb:
Actually, because I can't really find a way to get by on the word-wrap
issue and also the use of indents (as they appear in the code) I've
done all of this in php without code or pre. It uses nbsp;'s for the
tabs (preg_replace(/\t/...).
...
If you are curious this is what an output looks like ...
strong1/strongnbsp;nbsp;nbsp;nbsp;nbsp;lt;?phpbr /
strong2/strongnbsp;nbsp;nbsp;nbsp;nbsp;br /
strong3/strongnbsp;nbsp;nbsp;nbsp;nbsp;function
rowNumber($i)br /
When you are using php, you can do this with
ol class=csshtml
li class=t01codelt;?php/code/li
li class=t02codefunction rowNumber($i)/code/li
...
/ol
and so on. I saw this on
http://www.456bereastreet.com/archive/200504/fixed_or_fluid_width_elastic/
and I think it makes much sense to put a source listing in a ol and
the tabulator as a class for li and the line code in code.
And it's flexible enough for indenting, hovering and so on. Now you can
style the classes and code for your needs.
For example, I don't use the line numbers for short code snippets in my
demo here:
http://www.satzansatz.de/cssd/forgottenbg.html
see what happens when the line wraps: the indention/tab takes effect.
( IMHO that's better than
pre { white-space: -moz-pre-wrap; white-space: pre-wrap;}
starts at the beginning of the line after a wrap)
Should be usable even when CSS is off.
Another way without php might be to leave the pre on the page
pre ... /pre
and to write a javascript injection routine for this to get
ol class=csshtml
li class=t01codelt;?php/code/li
...
/ol
automagically. Anyone sure can do this, might be practical for pages
with listings.
Ingo
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] Style PRE with word wrap?
I think this will do the trick. It's a little odd, and I'll have to
test this out more, doing a preg_match_all to determine how many \t's
there are (so we know what class='tab$number' to use), but I think in
most instances this will suffice.
Thanks for pointing this solution out...v
On May 31, 2005, at 4:41 PM, Ingo Chao wrote:
Vaska.WSG schrieb:
Actually, because I can't really find a way to get by on the
word-wrap issue and also the use of indents (as they appear in the
code) I've done all of this in php without code or pre. It uses
nbsp;'s for the tabs (preg_replace(/\t/...). ...
If you are curious this is what an output looks like ...
strong1/strongnbsp;nbsp;nbsp;nbsp;nbsp;lt;?phpbr /
strong2/strongnbsp;nbsp;nbsp;nbsp;nbsp;br /
strong3/strongnbsp;nbsp;nbsp;nbsp;nbsp;function
rowNumber($i)br /
When you are using php, you can do this with
ol class=csshtml
li class=t01codelt;?php/code/li
li class=t02codefunction rowNumber($i)/code/li
...
/ol
and so on. I saw this on
http://www.456bereastreet.com/archive/200504/
fixed_or_fluid_width_elastic/
and I think it makes much sense to put a source listing in a ol and
the tabulator as a class for li and the line code in code.
And it's flexible enough for indenting, hovering and so on. Now you
can style the classes and code for your needs.
For example, I don't use the line numbers for short code snippets in
my demo here:
http://www.satzansatz.de/cssd/forgottenbg.html
see what happens when the line wraps: the indention/tab takes effect.
( IMHO that's better than
pre { white-space: -moz-pre-wrap; white-space: pre-wrap;}
starts at the beginning of the line after a wrap)
Should be usable even when CSS is off.
Another way without php might be to leave the pre on the page
pre ... /pre
and to write a javascript injection routine for this to get
ol class=csshtml
li class=t01codelt;?php/code/li
...
/ol
automagically. Anyone sure can do this, might be practical for pages
with listings.
Ingo
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] Style PRE with word wrap?
Hi Patrick, - Original Message - From: Patrick Lauke [EMAIL PROTECTED] To: wsg@webstandardsgroup.org Sent: Tuesday, May 31, 2005 1:43 PM Subject: RE: [WSG] Style PRE with word wrap? But to reiterate: h1 has semantic connotations - the content it marks up is a heading. pre, on the other hand, does not provide any indication of what's inside, only how it's displayed. -- Yes, absolutely. BUT what I'm harping on about here is that if you set your basic font in the body (or somewhere up there :-) you could then use h1 in the html without qualifying it in any way with CSS, so long as you are happy with the way the browser displays it. (and it's not IE, of course!). You probably wouldn't do this, but it illustrates the point. The h1 says 'this is a heading' no more, no less, and the pre says 'this is some preformatted text', no more, no less. Neither really tells you 'exactly' what it's going to look like. OK, you 'expect' the h1 stuff to be larger (which it isn't always) and you 'expect' the pre to appear in Courier font with white space etc, but you personally haven't defined either. The 'formatting' is done elsewhere (in this case, by the browser's interpretation, NOT in the html markup, nor indeed in the CSS in this example. So I can't see the difference. OK, I'm not going to labour this or do it to death, but I can't grasp this. :-) Bob McClelland, Cornwall (U.K.) www.gwelanmor-internet.co.uk ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Style PRE with word wrap?
Vaska.WSG wrote: I've been reading around (via Google) and I find others with similar problems but no solution. Is there a solution to this? Whenever I present code in a page, I use something similar to the method Simon Willison put forward by in July 2002: http://development.incutio.com/simon/numbered-code-experiment.html Works for me. I've yet to find a better method (although if someone has one...) Cheers Lachlan ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Style PRE with word wrap?
Ahh, cool. Looks like the white-space property is supported well enough.
http://www.westciv.com/style_master/academy/browser_support/element_type.html
I'll go back to using code for code blocks then. :)
Thanks for pointing out the property, Martin.
BenOn 5/31/05, Martin J. Lambert [EMAIL PROTECTED] wrote:
From: Ben After some testing, I think it's best to stick to using pre for blocks of code. code won't preserve whitespace, so your code's not going to have any indenting unless you use a lot of non-breaking
spaces which will inflate the size of your file and not to mention a real be a pain in the butt to add.How about using the code element (since it IS code), and usingthe following styles:
code {display: block;white-space: pre;}In my very quick test just now it seems to work in Firefox and IE,so I'd assume it works pretty much anywhere. This gets you the best
of both worlds - the semantics of code and the presentation ofpre.--Martin Lambert[EMAIL PROTECTED]**
The discussion list forhttp://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help**
