MobileRead Forums
Register Guidelines E-Books Today's Posts Search

Go Back   MobileRead Forums > E-Book Software > Calibre > Editor
Reload this Page Calibre editor e-reader html statusbar popup with css

Notices

Reply
 
Thread Tools Search this Thread
Old 03-10-2020, 11:04 AM   #1
ni_cc
Junior Member
ni_cc began at the beginning.
 
Posts: 4
Karma: 10
Join Date: Mar 2020
Device: Calibre ereader
Calibre editor e-reader html statusbar popup with css
Hi, here's some style code for a floating statusbar popup that appears at the bottom left of screen, to display <a href> links, notes and images (for e-readers that dont show the former) and for other html platforms in general to show the latter.

I posted some musings about this here a few years ago, so this' just an update.

The method to add notes, the main part to it, references attribute selectors in a similar way that <a href> links are added, linking multiple selectors that look back as new ones are referenced to add them as paragraphs.

The attribute names are p1 to p5 and the method to add them looks like:

Code:
<a href="http://example.com" p1="..." p2="..." p3="...">example</a> 
<img src="../20/example.jpg" p1="..." p2="..."/> 
<i p1="...">example</i>
Other notes:
  • This code should be usable with most html content, but requires minor differences depending on whether there's a need to show <a href> links or not, so I'll post two versions of it.
  • The a:not([href^="#"]):not([href^="../"]) qualification is to prevent internal chapter and footnote paths appearing.
  • To indicate interactivity text linking non <a href> notes are are colored.
  • You may want to alter the width value currently set to 100%.
  • There's also a template to add images at the end along with explanation of how to link them & some limitations.

The version that shows <a href> links

[See updated post]

The version that omits <a href> links

[See updated post]
Last edited by pdurrant; 03-14-2020 at 11:17 AM.
ni_cc is offline   Reply With Quote
Old 03-14-2020, 08:41 AM   #2
ni_cc
Junior Member
ni_cc began at the beginning.
 
Posts: 4
Karma: 10
Join Date: Mar 2020
Device: Calibre ereader
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 &nbsp; 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.
ni_cc is offline   Reply With Quote
Advert
Old 03-14-2020, 08:18 PM   #3
ni_cc
Junior Member
ni_cc began at the beginning.
 
Posts: 4
Karma: 10
Join Date: Mar 2020
Device: Calibre ereader
2nd Update

Hey so here are some more tweaks improving the box shadow effect & borders, adding a border radius for rounded edges, and setting seperate variables depending on whether its for images or notes/links with or without images, along with changes to the width variables as those doesn't conform to what they're supposed to, and not sure they allow showing full width of the screen due to it, as in Thunderbird it maxes at about 1700px if set to max setting whether intended to be 1200 or 1900px. See screenshot

So regardless of which version of the code you want to use from the previous update, replace & add the corresponding snippets below, comprising the whole first main section, (following the content rule, ending with border-color) and the whole width section further down. Technically the 10th width variable is the same as the 9th in Thunderbird at least, both maxing at 1700, so ymmv depending on platform & display size used, but because its shown as a content rule, can't use percentage values for width, so exact sizes have to remain a mystery.

Main code snippet to replace

Code:
 
padding: 1pt 2pt;
bottom: 3px; 
left: 3px; 
z-index: 1;
display: block; 
position:fixed;
max-width: 97%; 
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: 3px 2px 1px rgba(0,0,0,.3), -1px -1px 1px rgba(0,0,0,.15),
                1px 1px 1px rgba(0,0,0,.2), -3px -2px 1px rgba(0,0,0,.15);
border: 1px solid; 
border-color: rgba(255,255,255,.5) 
rgba(170,170,170,.75) rgba(160,160,160,.75) rgba(255,255,255,.6);
    border-radius: 1px  }

[img]:hover:after {
    border-radius: 10px !important;
    box-shadow: 4px 3px 1px rgba(0,0,0,.4), -1px -1px 1px rgba(0,0,0,.2),
                1px 1px 1px rgba(0,0,0,.2), -3px -2px 1px rgba(0,0,0,.15) !important;                
bottom: 6px !important; 
left: 6px; !important }
Width variables to replace

