Image within a title: how to align?

[roger64]

Hi

It's a h title. For the time being, the image tag is within (maybe someone has a better solution).

I'd like to find a display that lower the Q on the joint image so as to fit the text of the title. I'm short on ideas (not an unusual situation )

[odedta]

Crop your image to have no white space at the bottom or right side, preferably on top and left sides as well, put the image tag before the text inside the <h> tags and give it a style of display:inline

e.g.:

<h1><img src="..Images/Image.jpeg" style="display:inline;"/>uelques mots...</h1>

[Jellby]

If you want to align the baselines of text and image, that's going to be tricky. I think I tried with "position:relative;bottom:-x", but it didn't work with inline elements (and besides, finding the right value for x would be mostly trial and error). It may be easier if both image and text are in an SVG wrapper. Something I didn't try is putting only the image in an SVG wrapper, such that it "overflows" the viewbox...

[RbnJrg]

Originally Posted by roger64

Hi

It's a h title. For the time being, the image tag is within (maybe someone has a better solution).

I'd like to find a display that lower the Q on the joint image so as to fit the text of the title. I'm short on ideas (not an unusual situation )

Please, post only the image of the "Q" and I think I can write something to get what you want (I hope to be right )

[roger64]

hi

Thanks for your replies. Here is the image. It's an old book so the quality is just so-so and it hardly could be made an SVG.

[Doonge]

vertical-align property, within the image tag.

http://www.w3schools.com/cssref/pr_p...ical-align.asp

[roger64]

Originally Posted by Doonge

vertical-align property, within the image tag.

Thank you. It's very easy this way with this code (seen with Calibre viewer):

<h2 id="toc1"><img alt="Image" src="../img-4.png" style="width:10%; vertical-align:-0.5em;"/>uelques mots…</h2>

I hope there are not any incompatibilities around.

[HarryT]

Surely you want your "alt" property to have the text "Q", don't you, not the word "Image"?

[Jellby]

Originally Posted by roger64

I hope there are not any incompatibilities around.

I wouldn't be surprised if it didn't work in ADE...

But if you are going to use ems as offset, you better use ems to scale your image too.

[RbnJrg]

Originally Posted by roger64

hi

Thanks for your replies. Here is the image. It's an old book so the quality is just so-so and it hardly could be made an SVG.

Hi Roger;

I found three methods to get what you want and all of them work in ADE

In the .css stylesheet I have:

h1 {
   font-size: 1.6em;
}

.base {
   width: 100px;
   height: auto;
}

.method1 {
   vertical-align: -15px;  /* VERTICAL ALIGN METHOD */
}

.method2 {
   margin-bottom: -15px;  /* MARGIN-BOTTOM METHOD */
}

.method3 {
   float: left; /* FLOAT METHOD */
}

.down1 {
   margin-top: 92px;
}

And in the .xhtml file:

  <h1><img alt="Q" class="base method1" src="../Images/Q.png" />uod erat demonstrandum - Method 1</h1>

  <h1><img alt="Q" class="base method2" src="../Images/Q.png" />uod erat demonstrandum - Method 2</h1>

  <p><img alt="Q" class="base method3" src="../Images/Q.png" /></p>

  <h1 class="down1">uod erat demonstrandum - Method 3</h1>

Here you can see a screenshot of my ADE:



It works with ANY ADE FONT SIZE Below you can check the respective epub.

Regards
Rubén

[roger64]

Hi

Thank you all for your comments and your kind help. I've settled on the "vertical-align" method but others methods are indeed very OK too. I will dutifully replace "image" in the Alt field with "Q", and express everything in em.

[Doonge]

Since the image has fixed dimensions, and considering what you want is adjusting the baseline of the Q image, you are better off using px not em for the image style. The dimension of your image is not em dependent.

Consider also additionnal styling in the case the image can't be rendered (and the alt text "Q" is used instead). You might want the "Q" text to be stylised more or less similarly to the image.

I'm not sure it is useful to set a width to the image? Or am I wrong and your image has a variable size and that's your aim?

[RbnJrg]

Originally Posted by roger64

Hi

Thank you all for your comments and your kind help. I've settled on the "vertical-align" method but others methods are indeed very OK too. I will dutifully replace "image" in the Alt field with "Q", and express everything in em.

Hi Roger;

I'm not sure that expressing all in "em" is the best choice in this case. As you could see, in my solutions I used "px" with image size and "px" with vertical-align, margin-bottom and float methods. In your solution, you expressed the image size as percentage (in this case, 10%). But doing of that way, the image size will be always 10% of the "screen width" (no matter the font-size) meanwhile the text, expressed in "em" will vary and I'm not sure that the "bottom align" will remain.

[RbnJrg]

Originally Posted by Doonge

Since the image has fixed dimensions, and considering what you want is adjusting the baseline of the Q image, you are better off using px not em for the image style. The dimension of your image is not em dependent.

Exactly! For that reason I used "px" in my aproximations.

[Jellby]

Originally Posted by Doonge

The dimension of your image is not em dependent.

Maybe it should be, or you can end up with a Q that's smaller that the text