MobileRead Forums - View Single Post - Calibre editor e-reader html statusbar popup with css

ni_cc · 03-14-2020, 08:41 AM

Update

Here are a few improvements on the code posted the other day and an extra standalone version only to show images.

Also to clarify the benefit of writing content notes directly in html, opposed to doing the same in css, a basic comparison of what to do is self explanatory. Supposing you have the base code installed, the difference is:

Code:

<i p1="..." p2="...">example</i> versus

<i note="example">example</i> 
+
<style>
[note="example"]:hover:before { 
content: "... \a\a ..." !important }
</style>

And if written in css, the attribute="target" also needs a unique names, so need a system worked out for that.

But there's two instances where you can't write notes in html so need to do them in css:

1) when wanting to link them to multiple objects.

2) Or when a html editor automatically applies 'break points'? to wrap all raw html text, causing content written in html to replicate the break point in the rendered note, something that occurs in Thunderbird using the "ThunderHTMLedit" addon, and while its technically possible to add   at the end of every break point, the editor will just add new ones. The silver lining is you can just write the css note in a new <style></style> wrapper as shown above, at the point in the document/email the contents to be linked, as theres no issue using multiple style wrappers.

Also as a disclaimer. I don't test this on many platforms, and not intending to tweak it to troubleshoot compatibility with e-readers that don't support most css psudo style rules, and its not been tested with android devices, but guessing since it relys on loading content on hover, probably doesn't work

The first version is to add images popups to html docs

Code:

[img="..."]:hover:after { background-image: url() }

[img] { position: relative }

*:not(a)[img]:not(:hover) { color: goldenrod }	

[img]:hover:after {
	content: "";
	bottom:4px; 
	left:4px;
	z-index:1;
	display:block; 
	position:fixed;
	background-size: cover;
	border:1px solid; 
	border-color: rgba(255,255,255,.5) rgba(200,200,200,.5) 
				  rgba(200,200,200,.5) rgba(255,255,255,.5);
    box-shadow: 4px 3px 1px rgba(0,0,0,.4), -1px -1px 1px rgba(0,0,0,.3),
                1px 1px 1px rgba(0,0,0,.3), -2px -2px 3px rgba(0,0,0,.15) }  	
		
.height1:hover:after { height: 20% }	
.height2:hover:after { height: 40% }
.height3:hover:after { height: 60% }
.height4:hover:after { height: 80% }
.height5:hover:after { height: 97% }
	
.width1:hover:after { width: 200px  } 
.width2:hover:after { width: 400px  } 
.width3:hover:after { width: 600px  } 
.width4:hover:after { width: 800px  } 
.width5:hover:after { width: 1000px } 
.width6:hover:after { width: 1200px } 
.width7:hover:after { width: 1400px } 
.width8:hover:after { width: 1600px } 
.width9:hover:after { width: 1800px }
.width10:hover:after{ width: 1900px } 

.TL:hover:after { background-position: top left      }
.TC:hover:after { background-position: top center    }
.TR:hover:after { background-position: top right     }
.CL:hover:after { background-position: center left   }
.CC:hover:after { background-position: center center }
.CR:hover:after { background-position: center right  }
.BL:hover:after { background-position: bottom left   }
.BC:hover:after { background-position: bottom center }
.BR:hover:after { background-position: bottom right  }

/* Images can be added with attribute="target" names like [img="..."] 
along with height, width (& optional) position values (which defaults to top left)
written in html like <i img="example.jpg" class="width4 height4 TC">example</i> 

Btw to use this with data images, the format needs to be url("data:image/....") with quotes inside the round brackets */

Second version is to add notes & images popups in html docs, without showing links

Code:

[p1],[p2],[p3],[p4],[p5],[img] {
	position: relative; 
	line-height: inherit }
	
[p1]:hover:after, [p2]:hover:after, 
[p3]:hover:after, [p4]:hover:after, 
[p5]:hover:after, [img]:hover:after {
	content: "";
	padding: 1pt 2pt;
	bottom: 4px; 
	left: 4px; 
	z-index: 1;
	display: block; 
	position:fixed;	
	max-width: 94%; 
	width:auto; 
	white-space: pre-wrap; 
	word-wrap: break-word; 	
	font: normal normal 0/1.1em segoe ui;   
	font-size: initial;		
	text-align: left;
	color: #000; 
    text-shadow: -1px -1px 1px rgba(255,255,255,.4), 1px 1px 1px rgba(100,100,100,.5);
    box-shadow: 4px 3px 1px rgba(0,0,0,.4), -1px -1px 1px rgba(0,0,0,.3),
                1px 1px 1px rgba(0,0,0,.3), -2px -2px 3px rgba(0,0,0,.15);	
	border: 1px solid; border-color: rgba(255,255,255,.5) 
	rgba(200,200,200,.5) rgba(200,200,200,.5) rgba(255,255,255,.5);}
		 	