Code:
.width1:hover:after { width: 125px !important  } 
.width2:hover:after { width: 250px !important  } 
.width3:hover:after { width: 375px !important  } 
.width4:hover:after { width: 500px !important  } 
.width5:hover:after { width: 625px !important } 
.width6:hover:after { width: 750px !important } 
.width7:hover:after { width: 875px !important } 
.width8:hover:after { width: 1000px !important } 
.width9:hover:after { width: 1125px !important }
.width10:hover:after{ width: 1250px !important }
Click image for larger version Name: linkhere.jpg Views: 418 Size: 231.8 KB ID: 177716
Last edited by BetterRed; 03-14-2020 at 08:32 PM. Reason: Fix Oversize image - ni_cc PLEASE READ GUIDELINE #9
ni_cc is offline   Reply With Quote
Old 03-14-2020, 09:57 PM   #4
PeterT
Grand Sorcerer
PeterT ought to be getting tired of karma fortunes by now.PeterT ought to be getting tired of karma fortunes by now.PeterT ought to be getting tired of karma fortunes by now.PeterT ought to be getting tired of karma fortunes by now.PeterT ought to be getting tired of karma fortunes by now.PeterT ought to be getting tired of karma fortunes by now.PeterT ought to be getting tired of karma fortunes by now.PeterT ought to be getting tired of karma fortunes by now.PeterT ought to be getting tired of karma fortunes by now.PeterT ought to be getting tired of karma fortunes by now.PeterT ought to be getting tired of karma fortunes by now.
 
Posts: 13,511
Karma: 78910202
Join Date: Nov 2007
Location: Toronto
Device: Libra H2O, Libra Colour
I think these posts really belong in either the Epub or workshop forums. Thoughts???
PeterT is offline   Reply With Quote
Old 03-15-2020, 06:33 AM   #5
BetterRed
null operator (he/him)
BetterRed ought to be getting tired of karma fortunes by now.BetterRed ought to be getting tired of karma fortunes by now.BetterRed ought to be getting tired of karma fortunes by now.BetterRed ought to be getting tired of karma fortunes by now.BetterRed ought to be getting tired of karma fortunes by now.BetterRed ought to be getting tired of karma fortunes by now.BetterRed ought to be getting tired of karma fortunes by now.BetterRed ought to be getting tired of karma fortunes by now.BetterRed ought to be getting tired of karma fortunes by now.BetterRed ought to be getting tired of karma fortunes by now.BetterRed ought to be getting tired of karma fortunes by now.
 
Posts: 21,722
Karma: 29711016
Join Date: Mar 2012
Location: Sydney Australia
Device: none
Quote:
Originally Posted by PeterT View Post
I think these posts really belong in either the Epub or workshop forums. Thoughts???
might need a title change otherwise a Greenie might move it back here
BetterRed is offline   Reply With Quote
Advert
Old 03-15-2020, 08:36 AM   #6
Brett Merkey
Not Quite Dead
Brett Merkey ought to be getting tired of karma fortunes by now.Brett Merkey ought to be getting tired of karma fortunes by now.Brett Merkey ought to be getting tired of karma fortunes by now.Brett Merkey ought to be getting tired of karma fortunes by now.Brett Merkey ought to be getting tired of karma fortunes by now.Brett Merkey ought to be getting tired of karma fortunes by now.Brett Merkey ought to be getting tired of karma fortunes by now.Brett Merkey ought to be getting tired of karma fortunes by now.Brett Merkey ought to be getting tired of karma fortunes by now.Brett Merkey ought to be getting tired of karma fortunes by now.Brett Merkey ought to be getting tired of karma fortunes by now.
 
Posts: 195
Karma: 654170
Join Date: Jul 2015
Device: Paperwhite 4; Galaxy Tab
Quote:
Epub or workshop forums
Perhaps a spiritualism forum? CSS tricks that depend on ::hover pseudo seem downright spooky. I don't know how a hover is produced on my Kindle or Galaxy...
Brett Merkey is offline   Reply With Quote
Reply

« Previous Thread | Next Thread »

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
Completion popup - fix all html/beautify all files retiredbiker Editor 7 08-30-2018 01:44 AM
Reader HTML/CSS bug lists nabsltd Which one should I buy? 3 07-20-2017 05:51 AM
Calibre adding launch icon in statusbar in Linux Mint MountainMan1 Devices 2 02-23-2017 11:20 PM
StatusBar on Onyx Neo Reader _ N96ML iHasan Onyx Boox 5 07-12-2016 04:32 AM
Calibre 2.8 HTML Editor won't save edits zoomiest Conversion 1 11-09-2014 12:47 AM


All times are GMT -4. The time now is 03:13 PM.

Contact Us - FAQ - Guidelines - Privacy - Top

MobileRead.com is a privately owned, operated and funded community.