Register Guidelines E-Books Search Today's Posts Mark Forums Read

Go Back   MobileRead Forums > E-Book Software > Calibre > Library Management

Notices

Reply
 
Thread Tools Search this Thread
Old 02-27-2024, 02:35 PM   #1
tgiladi
Enthusiast
tgiladi can even cheer up an android equipped with a defective Genuine Personality Prototype.tgiladi can even cheer up an android equipped with a defective Genuine Personality Prototype.tgiladi can even cheer up an android equipped with a defective Genuine Personality Prototype.tgiladi can even cheer up an android equipped with a defective Genuine Personality Prototype.tgiladi can even cheer up an android equipped with a defective Genuine Personality Prototype.tgiladi can even cheer up an android equipped with a defective Genuine Personality Prototype.tgiladi can even cheer up an android equipped with a defective Genuine Personality Prototype.tgiladi can even cheer up an android equipped with a defective Genuine Personality Prototype.tgiladi can even cheer up an android equipped with a defective Genuine Personality Prototype.tgiladi can even cheer up an android equipped with a defective Genuine Personality Prototype.tgiladi can even cheer up an android equipped with a defective Genuine Personality Prototype.
 
Posts: 26
Karma: 30486
Join Date: Dec 2023
Device: Kindle Oasis
Styling book comments (description) with CSS

I have been playing with adding information about authors into the comments section of the metadata of my books, including their pictures. To make the authors' pictures viewable in Calibre-Web, instead of adding the pictures as links to files on my computer, I'm embedding the images as html (basically converted jpg files into Base64) and it looks very nice.
But I am looking to do some more styling. More specifically, adding a table with just one row, so that I could put the author's image next to the text describing the author, instead of above or below. The outcome looks ok in Calibre, but on any other platform the result is distorted. For example the image becomes tiny.
So, I've done some investigating and realized I could accomplish what I'm looking for with CSS and I've tried some WYSIWYG html editors, but they all seem to create a full html page and from what I understand, the comments section in Calibre only takes very basic div elements, so the styling is gone.
So, this is the question: is there any way to do some rich styling in the comments section or this is it?
tgiladi is offline   Reply With Quote
Old 02-28-2024, 05:00 AM   #2
Comfy.n
want to learn what I want
Comfy.n ought to be getting tired of karma fortunes by now.Comfy.n ought to be getting tired of karma fortunes by now.Comfy.n ought to be getting tired of karma fortunes by now.Comfy.n ought to be getting tired of karma fortunes by now.Comfy.n ought to be getting tired of karma fortunes by now.Comfy.n ought to be getting tired of karma fortunes by now.Comfy.n ought to be getting tired of karma fortunes by now.Comfy.n ought to be getting tired of karma fortunes by now.Comfy.n ought to be getting tired of karma fortunes by now.Comfy.n ought to be getting tired of karma fortunes by now.Comfy.n ought to be getting tired of karma fortunes by now.
 
Posts: 993
Karma: 6417070
Join Date: Sep 2020
Device: Calibre E-book viewer
What happens if you add width=x, as in the following test?
PHP Code:
<div>
<
table border="1" style="border-collapse: collapse" cellspacing="4" cellpadding="4">
<
tbody><tr>
<
td bgcolor="transparent">
<
p style="margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; text-indent: 0px; background-color: transparent"><span style="font-family: 'tahoma'; background-color: transparent">Maria Anders</span></p></td>
<
td bgcolor="transparent">
<
p style="margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; text-indent: 0px; background-color: transparent"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4%0A%20%20%20%20%20%20%20%20//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" width="40"></p></td></tr></tbody></table></div

Last edited by Comfy.n; 02-28-2024 at 05:26 AM.
Comfy.n is offline   Reply With Quote
Advert
Old 02-28-2024, 02:07 PM   #3
tgiladi
Enthusiast
tgiladi can even cheer up an android equipped with a defective Genuine Personality Prototype.tgiladi can even cheer up an android equipped with a defective Genuine Personality Prototype.tgiladi can even cheer up an android equipped with a defective Genuine Personality Prototype.tgiladi can even cheer up an android equipped with a defective Genuine Personality Prototype.tgiladi can even cheer up an android equipped with a defective Genuine Personality Prototype.tgiladi can even cheer up an android equipped with a defective Genuine Personality Prototype.tgiladi can even cheer up an android equipped with a defective Genuine Personality Prototype.tgiladi can even cheer up an android equipped with a defective Genuine Personality Prototype.tgiladi can even cheer up an android equipped with a defective Genuine Personality Prototype.tgiladi can even cheer up an android equipped with a defective Genuine Personality Prototype.tgiladi can even cheer up an android equipped with a defective Genuine Personality Prototype.
 
