[opensuse] css issue - can't figure out how do wrap a <pre> code block without weird results
Listmates, Working with a page, I wanted to put a dashed border around some text to show that it was a command line. If I don't put a manual break in, I either get a scroll bar with 'overflow: auto' or the text just runs off the page. I want the text to look like this (I put a manual break in): http://www.3111skyline.com/download/screenshots/webdev/codeblock-manual-brea... If I remove the break and use 'overflow: auto', I get: http://www.3111skyline.com/download/screenshots/webdev/codeblock-no-break-au... If I remove the overflow, I get: http://www.3111skyline.com/download/screenshots/webdev/codeblock-no-break-no... The very simple css is: pre { font-size: 0.95em; padding: 1em; border: 1px dashed #5C6DEF; font-family: "DejaVu Sans Mono", "Cumberland AMT", sans-serif; color: black; background-color: #EAEAEA; line-height: 1.2em; overflow: auto; } I'm using the pre tag like this: <pre>hddtemp $(for i in $(cat /proc/partitions | egrep sd[abcdefgh]$ | sed -e 's/^.*s/s/'); do echo -n "/dev/$i "; done)</pre> So far I can only get it to work if I put a <br> in front of sed. What am I doing wrong? I see these code blocks all the time, and I know everybody isn't going to the trouble of putting in manual breaks. What's the trick? -- David C. Rankin, J.D.,P.E. | openSoftware und SystemEntwicklung Rankin Law Firm, PLLC | Countdown for openSuSE 11.1 www.rankinlawfirm.com | http://counter.opensuse.org/11.1/small -- To unsubscribe, e-mail: opensuse+unsubscribe@opensuse.org For additional commands, e-mail: opensuse+help@opensuse.org
David C. Rankin wrote:
Listmates,
Working with a page, I wanted to put a dashed border around some text to show that it was a command line. If I don't put a manual break in, I either get a scroll bar with 'overflow: auto' or the text just runs off the page.
I want the text to look like this (I put a manual break in):
http://www.3111skyline.com/download/screenshots/webdev/codeblock-manual-brea...
If I remove the break and use 'overflow: auto', I get:
http://www.3111skyline.com/download/screenshots/webdev/codeblock-no-break-au...
If I remove the overflow, I get:
http://www.3111skyline.com/download/screenshots/webdev/codeblock-no-break-no...
The very simple css is:
pre { font-size: 0.95em; padding: 1em; border: 1px dashed #5C6DEF; font-family: "DejaVu Sans Mono", "Cumberland AMT", sans-serif; color: black; background-color: #EAEAEA; line-height: 1.2em; overflow: auto; }
I'm using the pre tag like this:
<pre>hddtemp $(for i in $(cat /proc/partitions | egrep sd[abcdefgh]$ | sed -e 's/^.*s/s/'); do echo -n "/dev/$i "; done)</pre>
So far I can only get it to work if I put a <br> in front of sed. What am I doing wrong? I see these code blocks all the time, and I know everybody isn't going to the trouble of putting in manual breaks. What's the trick?
PS: I also tried replace the standard <pre> with <codeblock>, no help. I understand the pre=preformatted, but I just want to find a way to make it wrap regardless of the tag name. Thanks. -- David C. Rankin, J.D.,P.E. | openSoftware und SystemEntwicklung Rankin Law Firm, PLLC | Countdown for openSuSE 11.1 www.rankinlawfirm.com | http://counter.opensuse.org/11.1/small -- To unsubscribe, e-mail: opensuse+unsubscribe@opensuse.org For additional commands, e-mail: opensuse+help@opensuse.org
David C. Rankin wrote:
PS: I also tried replace the standard <pre> with <codeblock>, no help. I understand the pre=preformatted, but I just want to find a way to make it wrap regardless of the tag name. Thanks.
Sorry, forgot the link to show the wrap problem when not using <pre>: http://www.3111skyline.com/download/screenshots/webdev/codeblock-using-codeb... -- David C. Rankin, J.D.,P.E. | openSoftware und SystemEntwicklung Rankin Law Firm, PLLC | Countdown for openSuSE 11.1 www.rankinlawfirm.com | http://counter.opensuse.org/11.1/small -- To unsubscribe, e-mail: opensuse+unsubscribe@opensuse.org For additional commands, e-mail: opensuse+help@opensuse.org
David C. Rankin wrote:
David C. Rankin wrote:
PS: I also tried replace the standard <pre> with <codeblock>, no help. I understand the pre=preformatted, but I just want to find a way to make it wrap regardless of the tag name. Thanks.
Sorry, forgot the link to show the wrap problem when not using <pre>:
http://www.3111skyline.com/download/screenshots/webdev/codeblock-using-codeb...
Well, After looking further, it looks like I'm just stuck with <pre> and breaking the preformatted lines where I must. Doesn't seem that it would scale too well, but that's life. -- David C. Rankin, J.D.,P.E. | openSoftware und SystemEntwicklung Rankin Law Firm, PLLC | Countdown for openSuSE 11.1 www.rankinlawfirm.com | http://counter.opensuse.org/11.1/small -- To unsubscribe, e-mail: opensuse+unsubscribe@opensuse.org For additional commands, e-mail: opensuse+help@opensuse.org
----- Original Message -----
From: "David C. Rankin"
David C. Rankin wrote:
David C. Rankin wrote:
PS: I also tried replace the standard <pre> with <codeblock>, no help. I understand the pre=preformatted, but I just want to find a way to make it wrap regardless of the tag name. Thanks.
Sorry, forgot the link to show the wrap problem when not using <pre>:
http://www.3111skyline.com/download/screenshots/webdev/codeblock-using-codeb...
Well,
After looking further, it looks like I'm just stuck with <pre> and breaking the preformatted lines where I must. Doesn't seem that it would scale too well, but that's life.
That's not a limitation of pre, it's the entire point of pre. No wrapping or any other form of formatting. If you want the display device to format the content to fit the display, then you don't want pre. That's just what regular plain text and html already does, and pre is the exception for those times when you specifically need to remove all ambiguity and display the data without modifying it _at all_. If you want the code to stand out as code vs regular article text, then set a different font and other font attributes for that text. If you want the text to be in a fixed width font, then specify a fixed width font. (with the understanding that the browser may not have that font and will select the closest match, which may not be a fixed width font.) Or, use pre and just let the long lines scroll to the right. Depending on the content, there is nothing wrong with it scrolling to the right. In fact if it's code, using pre or code and allowing it to scroll to the right is exactly the best and most correct way because it's the most unambiguous possible display of the content, which for code is more important than aesthetics. -- Brian K. White brian@aljex.com http://www.myspace.com/KEYofR +++++[>+++[>+++++>+++++++<<-]<-]>>+.>.+++++.+++++++.-.[>+<---]>++. filePro BBx Linux SCO FreeBSD #callahans Satriani Filk! -- To unsubscribe, e-mail: opensuse+unsubscribe@opensuse.org For additional commands, e-mail: opensuse+help@opensuse.org
David C. Rankin wrote:
After looking further, it looks like I'm just stuck with <pre>...
For the reasons Brian gave, do what Jos said but with a minor change. Don't use id attributes, because those have to be unique and you want something you can apply to any of your code blocks. Use class attributes instead. And while it can be convenient to use div tags to hold those attributes, it's not necessary. So here's an example that works for me: <html> <head> <title>test of pre-like formatting</title> <style> .foobar { font-size: 0.95em; padding: 1em; border: 1px dashed #5C6DEF; font-family: "DejaVu Sans Mono", "Cumberland AMT", sans-serif; color: black; background-color: #EAEAEA; line-height: 1.2em; overflow: auto; } </style> <head> <body> <p> This is some ordinary text. </p> <p class="foobar"> This is some special text. This is some special text. This is some special text. This is some special text. This is some special text. This is some special text. </p>
