image to left of text

AlanHK · 04-01-2015, 03:48 PM

I'd like to place a small or narrow and tall image on the left, with text on the right.

E.g. A title page, with a picture and the title next to it.
Another a list of brief biographies, with small mugshots.

I tried tables, that looked okay in Sigil's preview, but in Calibre the text in the 2nd cell aligned with the bottom of the image in the first

I guess this is not a new problem, but thinking of a search term to find it is beyond me.
Is there a solution? Aside from just rendering the whole page as an image.

RbnJrg · 04-01-2015, 04:24 PM

Float the image to the left. In your .css use something like:

Code:

.fl {
    float: left;
    margin-right: 10px;
}

and in your .xhtml file write:

Code:

<p><img class="fl" alt="" src="../Images/Your_Image_Here.jpg"/>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac tellus nunc. Phasellus imperdiet leo metus, et gravida lacus. Donec metus ligula, elementum at pellentesque pellentesque, suscipit ac nunc.</p>

Of course, your text will be different

Regards
Rubén

AlanHK · 04-03-2015, 10:44 PM

Quote:

Originally Posted by RbnJrg

Float the image to the left. I

Thanks. "Float" was the magic word.

I made this CSS:

img.mug {
width:25%;
float:left;
margin-right:1em;
}

br.cb { clear: both; }

This for "mugshots" next to one-para bios.
<br class="cb" /></p>
at the end of the para so the next one starts below the image of the first.

Notjohn · 04-04-2015, 06:14 AM

Nice! I'm going to try that.

AlanHK · 05-27-2015, 11:27 PM

And a related application;

making a cover/title page with a tall narrow image on the left:
used inline styles as it's only one page

Code:

<body>
  <div>
    <img alt="" src="../Images/image.jpg" style="width:50%; float:left; margin-right:0.1em;" />

    <h1 style="text-align:left">The Title<br />
    <br /></h1>

    <h3 style="text-align:left">An Author</h3>
  </div>
</body>

Turtle91 · 05-28-2015, 06:35 PM

Quote:

Originally Posted by AlanHK

<h1 style="text-align:left">The Title<br />
<br /></h1>

I've noticed this technique used before, and wondered if it was done for a reason that I'm not aware.

Why would you put a <br /><br /></h1> when you can just style the h1 with a margin-bottom:2em ?

AlanHK · 05-28-2015, 08:41 PM

Quote:

Originally Posted by Turtle91

I've noticed this technique used before, and wondered if it was done for a reason that I'm not aware.

Why would you put a <br /><br /></h1> when you can just style the h1 with a margin-bottom:2em ?

Because I use the H1 elsewhere and don't want the spacing there. Same reason I styled the heads "text-align:left"rather than doing that in CSS, so they are centred elsewhere.

Jellby · 05-29-2015, 03:23 AM

You should not use <h1> and <h3> for the title page. They are intended for hierarchical headings (chapters, sections...) not for "large, bold and centered".

Use:

Code:

<div class="title">The Title</div>

<div class="author">An Author</div>

and style them as you wish.

Quote:

Because I use the H1 elsewhere and don't want the spacing there.

Huh? Then why use style="text-align:left"? You could specify the bottom margin in the same way here, but as I said, don't use <h1>. The fact that you have to alter the style for this particular case, and skip <h2>, is an indication that that's not a good solution.

AlanHK · 05-29-2015, 04:21 AM

Quote:

Originally Posted by Jellby

You should not use <h1> and <h3> for the title page. They are intended for hierarchical headings (chapters, sections...) not for "large, bold and centered".

I think the title of a book is pretty high up the hierarchy of headings myself.
That's the reason it's "big and bold".

I don't like to just code everything as <p class="xyz">.

Marking them as H1 means they are correctly parsed as important by things like TOC generators.

I restyle them because I repeat the title on the next page, so they are the same except for alignment.