[p1]:hover:after { content: ""attr(p1)"" !important }
[p2]:hover:after { content: ""attr(p1)"\a\a "attr(p2)"" !important }	
[p3]:hover:after { content: ""attr(p1)"\a\a "attr(p2)"\a\a "attr(p3)"" !important; }	
[p4]:hover:after { content: ""attr(p1)"\a\a "attr(p2)"\a\a "attr(p3)"\a\a "attr(p4)"" !important }	
[p5]:hover:after { content: ""attr(p1)"\a\a "attr(p2)"\a\a "attr(p3)"\a\a "attr(p4)"\a\a "attr(p5)"" !important } 
         	
*:not(a)[p1]:not(:hover), *:not(a)[p2]:not(:hover), 
*:not(a)[p3]:not(:hover), *:not(a)[p4]:not(:hover), 
*:not(a)[p5]:not(:hover),*:not(a)[img]:not(:hover) { 
  color: goldenrod }
  
.height1:hover:after { height: 20% }	
.height2:hover:after { height: 40% }
.height3:hover:after { height: 60% }
.height4:hover:after { height: 80% }
.height5:hover:after { height: 97% }
	
.width1:hover:after { width: 200px !important  } 
.width2:hover:after { width: 400px !important  } 
.width3:hover:after { width: 600px !important  } 
.width4:hover:after { width: 800px !important  } 
.width5:hover:after { width: 1000px !important } 
.width6:hover:after { width: 1200px !important } 
.width7:hover:after { width: 1400px !important } 
.width8:hover:after { width: 1600px !important } 
.width9:hover:after { width: 1800px !important }
.width10:hover:after{ width: 1900px !important } 

.TL:hover:after { background-position: top left      }
.TC:hover:after { background-position: top center    }
.TR:hover:after { background-position: top right     }
.CL:hover:after { background-position: center left   }
.CC:hover:after { background-position: center center }
.CR:hover:after { background-position: center right  }
.BL:hover:after { background-position: bottom left   }
.BC:hover:after { background-position: bottom center }
.BR:hover:after { background-position: bottom right  }

.white:hover:after { color: #e5e5e5 !important;
	text-shadow: -1px -1px 1px rgba(0,0,0,.5), 
	1px 1px 1px rgba(150,150,150,.6) !important } 
  
[p1]:hover:after, [p2]:hover:after, 
[p3]:hover:after, [p4]:hover:after, [p5]:hover:after,  
a:not([href^="#"]):not([href^="../"]):hover:after {	
	background: rgb(220,220,220) url(papertB.png) repeat fixed /*TEXTURE BACKGROUND */ }   
	    
[img="..."]:hover:after {
	background: url() !important	}
	
[img]:hover:after	{ 
	background-size: cover !important } 	

/* Images can be added with attribute="target" names like [img="..."] 
along with height, width (& optional) position values (which defaults to top left) & text color
written in html like <i img="example.jpg" class="width4 height4 TC">example</i> 
	
Also note, when using a texture background for the popups it conflicts with image bacgrounds, so need to 
keep important tags for images in place and leave the texture background without one.  

Btw to use this with data images, the format needs to be url("data:image/....") with quotes inside the round brackets  */

Third version is to add notes & images popups in html docs, and show links aswell.
Mainly intended for Calibre etal editors to restore link popups with e-books formats like epub.

Code:

[p1],[p2],[p3],[p4],[p5],[img],
a:not([href^="#"]):not([href^="../"]) {
	position: relative; 
	line-height: inherit }
	
[p1]:hover:after, [p2]:hover:after, 
[p3]:hover:after, [p4]:hover:after, 
[p5]:hover:after, [img]:hover:after, 
a:not([href^="#"]):not([href^="../"]):hover:after {
	content: ""attr(href)"";
	padding: 1pt 2pt;
	bottom: 4px; 
	left: 4px; 
	z-index: 1;
	display: block; 
	position:fixed;	
	max-width: 94%; 
	width:auto; 
	white-space: pre-wrap; 
	word-wrap: break-word; 	
	font: normal normal 0/1.1em segoe ui;   
	font-size: initial;		
	text-align: left;
	color: #000; 
    text-shadow: -1px -1px 1px rgba(255,255,255,.4), 1px 1px 1px rgba(100,100,100,.5);
    box-shadow: 4px 3px 1px rgba(0,0,0,.4), -1px -1px 1px rgba(0,0,0,.3),
                1px 1px 1px rgba(0,0,0,.3), -2px -2px 3px rgba(0,0,0,.15);	
	border: 1px solid; border-color: rgba(255,255,255,.5) 
	rgba(200,200,200,.5) rgba(200,200,200,.5) rgba(255,255,255,.5) }

		 
a[p1]:hover:after { content: ""attr(p1)"\a\a "attr(href)"" !important }	
a[p2]:hover:after { content: ""attr(p1)"\a\a "attr(p2)"\a\a "attr(href)"" !important }	
a[p3]:hover:after { content: ""attr(p1)"\a\a "attr(p2)"\a\a "attr(p3)"\a\a "attr(href)"" !important }	
a[p4]:hover:after { content: ""attr(p1)"\a\a "attr(p2)"\a\a "attr(p3)"\a\a "attr(p4)"\a\a "attr(href)"" !important }
a[p5]:hover:after { content: ""attr(p1)"\a\a "attr(p2)"\a\a "attr(p3)"\a\a "attr(p4)"\a\a "attr(p5)"\a\a "attr(href)"" !important }
	
