Register Guidelines E-Books Search Today's Posts Mark Forums Read

Go Back   MobileRead Forums > E-Book Formats > ePub

Notices

Reply
 
Thread Tools Search this Thread
Old 01-06-2011, 01:46 PM   #1
Toxaris
Wizard
Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.
 
Toxaris's Avatar
 
Posts: 4,520
Karma: 121692313
Join Date: Oct 2009
Location: Heemskerk, NL
Device: PRS-T1, Kobo Touch, Kobo Aura
A form-like layout

I have a form in a book, which I want to represent. An example is added to this post. The tough part is to have all lines the same length and have the form justified.
The form is just an example and part of the story. Now I have 'solved' it by using images, but I would rather do it in xhtml and css. I have tried tables, but could not get it to work the way I want. It has to resize rather reasonably when I change the font-size...

Are there any xhtml and css guru's that can help?
Attached Thumbnails
Click image for larger version

Name:	form1.jpg
Views:	211
Size:	22.9 KB
ID:	64231  
Toxaris is offline   Reply With Quote
Old 01-06-2011, 05:38 PM   #2
frabjous
Wizard
frabjous can solve quadratic equations while standing on his or her head reciting poetry in iambic pentameterfrabjous can solve quadratic equations while standing on his or her head reciting poetry in iambic pentameterfrabjous can solve quadratic equations while standing on his or her head reciting poetry in iambic pentameterfrabjous can solve quadratic equations while standing on his or her head reciting poetry in iambic pentameterfrabjous can solve quadratic equations while standing on his or her head reciting poetry in iambic pentameterfrabjous can solve quadratic equations while standing on his or her head reciting poetry in iambic pentameterfrabjous can solve quadratic equations while standing on his or her head reciting poetry in iambic pentameterfrabjous can solve quadratic equations while standing on his or her head reciting poetry in iambic pentameterfrabjous can solve quadratic equations while standing on his or her head reciting poetry in iambic pentameterfrabjous can solve quadratic equations while standing on his or her head reciting poetry in iambic pentameterfrabjous can solve quadratic equations while standing on his or her head reciting poetry in iambic pentameter
 
frabjous's Avatar
 
Posts: 1,213
Karma: 12890
Join Date: Feb 2009
Location: Amherst, Massachusetts, USA
Device: Sony PRS-505
The only thing that occurred to me would be to use tables within tables. This will give you a rough idea:

The CSS:
Code:
table {
    border-collapse: collapse;
}
td {
    white-space: nowrap;
    padding: 0px;
}
table.whole {
   width: 100%;
   margin: 0px;
}
table.half {
   width: 50%;
   display: inline-block;
}
table.quarter {
   width: 25%;
   display: inline-block;
}
td.fill {
   width: 100%;
   border-bottom: solid 2pt black;
}
The (X)HTML:
Code:
<table class="whole">
    <tr>
        <td>
            <table class="half"><tr>
               <td>Naam</td>
               <td class="fill"></td>
            </tr></table><!--
            --><table class="quarter"><tr>
               <td>Geslacht</td>
               <td class="fill"></td>
            </tr></table><!--
            --><table class="quarter"><tr>
               <td>Leeftijd</td>
               <td class="fill"></td>
            </tr></table>        
        </td>
    </tr>
    <tr>
        <td>
            <table class="whole"><tr>
                <td>Verlangd soort werk</td>
                <td class="fill"></td>
            </tr></table>
        </td>
    </tr>
    <tr>
        <td>
            <table class="whole"><tr>
                <td>Plaatselijk adres</td>
                <td class="fill"></td>
            </tr></table>
        </td>    
    </tr>
    <tr>
        <td>
            <table class="whole"><tr>
                <td>Geboorteplaats</td>
                <td class="fill"></td>
            </tr></table>
        </td>    
    </tr>
    <tr><td>&nbsp;</td></tr>
    <tr><td>Namen van de ouders:</td></tr>
    <tr>
        <td>
            <table class="half"><tr>
                <td>Vader</td>
                <td class="fill"></td>
            </tr></table><!--
            --><table class="half"><tr>
                <td>Adres</td>
                <td class="fill"></td>
            </tr></table>
        </td>
    </tr>
    <tr>
        <td>
            <table class="half"><tr>
                <td>Moeder</td>
                <td class="fill"></td>
            </tr></table><!--
            --><table class="half"><tr>
                <td>Adres</td>
                <td class="fill"></td>
            </tr></table>
        </td>
    </tr>
    <tr>
        <td>
            <table class="half"><tr>
                <td>Beroep van vader</td>
                <td class="fill"></td>
            </tr></table><!--
            --><table class="half"><tr>
                <td>Moeder</td>
                <td class="fill"></td>
            </tr></table>
        </td>
    </tr>
    <tr>
        <td>
            <table class="half"><tr>
                <td>Geboorteplaats vader</td>
                <td class="fill"></td>
            </tr></table><!--
            --><table class="half"><tr>
                <td>Moeder</td>
                <td class="fill"></td>
            </tr></table>
        </td>
    </tr>
