Forum Moderators: not2easy
Here is a visual of what I am after:
<snip>
I had a recurring background image to my P tags so that it was lined. But the problem with this is that although I set my font size as "12px" or whatever, users may have other overriding settings in their browser. If the font size is, say, 18px in the user's private settings, then my lining image doesn't align with the text anymore, it looks like all text is stricken out.
I hope I am explaining this correctly.
My question: how can I make sure that each sentence in my P tag is followed by equidistant lines, in a manner than the lines space themselves according to the size of the font?
Thanks for any ideas!
[edited by: swa66 at 1:50 pm (utc) on Feb. 22, 2009]
[edit reason] No personal URLs allowed, please see ToS [/edit]
- you could try to force your text height, but in the end the user always can win (which is a good thing)
- If you could split it up in lines of the right length (by far not easy), than a bottom border might help
Tangor, are you suggesting that every sentence be a TD in a table?
There might be a use for the "note ruled" look, but I've never been fond of it on any page I've visited which had it... in fact, I generally TURN OFF any page enhancements and just read the text.
but in the end the user always can win (which is a good thing)
Could not disagree more with either point, but they can do what they want with a page. It's fine with me. Two can play that game. I design my sites for my own reasons and I come first. If the user 'improves' the page with any of the endless tools available, fine. If they break it, ...
.................
Don't really understand the problem here though. What am I missing? The desired effect described can be coded any of a number of ways and they WILL scale with zoom. If the user breaks the design by forcing a declaration with a user style that is not compatible with another style, or some such, it's not on me. I mean, this question is simple stuff and nothing about it is 'forcing' the user. They, like I do, can strip out elements, or restyle a page with a few keystrokes, a couple of mouse gestured...there is no end to the weapons that each side has:))
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>
</title>
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
.text {
font: 300 1.1em/1.7em Verdana, Arial, sans-serif;
vertical-align: .3em;/*Firefox useful, but no harm in Opera, IE*/
color: #000;
}
.lined {
padding: 0 3em;
font-weight: 900;
text-decoration: underline;
color: red;
text-align: justify;
}
</style>
</head>
<body>
<p class="lined">
<span class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce lectus ante, dignissim nec, iaculis id, bibendum a, nisi. Nulla non augue. Nulla facilisi. Nullam in pede. Phasellus mollis ipsum vitae ante. Mauris arcu odio, vestibulum ut, vestibulum ac, consequat ut, tortor. Cras vitae nisi eget enim aliquet congue. Maecenas sit amet sem. Praesent bibendum. Donec accumsan vehicula orci. Suspendisse condimentum, eros ac sollicitudin varius, lacus lacus lacinia nisl, non mollis nisl nunc in ipsum. Mauris dapibus. Curabitur condimentum consectetur libero. Vestibulum turpis. Proin ut quam. Fusce leo diam, porta id, egestas ac, sollicitudin non, purus. Nunc felis.
</span>
</p>
</body>
</html>
[edited by: swa66 at 11:27 am (utc) on Feb. 24, 2009]
[edit reason] language [/edit]
I have a "ruled paper" background image I use in an 'interior' container DIV over which I display a roster (for one thing.) I don't know where I got it -- 'twas quite a few years ago.
It's yellow notebook style with the usual vertical margin line on the left, 1015x26 pixels, and has a single metal spiral on the left which repeats nicely. Any of those three 'features' could easily be corrected in an image processing program -- if need be.
The lines of text do _not_ display properly on a ruled-line-by-ruled-line basis. It just appears as though someone cranked a sheet of paper torn from a Big Chief Indian tablet (anyone remember that?) into their Remington and typed away.
Maybe something like that?
Of course, since personal URLs are verboten, and I cannot drop the image into _this_ DIV...
I agree with you as far as users playing around with styling. I never understood why that was something to be encouraged, or a virtue of user-agents that enable it to happen easily.
At the time I was really thinking more of trying to determine what the OP is trying to achieve and the options. (Have used the same technique to break text from an image to the left and never gave it a thought in this thread.)
Another example that the options we have are limited only be our open-mindedness and understanding that there is very little that we cannot make happen.
But as someone pointed out, using the text-decoration has one problem: the text needs to be justified so that the lines look the same length.
Is there a way around this?
Must admit that I was surprised to see the reference. tangor obviously has a print background.
but in the end the user always can win (which is a good thing)
Could not disagree more with either point, ...
CSS3 (future, I know) will have the ability to scale a background image:
[w3.org...]
Seems it's implemented already in opera and webkit (safari, chrome) using vendor specific tags: -o-background-size and -webkit-background-size .
tangor obviously has a print background
He does, but had a dyslexic moment...meant rag right instead of left as d_blackwell was quick to notice. And since it is noticed I do have a print background do take into consideration my comment that the web is NOT print and all that pretty stuff that printers can do in a FIXED MEDIUM can we all agree it just does not apply to the web?
The BEST you can do is use ems AND trust to the zoom factors most browsers use these days. FIXED POINTS is passe... it won't work (as we would like) with background images ZOOMED. Worse, it won't work with browsers where the user has defined their MINIMUM FONT SIZE.
LESS IS MORE.
Always has been.
And I still don't like BACKGROUND IMAGES ON MY TEXT AND TURN IT OFF with the handy FF page style: NO STYLE if the page is obnoxious... and too damn many of them are.
Only solution here seems to be "text-align: justify". It might work in some cases, but I want the text to be left aligned as customary in reading situations.
left aligned as customary in reading situations.
That answer has been suggested (table, sentences in cells, a real P.I.T.A). Strongly suggest a re-think on that design to something more WEB than PRINT. (colored div, sidebar, italics, different font, etc etc etc)
Print and web people can learn from each other but they are, as pointed out - oil and water. I wouldn't let a print person anywhere near my files:)) I know enough about print to hire out the heavy lifting:))
This is my search:
[google.com...]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>untitled</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
#notepad {
background-image: url('2.jpg');
-o-background-size: auto 1.2em; /* opera */
-webkit-background-size: auto 1.2em; /* safari & chrome */
background-size: auto 1.2em; /* CSS3 */
}
#notepad p {
line-height: 1.2em;
}
</style>
</head>
<body>
<div id="notepad">
<p>Hello World!</p>
<p>This is a long line , long enough to actually wrap
around if you make the viewport small enough</p>
<p>Bye World!</p>
</div>
</body>
</html>
image: one line any width will do, be ready that it gets scaled about in the browser.
