How to reproduce this old formatting?

[Ghitulescu]

See the attachment.

The text flows normally, there are side notes, but the tables and figures get the full width.

Additionally the bottom2top direction.

Tables do not work nice on some eReaders, so I am thinking of some sort of floating boxes.

Any ideas?

PS: for ePub2.

PS2: I also have to take into account the relative small size of the screen.

[HarryT]

Personally I'd include the table as a graphic. It's often the best way to do such things.

[Ghitulescu]

That was an idea I also thought, however that requires a good sense of appreciating the display possibilities of the eReaders.

But the question was double - one referred to the side notes (see the upper right corner of the image), and the other one referred to the vertical writing.

At least one of them I would like to have solved.

[RbnJrg]

The best way is to employ a svg table. Do the following:

1. Make your table as you wish in EXCEL.
2. Once the table is finished, save the spreadsheet AS PDF. This is very important since is the key to have a perfect svg table.
3. Open Inkscape and open the .pdf you got in the previous step. Inkscape will show you the "Pdf Import Settings" dialog. There, in the "Import settings" field, set the value to 130 (VERY IMPORTANT). After that, press the OK buttom.
4. Now the table will be in Inkscape as a svg object. Do click on the table to select it, and after that select the menu "File" and the command "Document properties..."
5. In the dialog that appears, select the option "Resize page to content", press the buttom "Resize page to drawing or selection" and after that press the buttom "Close".
6. Finally, save the Inkscape file (with the table) as PLAIN SVG.

That's all. Now you have to use that svg table in an ebook in the same way as any other image.

Below I attach an epub with a simple svg table so you can watch how it looks.

Regards

NOTE: In the step 2, save the pdf with the highest quality that you are able. Of that way the svg table will result perfect.

[Jellby]

Sometimes the information in the table can be presented in some other way. For instance, you could just repeat the column headings as a list, so this:

First Name | Last Name | Nationality | Occupation
-----------+-----------+-------------+--------------
Charles    | Dickens   | British     | Writer
Roger      | Federer   | Swiss       | Tennis player
-----------+-----------+-------------+--------------

becomes this:

First Name: Charles
Last Name: Dickens
Nationality: British
Occupation: Writer

First Name: Roger
Last Name: Federer
Nationality: Swiss
Occupation: Tennis player

Not as nice as a table, maybe, but at least the information is there, readable and searchable.

[Tex2002ans]

Originally Posted by Ghitulescu

The text flows normally, there are side notes, but the tables and figures get the full width.

Side Notes were most recently brought up in this topic here:

https://www.mobileread.com/forums/sho...d.php?t=254785

I posted some code/examples/images that I used way back when (the code is crummy and needs some work, but it is most of the way there). This was using CSS + floating text.

I would recommend against using them in ebooks, unless the words are extremely short, and/or the Side Notes are used very sparingly. Remember, the user can raise the font HUGE.

Originally Posted by Ghitulescu

Tables do not work nice on some eReaders, so I am thinking of some sort of floating boxes.

Tables... we have had LOTS of conversations about Tables over the years (whether to do them HTML/SVG/Bitmap (PNG/JPG)). The pros/cons of all three were discussed at length.

Here is the go to topic on HTML Tables I always point towards:

https://www.mobileread.com/forums/sho...d.php?t=223062

SVG Tables were discussed here:

https://www.mobileread.com/forums/sho...d.php?t=240980

I personally still side on the pure HTML side, and if needed, "vericalizing" the tables into ~3-4 column length data. :P

If you are going bitmap... for the love of the gods DO NOT use JPG.

Originally Posted by Jellby

[...]

Not as nice as a table, maybe, but at least the information is there, readable and searchable.

That might also be an ok fallback, but it all depends on the data. I would most likely take a "verticalized" table over the purely plain text method. :P

[Ghitulescu]

Thank you all for the valuable comments and suggestions.

I already started reading the stuff

[Ghitulescu]

I decided to play a bit with transform: rotate (parameter) in a div.
Calibre displays it partially correct (at least the rotation is accepted), while no HW readers could do it.

