CSS trick for url popups solved

[ni_c]

This works with epub and mobi/azw formats (in Calibre and Kindle - not other ereaders that can read those formats) and its only tested on the windows version of those programs, not on any standalone devices

With the following tweaks, can add a url address popup when hovering on wrapped links at the bottom left of the screen, the same way webpages have a status panel to show urls when hovering on links, and works in both single and double page mode:

<a id="ebook" href="http://example.com">example</a>
+
#ebook {
position:relative }
#ebook:hover:after {
content: " " attr(href) "";
display:block;
position:fixed;
bottom:0px;
left:0px;
color:#000;
max-width:500pt;
text-align:justify;
word-wrap:break-word;
background:#DBD7BD;
border:1px solid #777;
padding:0px 5px 2px 5px }
=


(btw see post #6 for an alternate approach)

Another option is to use popups as notes, and also use the css equivalent or <br> which is just \a

<a id="ebooknote">example note</a>
+
#ebooknote {
position:relative }
#eboonote:hover:after {
white-space: pre-wrap; /* adding this is needed to use \a */
content: "And in the rows going across, from left to right, and in each row: the first row, the numbers are 4, 9 and 2, and in the second row, the numbers are 3, 5 and 7, and in the third row, the numbers are 8, 1 and 6. Whether you add them up diagonally, vertically or horizontally, no matter in which direction you go, it always adds up to the number 15.] \a \a The predominantly dark blue rectangle which occupies most of the middle tier of the mural, the upper side which passes through the exact middle of the small bisected sphere, represents the altar. The yellow rectangle set at an angle into the lower and middle tiers so that one corner touches the bottom of the mural is a second representation of the altar. They indicate [ladies and gentlemen] duality ";
display:block;
position:fixed;
bottom:0px;
left:0px;
color:#000;
max-width:300pt; /*example screenshot uses this width*/
text-align:justify;
word-wrap:break-word;
background:#DBD7BD;
border:1px solid #777;
padding:0px 5px 2px 5px }
=


and can also have multiple content rules like

content: " blablabla \a "attr(href)" \a blablabla" ;
OR
content: " blablabla \a "url(image.jpg)" \a blablabla " ;
OR
content: " " attr(href) "\a " url(image.jpg) " ";
OR
content: " " attr(href) "\a " url(image.jpg) "\a " url(image2.jpg) " ";
OR
content: " " url(image.jpg) " blablabla \a " url(image2.jpg) " blablabla \a "attr(href) " ";

Unfortunately cant have content fetch images like it fetches attr(href), so need unique rules. A few suggestions to that end:
1. specify urls twice with id="" AND alt="" to have the bulk handled by one and content by the other
2. give the unique content important tags, so other urls can keep using generic content
3. add the unique content to the htm/html to keep the stylesheet uncluttered

SO in the htm/html would have

<a id="ebook" alt="ebook1" href="http://www.example1.com">example1</a>
<a id="ebook" alt="ebook2" href="http://www.example2.com">example2</a>
<a id="ebook" href="http://www.example3.com">example3</a>
<style>
a[alt="ebook1"]:hover:after {content: "" url(image1.jpg) "\a " attr(href) " " !important}
a[alt="ebook2"]:hover:after {content: "" url(image2.jpg) "\a " attr(href) " " !important}
</style>
+
#ebook {
position:relative }
#ebook:hover:after {
content: " " attr(href) " ";
display:block;
position:fixed;
bottom:0px;
left:0px;
color:#000;
word-wrap:break-word;
background:#DBD7BD;
border:1px solid #777 }

For ebook1 & ebook2 links, will show the url in the bottom left, along with an image directly above it, while the third link will just show the url

[eschwartz]

I think most ereader devices and apps aren't meant to use hovering. I challenge you to get that working on my E-Ink Kindle...

[ni_c]

ok, i dont own any ereaders, so cant test how it works on anything but a windows version of calibre reader and the kindle equivalent. Does your e-ink kindle have a custom browser with connectivity to open links in, or is it one of those greyscale low power deals intended just for text? Guessing the latter so it wouldnt matter as much if raw links are viewable or not for you

[eschwartz]

