Table Alternative?

[bdub]

I am attempting to create an ePub. I moved the text into a Word DOCX and did some formatting there, and then I converted it to an ePub in Calibre. Now, I'm making some adjustments to the bits that aren't working as expected.

And I'm stuck on one bit. The rest I should be good to sort out.

What's the best way to reformat this part, so that the bits line up like in the printed text without it being in a table?

<table class="table_">
<tbody class="calibre4"><tr class="tr_">
<td class="td_"><p class="block_10">☊</p></td>
<td class="td_"><p class="block_10">☋</p></td>
</tr>
<tr class="tr_">
<td class="td_"><p class="block_3">Y'AI 'NG'NGAH, </p></td>
<td class="td_"><p class="block_3">OGTHROD AI'F </p></td>
</tr>
<tr class="tr_">
<td class="td_"><p class="block_11">YOG-SOTHOTH </p></td>
<td class="td_"><p class="block_3">GEB'L—EE'H </p></td>
</tr>
<tr class="tr_">
<td class="td_"><p class="block_3">H'EE—L'GEB </p></td>
<td class="td_"><p class="block_11">YOG-SOTHOTH </p></td>
</tr>
<tr class="tr_">
<td class="td_"><p class="block_3">F'AI THRODOG </p></td>
<td class="td_"><p class="block_3">'NGAH'NG AI'Y </p></td>
</tr>
<tr class="tr_">
<td class="td_"><p class="block_11">UAAAH </p></td>
<td class="td_"><p class="block_11">ZHRO </p></td>
</tr>
</tbody></table>

I haven't renamed and redid the CSS yet, so the current definitions for block_11 and block_ 3 are:

.block_3 {
display: block;
line-height: 1.2;
margin: 0;
padding: 0;
text-indent: 1.5em;
text-align: justify;
}

.block_11 {
display: block;
font-style: italic;
line-height: 1.2;
margin: 0 0 8pt;
padding: 0;
}

The italics is wrong as well as the justify.

This is from this section of the book. The author died over 70 years ago, so this should be in public domain.

https://en.wikisource.org/wiki/Page%...-_1971.pdf/101

Thanks.

[Karellen]

That looks like a simple centre.

<p class="centre">Y'AI 'NG'NGAH,</p>
<p class="centre">OGTHROD AI'F </p>


.centre {
text-align: center;
text-indent: 0;
}

[DNSB]

I made a few changes to the CSS since much of it was missing and other parts didn't make sense.

Spoiler:

  <table class="table_">
    <tbody class="calibre4">
      <tr class="tr_">
        <td class="td_"><p>☊</p></td>

        <td class="td_"><p>☋</p></td>
      </tr>

      <tr class="tr_">
        <td class="td_"><p>Y'AI 'NG'NGAH,</p></td>

        <td class="td_"><p>OGTHROD AI'F</p></td>
      </tr>

      <tr class="tr_">
        <td class="td_"><p class="italic">YOG-SOTHOTH</p></td>

        <td class="td_"><p>GEB'L—EE'H</p></td>
      </tr>

      <tr class="tr_">
        <td class="td_"><p>H'EE—L'GEB</p></td>

        <td class="td_"><p class="italic">YOG-SOTHOTH</p></td>
      </tr>

      <tr class="tr_">
        <td class="td_"><p>F'AI THRODOG</p></td>

        <td class="td_"><p>'NGAH'NG AI'Y</p></td>
      </tr>

      <tr class="tr_">
        <td class="td_"><p class="italic">UAAAH</p></td>

        <td class="td_"><p class="italic">ZHRO</p></td>
      </tr>
    </tbody>
  </table>

and here is the modified CSS:

Spoiler:

table {
  width: 60%;
  margin-left: auto;
  margin-right: auto;
  table-layout: fixed;
}

td {
  vertical-align: baseline;
}

th {
heigth: 1.5em;
  width: 35%;
}

.td_ {
text-align: center;
}

.italic {
  font-style: italic;
}

I didn't bother with adding table_ and tr_ to the CSS since this was just a quick and dirty test.

[Karellen]

Hmm, just looked at the wikipedia example again, wondering how I completely misunderstood the OP, but it is now pointing to a different page with two centred columns.

I guess that is why the post has been edited.

[enuddleyarbl]

I'd recommend deleting all those <p></p> pairs inside the <td></td> elements and moving any classes modifying those <p></p> pairs into the <td></td>. Having <p></p> within <td></td> always seems to mess up formatting for me (particularly line spacing).

    <table class="table_">
    <tbody class="calibre4">
      <tr class="tr_">
        <td class="td_">☊</td>

        <td class="td_">☋</td>
      </tr>

      <tr class="tr_">
        <td class="td_">Y'AI 'NG'NGAH,</td>

        <td class="td_">OGTHROD AI'F</td>
      </tr>

      <tr class="tr_">
        <td class="td_ italic">YOG-SOTHOTH</td>

        <td class="td_">GEB'L—EE'H</td>
      </tr>

      <tr class="tr_">
        <td class="td_">H'EE—L'GEB</td>

        <td class="td_ italic">YOG-SOTHOTH</td>
      </tr>

      <tr class="tr_">
        <td class="td_">F'AI THRODOG</td>

        <td class="td_">'NGAH'NG AI'Y</td>
      </tr>

      <tr class="tr_">
        <td class="td_ italic">UAAAH</td>

        <td class="td_ italic">ZHRO</td>
      </tr>
    </tbody>
  </table>