So I completed the CSS with

.rotate {
  display:inline-block;
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
  -webkit-transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  transform: rotate(270deg);
}

and used the

<div class="rotate">

in <TH>.

That's the result.

As you can see, the text is strangely grouped and split in many lines although the space given would have accommodated it in full.

Nevertheless, I'll abandon this as having no support in the normal HW eReaders. I'll try the SVG stuff next.

Thanks for attention.

[Ghitulescu]

I have found a working solution. It does not replicate 100% the original page setting, but I consider it to be fully satisfactory, given the small displays a Reader has.

span.floatleft {
	font-size: 70%;
	font-weight: bold;
	padding-bottom: 0px;
	padding-top: 3px;
	padding-left: 0px;
	padding-right: 10px;
	width: 25%;
	float: left;
	text-indent: 0;
}

and similar for floatright.

Unfortunately, again no full HW support, none of my readers could display it as it should. In calibre's own previewer, everything is la vie en rose.

What am I doing wrong?

[HarryT]

Originally Posted by Ghitulescu

What am I doing wrong?

You're not doing anything wrong: welcome to the wonderful world of ePub, where each different rendering engine supports different features. Webkit, which is what Calibre uses, supports a different set of features to those supported by Adobe's RMSDK, which is what most eInk devices use.

[RbnJrg]

Originally Posted by Ghitulescu

What am I doing wrong?

Your code is ok but if you want the things work under most ereaders, then don't use <span> but <p> tags. Of this way:

1. In your .css stylesheet:

p {
   text-align: justify;
   margin: 0;
}

.SideNote {
   float: left;
   width: 25%;
   font-size: 0.7em;
   font-weight: bold;
   text-indent: 0;
   text-align: left;
   margin: 5px 10px 3px 0;
}

2. In your .xhtml file use:

  <p class="SideNote">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

  <p>Nulla ac tellus nunc. Phasellus imperdiet leo metus, et gravida lacus. Donec metus ligula, elementum at pellentesque pellentesque, suscipit ac nunc. Etiam lobortis, massa ac aliquam auctor, augue nisl sagittis urna, at dapibus tellus erat ullamcorper ligula. Praesent orci dui, pulvinar id convallis a, faucibus non mauris. Donec tellus augue, tempus sed facilisis sed, fringilla quis leo.</p>

In ADE, these are the results:



Below I attach the respective .epub

Regards
Rubén

[GrannyGrump]

Another suggestion you might try (it works for me in some situations) --- try adding display: block to your span descriptors. This forces the span to display as a stand-alone block, almost like a separate paragraph.

[Ghitulescu]

Maybe because I used inline-block? I'll try simply block.
I also tried DIV and SPAN and none worked. On some readers the text is placed before the main text (like it would have been no tags), on others the text was displayed as a different paragraph, above.
I'll try the suggestions.
SideNote.ePub works on my Sony PRS-T3, but no on my Sony Z3 with fbreader. Since FBreader does not yet support tables, I think I have to search for another eReader for Android.

[RbnJrg]

Originally Posted by Ghitulescu

SideNote.ePub works on my Sony PRS-T3, but no on my Sony Z3 with fbreader. Since FBreader does not yet support tables, I think I have to search for another eReader for Android.

Don't use FBReader; instead, install PocketBook Reader; there you'll be able to read SideNote.epub without troubles.

[SBT]

Originally Posted by RbnJrg

The best way is to employ a svg table. Do the following:

1. Make your table as you wish in EXCEL.
.....
4. Now the table will be in Inkscape as a svg object. Do click on the table to select it, and after that select the menu "File" and the command "Document properties..."
5. In the dialog that appears, select the option "Resize page to content", press the buttom "Resize page to drawing or selection" and after that press the buttom "Close".
6. Finally, save the Inkscape file (with the table) as PLAIN SVG.
...
Regards

Just an extra tip re. RbnJrg's method: I notice that sometimes table frames are cropped on one or more sides. Therefore I always a 1px margin all around in the "Resize page to content" dialogue window.