Posts: 26
Karma: 30486
Join Date: Dec 2023
Device: Kindle Oasis
Thanks a lot!
This code actually helped. I realized that my problem was that the cell with the image didn't have a fixed width. As a result, when I entered a lot of text into the other cell, the image cell shrunk, and with it the image.
I used Microsoft Copilot to tweak the code some more and now I have a good template for what I wanted.
Really appreciate the help!
tgiladi is offline   Reply With Quote
Old 02-28-2024, 07:08 PM   #4
Comfy.n
want to learn what I want
Comfy.n ought to be getting tired of karma fortunes by now.Comfy.n ought to be getting tired of karma fortunes by now.Comfy.n ought to be getting tired of karma fortunes by now.Comfy.n ought to be getting tired of karma fortunes by now.Comfy.n ought to be getting tired of karma fortunes by now.Comfy.n ought to be getting tired of karma fortunes by now.Comfy.n ought to be getting tired of karma fortunes by now.Comfy.n ought to be getting tired of karma fortunes by now.Comfy.n ought to be getting tired of karma fortunes by now.Comfy.n ought to be getting tired of karma fortunes by now.Comfy.n ought to be getting tired of karma fortunes by now.
 
Posts: 993
Karma: 6417070
Join Date: Sep 2020
Device: Calibre E-book viewer
Nice! So you had to do td width=, I suppose. Glad it helped
Comfy.n is offline   Reply With Quote
Old 03-01-2024, 01:31 AM   #5
tgiladi
Enthusiast
tgiladi can even cheer up an android equipped with a defective Genuine Personality Prototype.tgiladi can even cheer up an android equipped with a defective Genuine Personality Prototype.tgiladi can even cheer up an android equipped with a defective Genuine Personality Prototype.tgiladi can even cheer up an android equipped with a defective Genuine Personality Prototype.tgiladi can even cheer up an android equipped with a defective Genuine Personality Prototype.tgiladi can even cheer up an android equipped with a defective Genuine Personality Prototype.tgiladi can even cheer up an android equipped with a defective Genuine Personality Prototype.tgiladi can even cheer up an android equipped with a defective Genuine Personality Prototype.tgiladi can even cheer up an android equipped with a defective Genuine Personality Prototype.tgiladi can even cheer up an android equipped with a defective Genuine Personality Prototype.tgiladi can even cheer up an android equipped with a defective Genuine Personality Prototype.
 
Posts: 26
Karma: 30486
Join Date: Dec 2023
Device: Kindle Oasis
Yes I did. Here is the code I am using:

Code:
<p align="center">* * *</p>
<p> </p>
<table border="0" style="border-collapse: collapse" cellspacing="4" cellpadding="4">
<tbody><tr>
<td bgcolor="transparent" style="vertical-align: top">
<p dir="rtl" style="margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; text-indent: 0px; background-color: transparent"><span style="font-weight: bold; font-style: italic; background-color: transparent">NAME</span><span style="background-color: transparent"> TEXT</span></p></td>
<td width="120" bgcolor="transparent" style="vertical-align: top">
<p align="center" dir="rtl" style="margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; text-indent: 0px; background-color: transparent"><img src="IMAGE" width="100" style="vertical-align: top"></p></td></tr></tbody></table></div>
Currently I am pasting this every time, and I'm replacing the placeholders ("NAME", "TEXT","IMAGE") with my data.
Is there a way to customize Calibre so that my code is there to begin with? This will enable me to skip having to paste the code, and I could juts add the data. I couldn't find a template for the comments section, only CSS.
tgiladi is offline   Reply With Quote
Advert
Old 03-01-2024, 01:49 AM   #6
Comfy.n
want to learn what I want
Comfy.n ought to be getting tired of karma fortunes by now.Comfy.n ought to be getting tired of karma fortunes by now.Comfy.n ought to be getting tired of karma fortunes by now.Comfy.n ought to be getting tired of karma fortunes by now.Comfy.n ought to be getting tired of karma fortunes by now.Comfy.n ought to be getting tired of karma fortunes by now.Comfy.n ought to be getting tired of karma fortunes by now.Comfy.n ought to be getting tired of karma fortunes by now.Comfy.n ought to be getting tired of karma fortunes by now.Comfy.n ought to be getting tired of karma fortunes by now.Comfy.n ought to be getting tired of karma fortunes by now.
 