You have 6 levels of heading to use. The chapters can be H2. Or H4.
(As it happens, this book doesn't have any chapters.)
I'm not coding up legislation with 20 levels of headings.

If I was doing 50 pages or 50 books the same style, then I might code it as CSS.
But it isn't and I don't like to clutter up the CSS file with a lot of one-offs.

What matters is that it's simple, logical and it works.

Jellby · 05-29-2015, 04:44 AM

Quote:

Originally Posted by AlanHK

I think the title of a book is pretty high up the hierarchy of headings myself.

The title, maybe, the author not.

But it's so high that it shouldn't be there at all. When a TOC is automatically generated, it will typically be extracted from the headings, and that will result in everything nested under the book's title, which is completely unnecessary and I personally find it quite annoying.

Quote:

That's the reason it's "big and bold".

Fine, but then you shouldn't be using <h1> elsewhere. Is anything else the same level as the book's title? If you use <h1> for the title, use <h2> or lower for the chapters.

Quote:

And the code is used once on one page.

Still, using <br/> for whitespace is bad style. For one thing, you can't easily modify the amount of space (just by changing the number of <br/>), and if you want to change it, you have to change the content (HTML), rather than the formatting (CSS), which is where all style changes should be done. Another problem is that the <br/>s can be selected and copy-pasted, and they break across pages.

Quote:

If I was doing 50 pages or 50 books the same style, then I might code it as CSS.
But it isn't and I don't like to clutter up the CSS file with a lot of one-offs.

Yet you clutter the HTML with <br/> tags and "style" attributes. My method is to create a special CSS file for the title page, so I keep the styling of the main text and the title page separate to a large extent.

Anyway, it's your book and your decision, do what you like best. I just wanted to give some advice of what is widely considered as good styling practice, and I believe most experienced book creators would agree that it pays off in the long run.

AlanHK · 05-29-2015, 04:54 AM

Quote:

Originally Posted by Jellby

Fine, but then you shouldn't be using <h1> elsewhere. Is anything else the same level as the book's title?

Yeah. THE BOOK's TITLE which is repeated on the "Title page" following.
As I said.

Quote:

If you use <h1> for the title, use <h2> or lower for the chapters.

OF COURSE.
As I said.

Didn't you bother to read my post?

Quote:

Still, using <br/> for whitespace is bad style. For one thing, you can't easily modify the amount of space (just by changing the number of <br/>), and if you want to change it, you have to change the content (HTML), rather than the formatting (CSS), which is where all style changes should be done. Another problem is that the <br/>s can be selected and copy-pasted, and they break across pages.

In general, yes, br are dumb spacing.
I don't use them under repeated headings.

But there are no pagebreaks here, unless you have an absurdly tiny screen, when it will look like shit no matter how I code it.

Quote:

Yet you clutter the HTML with <br/> tags and "style" attributes. My method is to create a special CSS file for the title page, so I keep the styling of the main text and the title page separate to a large extent.

So you create a separate CSS file for one page?
For styles used once?

And that is "uncluttered?

Not in my book, in any sense.

Quote:

Originally Posted by Jellby

Anyway, it's your book and your decision, do what you like best. I just wanted to give some advice of what is widely considered as good styling practice, and I believe most experienced book creators would agree that it pays off in the long run.

"Widely considered"?
It's your opinion, that's all.

I've been in publishing for 25 years and coding HTML for almost as long.

So don't razz me about "experienced book creators".
I know how dirty and ad hoc the code most "experienced book creators" create is.

Turtle91 · 05-29-2015, 02:49 PM

Quote:

Originally Posted by AlanHK

Because I use the H1 elsewhere and don't want the spacing there. Same reason I styled the heads "text-align:left"rather than doing that in CSS, so they are centred elsewhere.

I see. Thanks.

I tend to use classes only when something is different from the default styling.
For example, I style the default <p> how I want it to appear 98% of the time, then put the <p class="xxx"> for the few that do something different.

I would use <h1> for the title for hierarchy (sorry Jellby

) so the auto TOC will pick it up, then I would have just used a <div> on the second page. In your example the title would be listed twice, and the author would be listed as a chapter in the auto TOC.

I just thought it was a strange way to get spacing after a header - and I've seen several books that do stuff like that - and wondered if it was done for some device/publisher compliance.

It drives me nuts when I see stuff like:

<p class="normalparagraph"><span><span class="x"><span class="y"><small><strong><span style="font-weight:normal"><span style="font-size:100%"><span style="font-family:"Times New Roman", Time, serif"> </span></span></span></strong></small></span></span></span></p>

AlanHK · 05-29-2015, 10:03 PM

Quote:

Originally Posted by Turtle91

I see. Thanks.

I tend to use classes only when something is different from the default styling.
For example, I style the default <p> how I want it to appear 98% of the time, then put the <p class="xxx"> for the few that do something different.

Of course.
My example was a cover, it's for one page with a specific image of unusual ratio.

Quote:

Originally Posted by Turtle91

I would use <h1> for the title for hierarchy (sorry Jellby

) so the auto TOC will pick it up, then I would have just used a <div> on the second page. In your example the title would be listed twice, and the author would be listed as a chapter in the auto TOC.

In the generated TOC, the titles are duplicated, but the links are different. The H3s aren't included at all, as I did it here.
So I just rename the first link in the TOC as "Cover".
Slightly simpler than adding a new entry from scratch.

Quote:

Originally Posted by Turtle91

I just thought it was a strange way to get spacing after a header - and I've seen several books that do stuff like that - and wondered if it was done for some device/publisher compliance.

I do it on the title page, one-off. If it's a kind of heading used throughout, like a chapter or subsection, then I use margins.

Quote:

It drives me nuts when I see stuff like:

<p class="normalparagraph"><span><span class="x"><span class="y"><small><strong><span style="font-weight:normal"><span style="font-size:100%"><span style="font-family:"Times New Roman", Time, serif"> </span></span></span></strong></small></span></span></span></p>

See: "Aspose.Words"
This converts Word to epub. Every single line of text has a bunch of nested styles, almost all duplicated.
No CSS at all.

example:

<p style="font-size:12pt; line-height:normal; margin-bottom:0pt"><span style="font-family:'Times New Roman', serif; font-size:12pt"> </span></p>

Strip it out and add a minimal CSS file and the book is reduced by 2/3 in size. And it's possible to read the code and deal with it sensibly.

But if you first put it through Calibre, it creates a million styles like your example and the code is even more incomprehensible.

When I get obsessive and want to clean up a file full of calibreXXX codes, I start tracking the style usage and often find a bunch of them are used once or a few times to style nbsp, and so can be deleted.

Anyway, how you code, is a matter of style, as long as it works, of course.

Styling each and every paragraph from scratch is one extreme. Doing absolutely everything by separate CSS files is another.
I lean more to CSS, but occasionally the formatting is specific to that text/page and I fnd it simpler if it's right there where the text is, so I can edit it in one window.

If later I find myself reusing a technique I might revisit it and generalise it to a CSS style.

Notjohn · 05-30-2015, 05:51 AM

Quote:

Originally Posted by AlanHK

See: "Aspose.Words"
This converts Word to epub. Every single line of text has a bunch of nested styles, almost all duplicated.
No CSS at all.

example:

<p style="font-size:12pt; line-height:normal; margin-bottom:0pt"><span style="font-family:'Times New Roman', serif; font-size:12pt"> </span></p>

Strip it out and add a minimal CSS file and the book is reduced by 2/3 in size. And it's possible to read the code and deal with it sensibly.

When the KDP (then the DTP) was unveiled in November 2007, I followed Amazon's suggestion to convert/export/save Word docs as html, and EVERY paragraph started like that. And stripping it out did shrink the book by half or more. But it was such a pain! There were always subtle differences, so I'd have to do the search/replace repeatedly.

I didn't know about CSS at that time, and I'm not even sure that a style sheet would have converted correctly on the K1.

In time, of course, I switched to epub (thank you, Hitch!) and never looked back.

dgatwood · 06-04-2015, 12:07 AM

This is where regular expressions come in handy, e.g.

sed 's/<p [^>]*>/<p>/g'

04-01-2015, 03:48 PM	#1
AlanHK Guru Posts: 681 Karma: 929286 Join Date: Apr 2014 Device: PW-3, iPad, Android phone	image to left of text I'd like to place a small or narrow and tall image on the left, with text on the right. E.g. A title page, with a picture and the title next to it. Another a list of brief biographies, with small mugshots. I tried tables, that looked okay in Sigil's preview, but in Calibre the text in the 2nd cell aligned with the bottom of the image in the first I guess this is not a new problem, but thinking of a search term to find it is beyond me. Is there a solution? Aside from just rendering the whole page as an image.

04-01-2015, 04:24 PM	#2
RbnJrg Wizard Posts: 1,764 Karma: 8700631 Join Date: Mar 2013 Location: Rosario - Santa Fe - Argentina Device: Kindle 4 NT	Float the image to the left. In your .css use something like: Code: .fl { float: left; margin-right: 10px; } and in your .xhtml file write: Code: <p><img class="fl" alt="" src="../Images/Your_Image_Here.jpg"/>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac tellus nunc. Phasellus imperdiet leo metus, et gravida lacus. Donec metus ligula, elementum at pellentesque pellentesque, suscipit ac nunc.</p> Of course, your text will be different Regards Rubén

05-27-2015, 11:27 PM	#5
AlanHK Guru Posts: 681 Karma: 929286 Join Date: Apr 2014 Device: PW-3, iPad, Android phone	And a related application; making a cover/title page with a tall narrow image on the left: used inline styles as it's only one page Code: <body> <div> <img alt="" src="../Images/image.jpg" style="width:50%; float:left; margin-right:0.1em;" /> <h1 style="text-align:left">The Title<br /> <br /></h1> <h3 style="text-align:left">An Author</h3> </div> </body>

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Left border for text within paragraph	democrite	ePub	7	09-19-2013 03:26 AM
Need text box to float left beside image	eggheadbooks1	ePub	35	06-06-2013 07:18 AM
Image overlayed over text (but text visible if image disabled)?	Kaylee Skylyn	ePub	5	08-01-2012 05:27 PM
Why is image left justified when I link to it?	steve2112	Kindle Developer's Corner	4	03-23-2012 02:53 AM
Can you left justify text with the 360?	maxbookworm	PocketBook	11	05-31-2010 10:49 AM

04-04-2015, 06:14 AM	#4
Notjohn mostly an observer Posts: 1,519 Karma: 987654 Join Date: Dec 2012 Device: Kindle	Nice! I'm going to try that.

06-04-2015, 12:07 AM	#15
dgatwood Curmudgeon Posts: 629 Karma: 1623086 Join Date: Jan 2012 Device: iPad, iPhone, Nook Simple Touch	This is where regular expressions come in handy, e.g. sed 's/<p [^>]*>/<p>/g'