View Single Post
Old 11-26-2010, 07:17 PM   #2
jgray
Fanatic
jgray ought to be getting tired of karma fortunes by now.jgray ought to be getting tired of karma fortunes by now.jgray ought to be getting tired of karma fortunes by now.jgray ought to be getting tired of karma fortunes by now.jgray ought to be getting tired of karma fortunes by now.jgray ought to be getting tired of karma fortunes by now.jgray ought to be getting tired of karma fortunes by now.jgray ought to be getting tired of karma fortunes by now.jgray ought to be getting tired of karma fortunes by now.jgray ought to be getting tired of karma fortunes by now.jgray ought to be getting tired of karma fortunes by now.
 
Posts: 554
Karma: 2928497
Join Date: Mar 2008
Device: Clara 2E & Sage
Since your picture didn't make it, I can't tell exactly what format you need. However, you can simulate tab stops in CSS/XHTML using "margin-left".

In your CSS, define the needed pseudo-tab stops:
Code:
.indent1 { margin-left: 5em; }
.indent2 { margin-left: 10em; }
In your XHTML, use span tags:
Code:
<p>Some text<span class="indent1">indented text</span><span class="indent1">another indent</span><span class="indent2">and another indent</span></p>
You may have to try using pixels, points or percentages instead of ems. See what works best on different size screens at different font sizes. Don't assume a specific screen size and font size. Of course, depending on how long each line is, things will wrap sooner or later. You can't avoid this with a reflowable format.

For one example of this technique, see how I used it to format some poetry: http://www.zianet.com/jgray/nessmuk/..._runes/19.html. There are other ways to accomplish the same thing. CSS is fairly flexible.

Edit: I was going from memory and it wasn't "text-indent", but "margin-left" that gives the desired result. With spans, the margin is counted from the end of the previous text.

Edit: See a better method below.

Joe

Last edited by jgray; 11-26-2010 at 09:51 PM.
jgray is offline   Reply With Quote