Posts: 993
Karma: 6417070
Join Date: Sep 2020
Device: Calibre E-book viewer
Quote:
Originally Posted by tgiladi View Post
Is there a way to customize Calibre so that my code is there to begin with? This will enable me to skip having to paste the code, and I could juts add the data. I couldn't find a template for the comments section, only CSS.
This has been discussed recently in this thread, take a look:

https://www.mobileread.com/forums/sh...d.php?t=338128
Comfy.n is offline   Reply With Quote
Old 03-01-2024, 03:22 AM   #7
tgiladi
Enthusiast
tgiladi can even cheer up an android equipped with a defective Genuine Personality Prototype.tgiladi can even cheer up an android equipped with a defective Genuine Personality Prototype.tgiladi can even cheer up an android equipped with a defective Genuine Personality Prototype.tgiladi can even cheer up an android equipped with a defective Genuine Personality Prototype.tgiladi can even cheer up an android equipped with a defective Genuine Personality Prototype.tgiladi can even cheer up an android equipped with a defective Genuine Personality Prototype.tgiladi can even cheer up an android equipped with a defective Genuine Personality Prototype.tgiladi can even cheer up an android equipped with a defective Genuine Personality Prototype.tgiladi can even cheer up an android equipped with a defective Genuine Personality Prototype.tgiladi can even cheer up an android equipped with a defective Genuine Personality Prototype.tgiladi can even cheer up an android equipped with a defective Genuine Personality Prototype.
 
Posts: 26
Karma: 30486
Join Date: Dec 2023
Device: Kindle Oasis
Thanks. I read that thread. Looks like the guy was having the exact same issue. But he never figured it out, I guess.
tgiladi is offline   Reply With Quote
Old 03-01-2024, 04:33 AM   #8
kovidgoyal
creator of calibre
kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.
 
kovidgoyal's Avatar
 
Posts: 43,856
Karma: 22666666
Join Date: Oct 2006
Location: Mumbai, India
Device: Various
There is no template for comments, indeed most often comments come from book metadata or are downloaded from the internet so, templating them wouldnt really work.

I dont know about calibre-web, but with the regular calibre content server you can view notes associated with each author, including images using the new category notes feature in calibre 7.
kovidgoyal is offline   Reply With Quote
Old 03-01-2024, 05:02 AM   #9
Comfy.n
want to learn what I want
Comfy.n ought to be getting tired of karma fortunes by now.Comfy.n ought to be getting tired of karma fortunes by now.Comfy.n ought to be getting tired of karma fortunes by now.Comfy.n ought to be getting tired of karma fortunes by now.Comfy.n ought to be getting tired of karma fortunes by now.Comfy.n ought to be getting tired of karma fortunes by now.Comfy.n ought to be getting tired of karma fortunes by now.Comfy.n ought to be getting tired of karma fortunes by now.Comfy.n ought to be getting tired of karma fortunes by now.Comfy.n ought to be getting tired of karma fortunes by now.Comfy.n ought to be getting tired of karma fortunes by now.
 
Posts: 993
Karma: 6417070
Join Date: Sep 2020
Device: Calibre E-book viewer
oh, perhaps the OP isn't aware of the new Notes feature and this awesome plugin, which provides similar functionality:

GR Author Notes
Comfy.n is offline   Reply With Quote
Old 03-01-2024, 05:18 AM   #10
tgiladi
Enthusiast
tgiladi can even cheer up an android equipped with a defective Genuine Personality Prototype.tgiladi can even cheer up an android equipped with a defective Genuine Personality Prototype.tgiladi can even cheer up an android equipped with a defective Genuine Personality Prototype.tgiladi can even cheer up an android equipped with a defective Genuine Personality Prototype.tgiladi can even cheer up an android equipped with a defective Genuine Personality Prototype.tgiladi can even cheer up an android equipped with a defective Genuine Personality Prototype.tgiladi can even cheer up an android equipped with a defective Genuine Personality Prototype.tgiladi can even cheer up an android equipped with a defective Genuine Personality Prototype.tgiladi can even cheer up an android equipped with a defective Genuine Personality Prototype.tgiladi can even cheer up an android equipped with a defective Genuine Personality Prototype.tgiladi can even cheer up an android equipped with a defective Genuine Personality Prototype.
 
Posts: 26
Karma: 30486
Join Date: Dec 2023
Device: Kindle Oasis
Hi again. I followed one of the suggestions in that other post. I created a custom column built from other columns and added my code to it as a template. Then I replaced the placeholders in the code with values from other custom columns I created, e.g. an image as text coded in Base64. I then checked the option to show with comments and got what I wanted. Now in the book details section I can see both the comments (from the edit metadata screen) AND the other data stored in the new custom column

