Layout for grammar examples

[Man Eating Duck]

Hi! I'm trying to adapt a spanish grammar book for epub publication. I've run into a challenge: language researchers have a specific way of presenting sentence analysis (see the examples in the attached picture, given with permission from the author), and these are giving me a real headache. This is pretty much an accepted standard in grammar books, and according to the author this layout can not be changed.

For paper publications this is solved by judiciously applying tab stops, for epub I don't know of a good solution that will not look awful on a variety of devices. As the source Word document contains more than 1000 examples a scriptable/grepable solution is the only thing that's realistic.

The approaches I've considered so far is:

- Rendering the examples as images

Slow, looks ugly, might be very awkward on smaller screens, and don't handle text resizing.

- Using a monospace font

Looks ugly, doesn't work on devices which don't support monospace/embeddable fonts

- SVG

Slow, limited device support

- Invisible tables

Does not seem to render consistently across devices, time consuming

I'm starting to think that epub is not a feasible format, but any suggestions would be welcome

[jgray]

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:

.indent1 { margin-left: 5em; }
.indent2 { margin-left: 10em; }

In your XHTML, use span tags:

<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

[jgray]

Again, just guessing what you need... Also look at the dl and ul XHTML tags. These may be of use and will handle the indenting of wrapped text.

Joe

[jgray]

Forget my previous example. This example will give you absolute tab stops, relative to the left margin.

.indent1 { position:absolute; left:10em; }
.indent2 { position:absolute; left:20em; }

<p>Some text<span class="indent1">indented text</span><span class="indent2">another indent</span></p>
<p>Another line of text<span class="indent1">more indented text</span><span class="indent2">another indent</span></p>
<p>Even more text<span class="indent1">even more indented text</span><span class="indent2">another indent</span></p>

Joe

[Jellby]

Ideally (I think) you would use "display: inline-block" and set a fixed width to the element, but alas, inline-block is not in the current ePUB spec, although it might be supported by some reading systems.

In any case, you have to think a few times before formatting, because anything you use might break badly when the screen or font size changes.

[Man Eating Duck]

I don't know why the picture didn't upload, I think it's because I tarried quite a while between uploading and actually posting. You guys guessed correctly anyway, but here's a second try

Originally Posted by jgray

Forget my previous example. This example will give you absolute tab stops, relative to the left margin.
Joe

Thanks a lot! I'll try this. It might still be too much work in order to avoid a pdf, but I'll give it a try. Since we're talking about a large amount of different examples I think I'll do the css inline.

[jgray]

Attached is an HTML/CSS sample, using your picture for the text. I was too lazy do do the accented characters. This method works until you either exceed the line length of the reading device (word wrap doesn't work), or you use a font size that also forces things off screen.

I used two different methods to bold text. Use whichever one you like. Since I was using a class for underlining the column headings, it just made sense to do the same for bold in those span tags. I used ems, but you may want to see if another unit of measure works better under varying font and screen sizes.

I didn't try this code on my Sony reader, but see no reason it wouldn't work, provided you use a small enough font to fit the screen. The previously mentioned method of setting "margin-left" on the spans would work better for line wrapping, but things wouldn't line up as well. If anyone can think of an alternate method that handles large fonts and word wrap, please post. I suspect that getting columns to line up regardless of font size will not be possible.

Joe

[jgray]

Although what I just posted works fine in a web browser, it seems that ADE does not support the absolute positioning. Sony Reader Library (which I assume uses ADE) doesn't handle it either. So, the ADE based readers aren't going to work with this.

Next!

Joe

[Jellby]

Those samples would better be done with tables.