How to create this element cross-compatible

[lumpynose]

Originally Posted by RbnJrg

That is not a solution for the present case; you can use .svg but not as svg wrapper but as a svg image.

Not surprising; I've never used svg and threw that out there not knowing if it would help or not.

[odedta]

Originally Posted by 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;
}

Attachment 171338

Below you can check the respective epub.

Regards
Rubén

Hey Ruben, the result of your code is attached.

Why does kindle add a background to a png file ://////////////

[RbnJrg]

Originally Posted by odedta

Hey Ruben, the result of your code is attached.

Why does kindle add a background to a png file ://////////////

If you posted a screenshoot of how things are displayed under Kindle, then sorry because I can't see it I opened your bird.png and indeed, it has an alpha channel and the background is transparent (in principle, that is not bad). Please, post again the screenshoot.

[Hitch]

Originally Posted by RbnJrg

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

Yup, it's fine for KF8/KFX, but of course, it's ixnay for the other, KF7. That will...lemme see...you'll either get a big mess, or it won't appear altogether. I would recommend a MQ making it hidden, for KF7, methinks.

Hitch