The challenge now is getting my jacket template to work. For some reason, when I polish a book, there is some strange tag added:
Code:
<pre style="white-space:pre-wrap">
I have to remove it manually to get the jacket to show properly. I hope someone knows how to avoid creation of this tag.
tgiladi is offline   Reply With Quote
Old 03-01-2024, 09:33 AM   #11
theducks
Well trained by Cats
theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.
 
theducks's Avatar
 
Posts: 29,800
Karma: 54830978
Join Date: Aug 2009
Location: The Central Coast of California
Device: Kobo Libra2,Kobo Aura2v1, K4NT(Fixed: New Bat.), Galaxy Tab A
<pre> HTML code means Pre-formatted, don't modify with other settings
theducks is offline   Reply With Quote
Old 03-01-2024, 11:14 AM   #12
tgiladi
Enthusiast
tgiladi can even cheer up an android equipped with a defective Genuine Personality Prototype.tgiladi can even cheer up an android equipped with a defective Genuine Personality Prototype.tgiladi can even cheer up an android equipped with a defective Genuine Personality Prototype.tgiladi can even cheer up an android equipped with a defective Genuine Personality Prototype.tgiladi can even cheer up an android equipped with a defective Genuine Personality Prototype.tgiladi can even cheer up an android equipped with a defective Genuine Personality Prototype.tgiladi can even cheer up an android equipped with a defective Genuine Personality Prototype.tgiladi can even cheer up an android equipped with a defective Genuine Personality Prototype.tgiladi can even cheer up an android equipped with a defective Genuine Personality Prototype.tgiladi can even cheer up an android equipped with a defective Genuine Personality Prototype.tgiladi can even cheer up an android equipped with a defective Genuine Personality Prototype.
 
Posts: 26
Karma: 30486
Join Date: Dec 2023
Device: Kindle Oasis
Quote:
Originally Posted by Comfy.n View Post
oh, perhaps the OP isn't aware of the new Notes feature and this awesome plugin, which provides similar functionality:

GR Author Notes
You're right, I didn't know about it... It looks like it could really be useful for what I'm trying to accomplish. The only thing is, I'm not sure how to include these notes in the jacket page when polishing, but I'll keep trying. Thanks for the tip!
tgiladi is offline   Reply With Quote
Old 03-01-2024, 11:40 AM   #13
tgiladi
Enthusiast
tgiladi can even cheer up an android equipped with a defective Genuine Personality Prototype.tgiladi can even cheer up an android equipped with a defective Genuine Personality Prototype.tgiladi can even cheer up an android equipped with a defective Genuine Personality Prototype.tgiladi can even cheer up an android equipped with a defective Genuine Personality Prototype.tgiladi can even cheer up an android equipped with a defective Genuine Personality Prototype.tgiladi can even cheer up an android equipped with a defective Genuine Personality Prototype.tgiladi can even cheer up an android equipped with a defective Genuine Personality Prototype.tgiladi can even cheer up an android equipped with a defective Genuine Personality Prototype.tgiladi can even cheer up an android equipped with a defective Genuine Personality Prototype.tgiladi can even cheer up an android equipped with a defective Genuine Personality Prototype.tgiladi can even cheer up an android equipped with a defective Genuine Personality Prototype.
 
Posts: 26
Karma: 30486
Join Date: Dec 2023
Device: Kindle Oasis
Quote:
Originally Posted by theducks View Post
<pre> HTML code means Pre-formatted, don't modify with other settings
But why is it being added to the code?
Even if my template.xhtml for the jacket only has something simple like:
Code:
<p>{_custom_column}</p>
I end up with:
Code:
<pre style="white-space:pre-wrap">content of my custom column</pre>
And this is messing up the format I intended for.

Obviously I'm doing something wrong, I just don't know what.
tgiladi is offline   Reply With Quote
Old 03-02-2024, 05:12 AM   #14
chaley
Grand Sorcerer
chaley ought to be getting tired of karma fortunes by now.chaley ought to be getting tired of karma fortunes by now.chaley ought to be getting tired of karma fortunes by now.chaley ought to be getting tired of karma fortunes by now.chaley ought to be getting tired of karma fortunes by now.chaley ought to be getting tired of karma fortunes by now.chaley ought to be getting tired of karma fortunes by now.chaley ought to be getting tired of karma fortunes by now.chaley ought to be getting tired of karma fortunes by now.chaley ought to be getting tired of karma fortunes by now.chaley ought to be getting tired of karma fortunes by now.
 