*:not(a)[p1]:hover:after { content: ""attr(p1)"" !important }
*:not(a)[p2]:hover:after { content: ""attr(p1)"\a\a "attr(p2)"" !important }	
*:not(a)[p3]:hover:after { content: ""attr(p1)"\a\a "attr(p2)"\a\a "attr(p3)"" !important; }	
*:not(a)[p4]:hover:after { content: ""attr(p1)"\a\a "attr(p2)"\a\a "attr(p3)"\a\a "attr(p4)"" !important }	
*:not(a)[p5]:hover:after { content: ""attr(p1)"\a\a "attr(p2)"\a\a "attr(p3)"\a\a "attr(p4)"\a\a "attr(p5)"" !important } 
         	
*:not(a)[p1]:not(:hover), *:not(a)[p2]:not(:hover), 
*:not(a)[p3]:not(:hover), *:not(a)[p4]:not(:hover), 
*:not(a)[p5]:not(:hover),*:not(a)[img]:not(:hover) { 
  color: goldenrod }
  
a:not([p1]):not([p2]):not([p3]):not([p4]):not([p5]).height1:hover:after {/*10 lines*/ 
	content:"\a\a\a\a\a \a\a\a\a\a "attr(href)"" !important } 
a:not([p1]):not([p2]):not([p3]):not([p4]):not([p5]).height2:hover:after {/*15 lines*/ 
	content:"\a\a\a\a\a \a\a\a\a\a \a\a\a\a\a "attr(href)"" !important; } 
a:not([p1]):not([p2]):not([p3]):not([p4]):not([p5]).height3:hover:after {/*20 lines*/ 
	content:"\a\a\a\a\a \a\a\a\a\a \a\a\a\a\a \a\a\a\a\a "attr(href)"" !important; } 
a:not([p1]):not([p2]):not([p3]):not([p4]):not([p5]).height4:hover:after {/*25 lines*/ 
	content:"\a\a\a\a\a \a\a\a\a\a \a\a\a\a\a \a\a\a\a\a \a\a\a\a\a "attr(href)"" !important }
a:not([p1]):not([p2]):not([p3]):not([p4]):not([p5]).height5:hover:after {/*30 lines*/ 
	content:"\a\a\a\a\a \a\a\a\a\a \a\a\a\a\a \a\a\a\a\a \a\a\a\a\a \a\a\a\a\a "attr(href)"" !important	}
	
*:not(a).height1:hover:after { height: 20% }	
*:not(a).height2:hover:after { height: 40% }
*:not(a).height3:hover:after { height: 60% }
*:not(a).height4:hover:after { height: 80% }
*:not(a).height5:hover:after { height: 97% }
	
.width1:hover:after { width: 200px !important  } 
.width2:hover:after { width: 400px !important  } 
.width3:hover:after { width: 600px !important  } 
.width4:hover:after { width: 800px !important  } 
.width5:hover:after { width: 1000px !important } 
.width6:hover:after { width: 1200px !important } 
.width7:hover:after { width: 1400px !important } 
.width8:hover:after { width: 1600px !important } 
.width9:hover:after { width: 1800px !important }
.width10:hover:after{ width: 1900px !important } 

.TL:hover:after { background-position: top left      }
.TC:hover:after { background-position: top center    }
.TR:hover:after { background-position: top right     }
.CL:hover:after { background-position: center left   }
.CC:hover:after { background-position: center center }
.CR:hover:after { background-position: center right  }
.BL:hover:after { background-position: bottom left   }
.BC:hover:after { background-position: bottom center }
.BR:hover:after { background-position: bottom right  }

.white:hover:after { color: #e5e5e5 !important;
	text-shadow: -1px -1px 1px rgba(0,0,0,.5), 
	1px 1px 1px rgba(150,150,150,.6) !important } 
  
[p1]:hover:after, [p2]:hover:after, 
[p3]:hover:after, [p4]:hover:after, [p5]:hover:after,  
a:not([href^="#"]):not([href^="../"]):hover:after {	
	background: rgb(220,220,220) url(papertB.png) repeat fixed /*TEXTURE BACKGROUND */ }   
	    
[img="..."]:hover:after {
  background: url()  !important	}
	
[img]:hover:after	{ 
	background-size: cover !important } 	

/* Images can be added with attribute="target" names like [img="..."] 
along with height, width (& optional) position values (which defaults to top left) & text color
written in html like <i img="example.jpg" class="width4 height4 TC">example</i> 
	
This codes intended for Calibre editor ebooks needing <a href> link popups & has some complex rules 
that mean you can't show images if also showing a link & note together, but works fine with either note or link on its own.

Also note, when using a texture background for the popups it conflicts with image bacgrounds, so need to 
keep important tags for images in place and leave the texture background without one. 

Btw to use this with data images, the format needs to be url("data:image/....") with quotes inside the round brackets  */

Here's a few images of how it looks, and a texture background to download if wanting to try; just set the background with that file listed to a solid color or comment it out otherwise.