Styling book comments (description) with CSS

[tgiladi]

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?

[Comfy.n]

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> 


[tgiladi]

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!

[Comfy.n]

Nice! So you had to do td width=, I suppose. Glad it helped

[tgiladi]

Yes I did. Here is the code I am using:

<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.

[Comfy.n]

Originally Posted by tgiladi

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

[tgiladi]

Thanks. I read that thread. Looks like the guy was having the exact same issue. But he never figured it out, I guess.

[kovidgoyal]

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.

[Comfy.n]

oh, perhaps the OP isn't aware of the new Notes feature and this awesome plugin, which provides similar functionality:

GR Author Notes

[tgiladi]

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:

<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.

[theducks]

<pre> HTML code means Pre-formatted, don't modify with other settings

[tgiladi]

Originally Posted by Comfy.n

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]

Originally Posted by theducks

<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:

<p>{_custom_column}</p>

I end up with:

<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.

[chaley]

Originally Posted by tgiladi

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:

<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.

[tgiladi]

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):

<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:

<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.