Posts: 11,741
Karma: 6997045
Join Date: Jan 2010
Location: Notts, England
Device: Kobo Libra 2
Quote:
Originally Posted by tgiladi View Post
Hi again. I followed one of the suggestions in that other post. I created a custom column built from other columns and added my code to it as a template. Then I replaced the placeholders in the code with values from other custom columns I created, e.g. an image as text coded in Base64. I then checked the option to show with comments and got what I wanted. Now in the book details section I can see both the comments (from the edit metadata screen) AND the other data stored in the new custom column

The challenge now is getting my jacket template to work. For some reason, when I polish a book, there is some strange tag added:
Code:
<pre style="white-space:pre-wrap">
I have to remove it manually to get the jacket to show properly. I hope someone knows how to avoid creation of this tag.
I looked at this and am confused.

That tag is added to if you use a custom comments-type column with the display type set to "plain text", not "html". It isn't added to composite columns (column built from other columns).

However, composite columns have a different problem. All the HTML tags are escaped, causing them to render as text. (I will fix this.)

The question: are you really using a composite column in your jacket? If so, are you really seeing the "white-space" tag? As far as I can see from the calibre code, that isn't possible.
chaley is offline   Reply With Quote
Old 03-02-2024, 11:31 AM   #15
tgiladi
Enthusiast
tgiladi can even cheer up an android equipped with a defective Genuine Personality Prototype.tgiladi can even cheer up an android equipped with a defective Genuine Personality Prototype.tgiladi can even cheer up an android equipped with a defective Genuine Personality Prototype.tgiladi can even cheer up an android equipped with a defective Genuine Personality Prototype.tgiladi can even cheer up an android equipped with a defective Genuine Personality Prototype.tgiladi can even cheer up an android equipped with a defective Genuine Personality Prototype.tgiladi can even cheer up an android equipped with a defective Genuine Personality Prototype.tgiladi can even cheer up an android equipped with a defective Genuine Personality Prototype.tgiladi can even cheer up an android equipped with a defective Genuine Personality Prototype.tgiladi can even cheer up an android equipped with a defective Genuine Personality Prototype.tgiladi can even cheer up an android equipped with a defective Genuine Personality Prototype.
 
Posts: 26
Karma: 30486
Join Date: Dec 2023
Device: Kindle Oasis
Thanks a lot for trying to help
I am using this code in the template.xhtml file to create the jacket (this is at the bottom of the code):
Code:
<div class="cbj_comments">{comments}
			<p align="center">* * *</p>
			<p> </p>
			<table border="0" style="border-collapse: collapse" cellspacing="4" cellpadding="4">
				<tbody><tr>
					<td bgcolor="transparent" style="vertical-align: top">
						<p dir="rtl" style="margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; text-indent: 0px; background-color: transparent">{_author_details}</p></td>
					<td width="120" bgcolor="transparent" style="vertical-align: top">
						<p align="center" dir="rtl" style="margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; text-indent: 0px; background-color: transparent"><img src="{_author_image}" width="100" style="vertical-align: top"></p></td>
				</tr></tbody>
			</table>
		</div>
This code works well for getting the text I have in the custom column called "author_details". The problem is with my other column, "author_image".
That column has an image encoded in base64, so it's really just a long string. I have this column set to display as html. But when the jacket is created, the <img> tag gets this addition to it:
Code:
<img src="&lt;p class=" description_=""/>
This is then followed by the string from the column. If I remove this manually, as well as anothr </p> tag added at the end of the string, then the image is presented properly. There is an additional added at the end &gt; but it's enough to remove just the first two additions.
I guess I could go in and fix it manually every time, but that's not much different than how I did it in the beginning (with your help )
If only I could somehow pull the information stored in the author notes and use it in the template.xhtml, that would have solved the problem. I thought it might be a property like {author.notes}, but that didn't work.
tgiladi is offline   Reply With Quote
Reply

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
Can't see description/comments scarlettruin Devices 1 02-02-2019 04:37 PM
Metadata/Comments/Book Description not showing up on Nook Semco Devices 3 10-29-2017 02:48 PM
Incorrect styling with specific CSS quiris Marvin 9 07-04-2016 01:04 PM
Styling Elements in CSS - ADE and Sony toskpro Sony Reader 0 07-19-2010 01:55 PM
CSS Styling not showing up in digital editions sjkramer Sigil 9 01-30-2010 10:46 AM


All times are GMT -4. The time now is 04:06 PM.


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