How to create this element cross-compatible

[odedta]

Hello

I want to create the element attached (Screenshot_2.jpg). AFAIK there are no :before or :after pseudo-selectors in ePub3 so I would have to use an <img> instead of content: "" and absolute positioning is not well supported.

Here is the HTML:

<div class="align-center">

    <img class="bird" src="../images/bird.png" alt="bird" style="left: 41%;"/>

    <h1 class="heading-bird" id="toc_1">Preface</h1>

  </div>

Here is the CSS:

.bird {
  display: block;
  position: relative;
  left: 38%;
  top: 9px;
  margin-left: -3px;
  width: 40px;
}
h1.heading-bird {
  position: relative;
  display: inline-block;
  margin: 0 auto;
  background-color: #4D4D4F;
  color: white;
  padding: 10px;
  border-radius: 25px;
  margin-top: 0px;
  margin-bottom: 40px;
}

It looks good on iPad and Android, however, when I upload to KDP, the bird looks like a small dot. (Screenshot_3.jpg).

Any idea how to get this to work?

*I have uploaded the bird image as well for testing purposes

Thanks!

[KevinH]

Perhaps the dot is simply the leftmost bit of tail feather? So the bird is positioned properly but covered by the Preface background. Try making the background of the Preface transparent and not white.

Alternatively fire up the Gimp or any other image editors and create one new merged image.

[odedta]

Hey Kevin,

The background of the word Preface is not white, it's the same color as the bird. In addition, that background size is determined by the element's property so I don't see why the bird is covered up assuming that dot is the trail.
I prefer to use an HTML/CSS solution if possible.

Thank you!

[KevinH]

If the dot is the entire bird image scaled down, have you tried providing a specific height property for the bird image. Does that impact anything for KDP?

[odedta]

It didn't :/

[KevinH]

I set this up in Sigil and had to add a "align-center" class to the stylesheet and ran the new WebEngine Inspector on the image and it did not like the css .bird left percentage as it was overridden in the xhtml img tag style attribute which takes precedence. It was not an error just overridden.

I had to tweak the 38% down to 35% to make the bird just touch the heading but other than that it seems to work well on WebKit/WebEngine based viewers such as Sigil and calibre.

I can see no reason why this would not work in a Mobi 8 (.azw3). Would an svg solution be possible/acceptable? Is the KDP for old mobi or newer?

[odedta]

Thanks for trying to help Kevin, I actually decided to remove all the inline styling and place the bird in the center, the new CSS I use is this:

.bird {
display: block;
position: relative;
margin: 10px auto -8px auto;
width: 40px;
height: 42px;
}

It does look good in Calibre, iPad and Android which is weird that it doesn't look good on the KDP Previewer. I don't have an SVG, only the PNG, I could convert though, I will try that and let you know.

Thanks again!

[KevinH]

I ran my testing.epub of your original query through KindlePreviewer3.0 latest available from Amazon, and it seemed to ignore the left on the .bird image and put in in the centre but other than that, all worked.

Not sure why KDP is giving you such an issue when KindlePreviewer seems to be happy with it.

Sorry I can't be more help.

[jhowell]

I put the code from the first post into an EPUB and ran it though kindlegen. It produced this warning:

Warning(htmlprocessor):W28003: Value specified for CSS property in content is not supported by Kindle readers. Please refer Kindle Publishing Guidelines about usage of property: 'position: relative' in file: ...

[RbnJrg]

The following code seems to work fine with epub3:

  <h2 class="bird"><img class="birdy" alt="bird" src="../Images/bird.png"/>Preface</h2>

  <p>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. 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. Mauris vulputate, leo ac facilisis vulputate, enim orci interdum augue, in blandit quam turpis quis dui. Morbi dictum luctus velit nec faucibus. Cras vitae tortor purus, ut tincidunt mauris. Sed at velit nisl. Donec eu mauris tortor, interdum condimentum erat. Nam egestas turpis eget nibh laoreet pharetra. Suspendisse a sem eros, ut pulvinar enim. In sed elit eu nulla accumsan tincidunt eget sit amet ipsum. Nullam ut massa rutrum dolor placerat tempor accumsan eget purus.</p>

and:

p {
     text-align: justify;
}

.bird {
     width: 40%;
     margin: 2em auto;
     padding: 20px;
     background: #4D4D4F;
     color: white;
     border-radius: 70px;
     text-align: left;
     text-indent: 0;
     font-style: italic;
     font-weight: bold;
     font-family: serif;
     font-size: 50px;
}

.birdy {
     float: left;
     height: 74px;
     width: 71px;
     margin-top: -73px;
     margin-left: -25px;
}

Below you can check the respective epub.

Regards
Rubén

[RbnJrg]

Originally Posted by odedta

It looks good on iPad and Android, however, when I upload to KDP, the bird looks like a small dot. (Screenshot_3.jpg).

Any idea how to get this to work?

You need to set a "width" and "height" for the bird, specially if you are going to use a pseudo-element (in this case, ::before). Kindle (.kf8/.KFX formats, is ok Hitch? ) supports pseudo-element, so you can use it (if you wish).

In that case, you'll need to use something like:

.bird::before {
     display: block;
     content: url("../Images/bird.png");
     position: relative;
     width: your_width_here; 
     height: your_height_here;
     top: ?;  /* try to locate the best top */
     left: ?; /* idem above */
}

Regards
Rubén

[lumpynose]

For the svg, maybe you can use this, the "or even more advanced":

https://www.mobileread.com/forums/sh...40&postcount=2

[RbnJrg]

Originally Posted by lumpynose

For the svg, maybe you can use this, the "or even more advanced":

With that aproximation, the picture will full the page and the OP wants it as a heading. That is not a solution for the present case; you can use .svg but not as svg wrapper but as a svg image. But, why to use a .svg image if under epub3 is possible to get that effect by pure css2/css3 (besides my aproximation above, that uses "float", you would be able to use a pseudo-element ::before, or also a "grid")? In this post:

https://www.mobileread.com/forums/sh...21&postcount=3

you can watch similar effects.

[DiapDealer]

Keep in mind that the OP was asking for a cross-platform (one-size fits all) solution. Not two different solutions.

[RbnJrg]

Originally Posted by DiapDealer

Keep in mind that the OP was asking for a cross-platform (one-size fits all) solution. Not two different solutions.

Right! But also the OP speaks about epub3 (in epub2 we can't get boxes with round corners). Round corners under epub2 only by means of images. Are we under epub3? If so, then above there is a solution (for ADE). The OP can use media queries to write minor changes to adapt the code to Kindle (.kf8/.KFX).