View Single Post
Old 12-02-2015, 03:29 PM   #199
RbnJrg
Wizard
RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.
 
Posts: 1,850
Karma: 8700631
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
Quote:
Originally Posted by Sarmat89 View Post
On the other hand, can you create a mirrored text for every reader out there? If you cannot create an effect, you should use images or PDF.
You can have text mirrored for ereaders that support the property "box-reflect". This is a css3 property so you need an epub3 reader (that is, Gitden, Readium, Azardi, ADE 4.x). Also you should be able to read text reflected on Kindle (devices that support .kf8) and iPad (I'm not sure about Kobo). For example with this code:

1. In the .css file:

Code:
.reflect2 {
    font-size:2.5em;
    -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom,  from(transparent), color-stop(25%, transparent), to(#FFFFFF));
    box-reflect: below 0px -webkit-gradient(linear, left top, left bottom,  from(transparent), color-stop(25%, transparent), to(#FFFFFF));
}
2. In the .xhtml file:

Code:
<h2 class="reflect2">Reflected Text</h2>
you'll have results as the following screenshoot of Sigil:

Click image for larger version

Name:	Image1.png
Views:	160
Size:	105.4 KB
ID:	144248

In ereaders that don't support css3, you can use SVG images to have text reflected. Of course, CoolReader is a bad epub lector, so you'll need a decent program.

If you want to know a bit more about reflections, read this page:

http://designshack.net/articles/css/...ons-in-webkit/

Last edited by RbnJrg; 12-02-2015 at 03:33 PM.
RbnJrg is online now   Reply With Quote