</table>
Here's how it looks in Firefox:



I haven't tested that in any ebook reader, and it's rather hack-ish all around. Perhaps someone will have a better idea.
Attached Thumbnails
Click image for larger version

Name:	form.png
Views:	392
Size:	68.0 KB
ID:	64271  
frabjous is offline   Reply With Quote
Advert
Old 01-07-2011, 03:08 AM   #3
Toxaris
Wizard
Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.
 
Toxaris's Avatar
 
Posts: 4,520
Karma: 121692313
Join Date: Oct 2009
Location: Heemskerk, NL
Device: PRS-T1, Kobo Touch, Kobo Aura
Looks good... but only in Firefox. In Chrome it looks strange with fields overlapping each other and Sigil does the same or displays it just below each other. Strange, because the code used looks ok to me.
What I also find strange, is that if I remove the comment tags the layout is changed.

I will look futher, but if someone has an idea...

Ah, apparently nested tables are not supported...

Last edited by Toxaris; 01-07-2011 at 03:12 AM.
Toxaris is offline   Reply With Quote
Old 01-07-2011, 02:27 PM   #4
frabjous
Wizard
frabjous can solve quadratic equations while standing on his or her head reciting poetry in iambic pentameterfrabjous can solve quadratic equations while standing on his or her head reciting poetry in iambic pentameterfrabjous can solve quadratic equations while standing on his or her head reciting poetry in iambic pentameterfrabjous can solve quadratic equations while standing on his or her head reciting poetry in iambic pentameterfrabjous can solve quadratic equations while standing on his or her head reciting poetry in iambic pentameterfrabjous can solve quadratic equations while standing on his or her head reciting poetry in iambic pentameterfrabjous can solve quadratic equations while standing on his or her head reciting poetry in iambic pentameterfrabjous can solve quadratic equations while standing on his or her head reciting poetry in iambic pentameterfrabjous can solve quadratic equations while standing on his or her head reciting poetry in iambic pentameterfrabjous can solve quadratic equations while standing on his or her head reciting poetry in iambic pentameterfrabjous can solve quadratic equations while standing on his or her head reciting poetry in iambic pentameter
 
frabjous's Avatar
 
Posts: 1,213
Karma: 12890
Join Date: Feb 2009
Location: Amherst, Massachusetts, USA
Device: Sony PRS-505
Sorry I should have tested it on a Webkit browser.

It seems to work OK (at least in Chromium 10) if you use constant amounts for whole, half and quarter. For example:

Code:
table {
    border-collapse: collapse;
}
td {
    white-space: nowrap;
    padding: 0px;
}
table.whole {
   width: 480px;
   margin: 0px;
}
table.half {
   width: 240px;
   display: inline-block;
}
table.quarter {
   width: 120px;
   display: inline-block;
}
td.fill {
   width: 100%;
   border-bottom: solid 2pt black;
}
Adjust to taste. Unfortunately, that does put some limits on what's possible with regard to font size changes, but I think it should cover all reasonable changes.

I don't have Sigil installed, so I can't test it there.

It would be good to avoid nested tables if possible (though they are quite common on the web). I'll try to think of an alternative, just in case this doesn't work.