[RbnJrg]

If you don't want to use a table, there's the option (and in this case, I'd say it's preferable) of a two-column layout based on the "display: inline-block" property. A quick solution could be the following:

XHTML Code:

  <div class="wrapper">
    <div class="column">
      <p>☊</p>
      <p>Y'AI 'NG'NGAH,</p>
      <p><i>YOG-SOTHOTH</i></p>
      <p>H'EE—L'GEB</p>
      <p>F'AI THRODOG</p>
      <p><i>UAAAH</i></p>
    </div>

    <div class="column">
      <p>☋</p>
      <p>OGTHROD AI'F</p>
      <p>GEB'L—EE'H</p>
      <p><i>YOG-SOTHOTH</i></p>
      <p>'NGAH'NG AI'Y</p>
      <p><i>ZHRO</i></p>
    </div>
  </div>

CSS Code:

  .wrapper {
    text-align: center;
    width: 100%;
  }

  .column {
    display: inline-block;
    width: 40%;
    text-align: center;
    vertical-align: top;
  }

  .column p {
    margin: 0;
    text-indent: 0;
  }

Of course, the above code can be improved since I didn't take optimization into account here, but rather to give the idea of ​​how the "display: inline-block" property (the basis of the entire design) should be used to achieve the desired effect.

[bdub]

Originally Posted by Karellen

Hmm, just looked at the wikipedia example again, wondering how I completely misunderstood the OP, but it is now pointing to a different page with two centred columns.

I guess that is why the post has been edited.

I had a bad copy and paste that I didn't catch until after I had posted.

[bdub]

Originally Posted by RbnJrg

If you don't want to use a table, there's the option (and in this case, I'd say it's preferable) of a two-column layout based on the "display: inline-block" property. A quick solution could be the following:

XHTML Code:

  <div class="wrapper">
    <div class="column">
      <p>☊</p>
      <p>Y'AI 'NG'NGAH,</p>
      <p><i>YOG-SOTHOTH</i></p>
      <p>H'EE—L'GEB</p>
      <p>F'AI THRODOG</p>
      <p><i>UAAAH</i></p>
    </div>

    <div class="column">
      <p>☋</p>
      <p>OGTHROD AI'F</p>
      <p>GEB'L—EE'H</p>
      <p><i>YOG-SOTHOTH</i></p>
      <p>'NGAH'NG AI'Y</p>
      <p><i>ZHRO</i></p>
    </div>
  </div>

CSS Code:

  .wrapper {
    text-align: center;
    width: 100%;
  }

  .column {
    display: inline-block;
    width: 40%;
    text-align: center;
    vertical-align: top;
  }

  .column p {
    margin: 0;
    text-indent: 0;
  }

Of course, the above code can be improved since I didn't take optimization into account here, but rather to give the idea of ​​how the "display: inline-block" property (the basis of the entire design) should be used to achieve the desired effect.

This approach is rendering what I'd like to see in the preview in Calibre. I did reduced the width in .column to 20%.

I asked for a non-table version because I've had issues with tables rendering on my KOBO.

I'm still cleaning up the CSS and formatting, but I should be able test out this approach this weekend on my KOBO.

I do need to better understand what inline block actually does, so I'll dig in more this weekend.

What do you mean by optimization here?

Thanks everyone else for the other suggestions too.

[RbnJrg]

Originally Posted by bdub

What do you mean by optimization here?

"Pseudo tables" based on the property "display: inline-block" are ok if the table "rows" are not so many, as in this case, where you have only 6 "rows". If your tables are as in your example, then the code I posted is almost already optimized. The problems arise when the table has many rows; in that case, and since the property "display: inline-block" will avoid the split of the table, it's very very probable that you will have to deal with "fragmentations" (that is, blank spaces undesired). To avoid that, and to allow "splitting", you need a more elaborated, optimized xhtml code, for example:

  <div class="wrapper">
    <div class="column">
      <p>☊</p>
      <p>Y'AI 'NG'NGAH,</p>
      <p><i>YOG-SOTHOTH</i></p>
    </div>

    <div class="column">
      <p>☋</p>
      <p>OGTHROD AI'F</p>
      <p>GEB'L—EE'H</p>
    </div>

    <div class="column">
      <p>H'EE—L'GEB</p>
      <p>F'AI THRODOG</p>
      <p><i>UAAAH</i></p>
    </div>

    <div class="column">
      <p><i>YOG-SOTHOTH</i></p>
      <p>'NGAH'NG AI'Y</p>
      <p><i>ZHRO</i></p>
    </div>
  </div>

That "table" looks the same as the previous one, BUT in this case, the splitting between "rows" is allowed and no blank space is generated if, for example, the table is rendered at the end of a page. And the code would be even more optimized if the first division included only two rows instead of three, as in the above example.