There is a builtin "experimental" browser. But the reader software is custom stuff written by Amazon.

Such is not uncommon amongst avid readers with their E-Ink devices. Just be aware that what you are trying to do won't work everywhere.

[ni_c]

bump

finished tinkering with the code, enjoy

[ni_c]

Um lol, just discovered the increadibly simple alternative to my method in the OP, not that mines useless, but the alternatives just FAR simpler and should be the default method when adding urls to non-pdf ebooks. Its simply using the title feature

so for a normal wrapped url like
<a href="http://www.example.com">example</a>

just add the same url as a title like
<a href="http://www.example.com" title="http://www.example.com">example</a>

Also for the purpose of cross compatibility, pdf links can act as notes too, same as the title feature, but using the href, and the only requirement is they start with a letter or letters (certain symbols like a dash - are ok too) and be capped before any blank spaces with a colon :

eg the following will show the same note in both pdfs and other ebooks

<a href="-: important instructions on blinking" title="important instructions on blinking">message popup</a>

and the pdf requirement for it starting with a character + colon can be masked using the method "note: blablabla"

[jbacelar]

Originally Posted by ni_c

Um lol, just discovered the increadibly simple alternative to my method in the OP, not that mines useless, but the alternatives just FAR simpler and should be the default method when adding urls to non-pdf ebooks. Its simply using the title feature

eg the following will show the same note in both pdfs and other ebooks

<a href="-: important instructions on blinking" title="important instructions on blinking">message popup</a>

In ADE (2.0 y 4.0), with epub, not work.

[ni_c]

Have you tried the OP example too? should only require css support for hover, so if ADE allows to change text color on hover, the statuspanel tooltip should work too

and fwiw the statuspanel tooltip/popup is cleaner than the title equivalent, particularly with long urls like

<a href="http://www.example.com/a_b_c_d_e_f_g_h_i_j_k_l_m_n_o_p_q_r_s_t_u_v_w_x_y_ z_a_b_c_d_e_f_g_h_i_j_k_l_m_n_o_p_q_r_s_t_u_v_w_x_ y_z_a_b_c_d_e_f_g_h_i_j_k_l_m_n_o_p_q_r_s_t_u_v_w_ x_y_z" title="http://www.example.com/a_b_c_d_e_f_g_h_i_j_k_l_m_n_o_p_q_r_s_t_u_v_w_x_y_ z_a_b_c_d_e_f_g_h_i_j_k_l_m_n_o_p_q_r_s_t_u_v_w_x_ y_z_a_b_c_d_e_f_g_h_i_j_k_l_m_n_o_p_q_r_s_t_u_v_w_ x_y_z">example</a>
vs
<a href="http://www.example.com/a_b_c_d_e_f_g_h_i_j_k_l_m_n_o_p_q_r_s_t_u_v_w_x_y_ z_a_b_c_d_e_f_g_h_i_j_k_l_m_n_o_p_q_r_s_t_u_v_w_x_ y_z_a_b_c_d_e_f_g_h_i_j_k_l_m_n_o_p_q_r_s_t_u_v_w_ x_y_z" id="ww">example</a>

[ni_c]

fwiw, since jbacelar mentioned that have installed ADE, and goto say its one dodgy ereader, sure it can view both epub and pdfs, and its setup to purchase and borrow books thru it, but its highly stripped down on all other fronts

doesnt support before/after psuedo tags, OR title tags (so neither trick works) nor does it have its own popup system either.

and barely supports wrapped urls anyway, developing MAJOR formatting issues if present, like disappearing whole chapters sortof thing, crazy behavior

also doesnt support custom backgrounds, but DOES support the :hover tag so might do some other psuedos aswell, but I wont be testing ADE any further, will only use it for purchasing and borrowing, certainly not for custom content, or really as an ereader at all, sorry to say

[Divingduck]

That is the reason, why a lot of ebook creators use ADE for a final test of EPUB 2.x files (eschwartz mentioned this point above). This engine is, what you will find in nearly 90% of reader implementations and everything what won't work for ADE won't work for most of EPUB-Readers too.

[ni_c]

thanks Divingduck, good to know, will check any future ebooks ill be publishing for compatibility with it then