(Edit: Oh, yeah, and the comments are there to avoid the line breaks being taken as while space if rendered as HTML rather than XHTML. There's probably an "official" workaround for that, but I'm just making things up as I go, y'know....)

Last edited by frabjous; 01-07-2011 at 03:03 PM.
frabjous is offline   Reply With Quote
Old 01-07-2011, 05:20 PM   #5
Toxaris
Wizard
Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.
 
Toxaris's Avatar
 
Posts: 4,520
Karma: 121692313
Join Date: Oct 2009
Location: Heemskerk, NL
Device: PRS-T1, Kobo Touch, Kobo Aura
I can work with this! Much better than an image to use... Thanks!
Toxaris is offline   Reply With Quote
Advert
Old 01-07-2011, 10:34 PM   #6
frabjous
Wizard
frabjous can solve quadratic equations while standing on his or her head reciting poetry in iambic pentameterfrabjous can solve quadratic equations while standing on his or her head reciting poetry in iambic pentameterfrabjous can solve quadratic equations while standing on his or her head reciting poetry in iambic pentameterfrabjous can solve quadratic equations while standing on his or her head reciting poetry in iambic pentameterfrabjous can solve quadratic equations while standing on his or her head reciting poetry in iambic pentameterfrabjous can solve quadratic equations while standing on his or her head reciting poetry in iambic pentameterfrabjous can solve quadratic equations while standing on his or her head reciting poetry in iambic pentameterfrabjous can solve quadratic equations while standing on his or her head reciting poetry in iambic pentameterfrabjous can solve quadratic equations while standing on his or her head reciting poetry in iambic pentameterfrabjous can solve quadratic equations while standing on his or her head reciting poetry in iambic pentameterfrabjous can solve quadratic equations while standing on his or her head reciting poetry in iambic pentameter
 
frabjous's Avatar
 
Posts: 1,213
Karma: 12890
Join Date: Feb 2009
Location: Amherst, Massachusetts, USA
Device: Sony PRS-505
It occurred to me that the inner tables seem to be doing all the work here, and that it would probable be fine to remove the outer table and replace its rows with divs. And that seems to work just fine, even with using percentage widths, rather than absolute widths, and it removes the need for nested tables. I tested in Firefox, Chromium and Opera. What do you think?

The CSS:
Code:
 
div.formrow {
    width: 100%;
    margin: 0px;
    padding: 0px;
}
table {
    border-collapse: collapse;
}
td {
    white-space: nowrap;
    padding: 0px;
}
table.whole {
   width: 100%;
   margin: 0px;
}
table.half {
   width: 50%;
   display: inline-block;
}
table.quarter {
   width: 25%;
   display: inline-block;
}
td.fill {
   width: 100%;
   border-bottom: solid 2pt black;
}
The (X)HTML:
Code:
<div class="formrow">
    <table class="half"><tr>
       <td>Naam</td>
       <td class="fill"></td>
    </tr></table><!--
    --><table class="quarter"><tr>
       <td>Geslacht</td>
       <td class="fill"></td>
    </tr></table><!--
    --><table class="quarter"><tr>
       <td>Leeftijd</td>
       <td class="fill"></td>
    </tr></table>        
</div>
<div class="formrow">
    <table class="whole"><tr>
        <td>Verlangd soort werk</td>
        <td class="fill"></td>
    </tr></table>
</div>
<div class="formrow">
    <table class="whole"><tr>
        <td>Plaatselijk adres</td>
        <td class="fill"></td>
    </tr></table>
</div>
<div class="formrow">
    <table class="whole"><tr>
        <td>Geboorteplaats</td>
        <td class="fill"></td>
    </tr></table>
</div>
<div class="formrow"><td>&nbsp;</div>
<div class="formrow">Namen van de ouders:</div>
<div class="formrow">
    <table class="half"><tr>
        <td>Vader</td>
        <td class="fill"></td>
    </tr></table><!--
    --><table class="half"><tr>
        <td>Adres</td>
        <td class="fill"></td>
    </tr></table>
</div>
<div class="formrow">
    <table class="half"><tr>
        <td>Moeder</td>
        <td class="fill"></td>
    </tr></table><!--
    --><table class="half"><tr>
        <td>Adres</td>
        <td class="fill"></td>
    </tr></table>
</div>
<div class="formrow">
    <table class="half"><tr>
        <td>Beroep van vader</td>
        <td class="fill"></td>
    </tr></table><!--
    --><table class="half"><tr>
        <td>Moeder</td>
        <td class="fill"></td>
    </tr></table>
</div>
<div class="formrow">
    <table class="half"><tr>
        <td>Geboorteplaats vader</td>
        <td class="fill"></td>
    </tr></table><!--
    --><table class="half"><tr>
        <td>Moeder</td>
        <td class="fill"></td>
    </tr></table>
</div>
frabjous is offline   Reply With Quote
Old 01-08-2011, 07:25 AM   #7
Toxaris
Wizard
Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.
 
Toxaris's Avatar
 
Posts: 4,520
Karma: 121692313
Join Date: Oct 2009
Location: Heemskerk, NL
Device: PRS-T1, Kobo Touch, Kobo Aura
I will test it later today or tomorrow. It looks promising though!
Toxaris is offline   Reply With Quote
Reply

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
layout questions Morrile Calibre 5 12-21-2010 12:08 PM
Restoring the old layout Ross Smith Calibre 9 06-24-2010 02:01 PM
Appalling layout StanByk PDF 27 05-09-2009 02:46 PM
Layout format? Seligman Sony Reader Dev Corner 9 06-19-2008 05:29 AM


All times are GMT -4. The time now is 05:56 AM.


MobileRead.com is a privately owned, operated and funded community.