border-radius with RMSDK?

Skinkie · 09-03-2021, 12:11 AM

I am trying something very simple, or so I thought, having a div with a rounded corner in ePub. My HTML works flawless with the beta browser on my Kobo HD, but opening the epub will give me a square box.

Is there any way to get this to work?

Code:

<html>
<body>
<p>Hello world</p>
<div style="-webkit-border-radius: 50px; border-radius: 50px; background: #73AD21; padding: 30px; display: inline-block; color: #FFF; font-size: 1em; font-family: sans;">
        <p style="margin: 0">Kan nu niet bellen. Wat heb je gehoord?</p>
        <p style="float: right; margin: 0; margin-top: 0.4em;">12:00</p>
</div>
<p>Daar is weer tekst</p>
</body>
</html>

Skinkie · 09-03-2021, 01:11 AM

I think this thread does exactly what I want. But I can't get it to render on the Kobo HD.

Quoth · 09-03-2021, 08:04 AM

It won't work on most physical ereaders. I'm actually amazed the plain box with no radius on the corner seems to work so well, including internal spacing and line width, on physical ereaders.

Also "Float" is a dubious property for many ereaders.

JSWolf · 09-03-2021, 03:34 PM

Quote:

Originally Posted by Quoth

It won't work on most physical ereaders. I'm actually amazed the plain box with no radius on the corner seems to work so well, including internal spacing and line width, on physical ereaders.

Also "Float" is a dubious property for many ereaders.

I've not had a problem with Float on any Reader using RMSDK.

Kobo is not using the latest RMSDK so it's no wonder curves do not work. I don't know if curves will work with the current RMSDK but maybe.

Skinkie · 09-03-2021, 08:32 PM

I basically have three options.
1. fix my SVG example that uses text, it blows up in Kobo's RMSDK.
2. find a way to scale a pure-SVG (text becomes paths) with the current line height. I dislike this solution, because it requires magic to become accessible again. It is a solution that works though.
3. accept square boxes, and hope for a better future. (at least on Kobo, on Kindle it does not work at all)

Quoth · 09-04-2021, 08:24 AM

Right angle corner boxes work on my Kindles. Conversion from epub2 and import from docx saved from LO Writer. No edit of CSS or HTML. I enabled lines on all four sides of a paragraph style. Line width recognised too.

Quoth · 09-04-2021, 08:26 AM

Quote:

Originally Posted by JSWolf

I've not had a problem with Float on any Reader using RMSDK.

I know the thread is about Kobo & RMSDK, but I'm sure Float is a problem on some other ereaders. I anchor images as a Character and usually in their own paragraph.

Skinkie · 09-04-2021, 02:11 PM

Quote:

Originally Posted by Quoth

Right angle corner boxes work on my Kindles. Conversion from epub2 and import from docx saved from LO Writer. No edit of CSS or HTML. I enabled lines on all four sides of a paragraph style. Line width recognised too.

I have asked someone what the Texties document looks like on a Kindle, which basically is a textual mess. Are you sure this works?

MicroDrie · 09-05-2021, 08:42 AM

Quote:

Originally Posted by Skinkie

I am trying something very simple, or so I thought, having a div with a rounded corner in ePub. My HTML works flawless with the beta browser on my Kobo HD, but opening the epub will give me a square box.

Is there any way to get this to work?

Code:

<html>
<body>
<p>Hello world</p>
<div style="-webkit-border-radius: 50px; border-radius: 50px; background: #73AD21; padding: 30px; display: inline-block; color: #FFF; font-size: 1em; font-family: sans;">
        <p style="margin: 0">Kan nu niet bellen. Wat heb je gehoord?</p>
        <p style="float: right; margin: 0; margin-top: 0.4em;">12:00</p>
</div>
<p>Daar is weer tekst</p>
</body>
</html>

In recent years, the CSS code of webkit has changed quite a bit and we don't know which version webkit is used. Let's try if we can address webkit on the unsupported CSS elements.

What is the result of the code below?

Code:

<html>
<body>
<p>Hello world</p>
<div style="-webkit-background-clip: text; border-radius: 50px;-webkit-border-radius: 50px;display: inline-block;background: #73AD21;color: #FFF;padding: 30px;font-size: 1em;font-family: sans;">
        <p style="margin: 0">Kan nu niet bellen. Wat heb je gehoord?</p>
        <p style="float: right; margin: 0; margin-top: 0.4em;">12:00</p>
</div>
<p>Daar is weer tekst</p>
</body>
</html>

Semwize · 09-05-2021, 03:51 PM

Quote:

Originally Posted by MicroDrie

What is the result of the code below?

Code:

<html>
<body>
<p>Hello world</p>
<div style="-webkit-background-clip: text; border-radius: 50px;-webkit-border-radius: 50px;display: inline-block;background: #73AD21;color: #FFF;padding: 30px;font-size: 1em;font-family: sans;">
        <p style="margin: 0">Kan nu niet bellen. Wat heb je gehoord?</p>
        <p style="float: right; margin: 0; margin-top: 0.4em;">12:00</p>
</div>
<p>Daar is weer tekst</p>
</body>
</html>

This will not work in epub, can not even try it.

JSWolf · 09-05-2021, 03:54 PM

Quote:

Originally Posted by MicroDrie

What is the result of the code below?

Code:

<html>
<body>
<p>Hello world</p>
<div style="-webkit-background-clip: text; border-radius: 50px;-webkit-border-radius: 50px;display: inline-block;background: #73AD21;color: #FFF;padding: 30px;font-size: 1em;font-family: sans;">
        <p style="margin: 0">Kan nu niet bellen. Wat heb je gehoord?</p>
        <p style="float: right; margin: 0; margin-top: 0.4em;">12:00</p>
</div>
<p>Daar is weer tekst</p>
</body>
</html>

The code will not work as RMSDK does not use webkit.

DNSB · 09-05-2021, 10:20 PM

Quote:

Originally Posted by Skinkie

I am trying something very simple, or so I thought, having a div with a rounded corner in ePub. My HTML works flawless with the beta browser on my Kobo HD, but opening the epub will give me a square box.

Is there any way to get this to work?

Since you are asking this in a Kobo forum, you can always use the alternative renderer built into the Kobo firmware. See the attached images for the display using both renderers on the code posted by MicroDrie.

Skinkie · 09-06-2021, 05:33 AM

Quote:

Originally Posted by DNSB

you can always use the alternative renderer built into the Kobo firmware.

And what alternative renderer supporting ePub natively do you mean here? I am aware of the beta webbrowser.

Out of curiosity how did you make the screenshots?

PeterT · 09-06-2021, 08:53 AM

Kobo uses two different reading engines; one for Epub and a second for Kobo Epub. The choice of engine is based on the file name. Files ending in .epub are processed by a RMSDK engine, while those ending in .kepub.epub are processed by an Access NetFront based engine.

Some info on the Kobo format can be found at https://github.com/kobolabs/epub-spec

Screenshots can be enabled via an entry in the kobo.conf file and then taken with the power switch. The simplest way to manage the required change to the conf file is to use nickle Menu.

Sent from my Pixel 4a using Tapatalk

Quoth · 09-06-2021, 09:13 AM

And the screenshots are in colour if the content is colour, so not the black, 14 greys and white of the actual display even for monochrome content.

You'd want a sleep cover if using the power switch for screenshots. But does the kobo.conf setting work for all FW or models?

09-03-2021, 12:11 AM	#1
Skinkie Member Posts: 16 Karma: 10 Join Date: Aug 2013 Device: Kobo Aura HD	border-radius with RMSDK? I am trying something very simple, or so I thought, having a div with a rounded corner in ePub. My HTML works flawless with the beta browser on my Kobo HD, but opening the epub will give me a square box. Is there any way to get this to work? Code: <html> <body> <p>Hello world</p> <div style="-webkit-border-radius: 50px; border-radius: 50px; background: #73AD21; padding: 30px; display: inline-block; color: #FFF; font-size: 1em; font-family: sans;"> <p style="margin: 0">Kan nu niet bellen. Wat heb je gehoord?</p> <p style="float: right; margin: 0; margin-top: 0.4em;">12:00</p> </div> <p>Daar is weer tekst</p> </body> </html>

09-03-2021, 08:32 PM	#5
Skinkie Member Posts: 16 Karma: 10 Join Date: Aug 2013 Device: Kobo Aura HD	I basically have three options. 1. fix my SVG example that uses text, it blows up in Kobo's RMSDK. 2. find a way to scale a pure-SVG (text becomes paths) with the current line height. I dislike this solution, because it requires magic to become accessible again. It is a solution that works though. 3. accept square boxes, and hope for a better future. (at least on Kobo, on Kindle it does not work at all) Last edited by Skinkie; 09-03-2021 at 08:33 PM. Reason: add kindle

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Border-radius in pdf not working	kghugo	Calibre	1	07-10-2019 03:35 PM
ADE 3.0 and RMSDK 10 released	Doitsu	ePub	14	01-24-2014 12:06 PM
RMSDK	Santanu	ePub	4	05-07-2012 03:02 AM
RMSDK	Santanu	Android Developer's Corner	6	03-17-2012 01:27 AM
Renderer resolution with RMSDK	Mark.Vasconcelos	Android Developer's Corner	1	10-05-2011 05:38 AM

09-03-2021, 01:11 AM	#2
Skinkie Member Posts: 16 Karma: 10 Join Date: Aug 2013 Device: Kobo Aura HD	I think this thread does exactly what I want. But I can't get it to render on the Kobo HD.

09-03-2021, 08:04 AM	#3
Quoth Still reading Posts: 15,004 Karma: 111111255 Join Date: Jun 2017 Location: Ireland Device: All 4 Kinds: epub eink, Kindle, android eink, NxtPaper	It won't work on most physical ereaders. I'm actually amazed the plain box with no radius on the corner seems to work so well, including internal spacing and line width, on physical ereaders. Also "Float" is a dubious property for many ereaders.

09-04-2021, 08:24 AM	#6
Quoth Still reading Posts: 15,004 Karma: 111111255 Join Date: Jun 2017 Location: Ireland Device: All 4 Kinds: epub eink, Kindle, android eink, NxtPaper	Right angle corner boxes work on my Kindles. Conversion from epub2 and import from docx saved from LO Writer. No edit of CSS or HTML. I enabled lines on all four sides of a paragraph style. Line width recognised too.

09-06-2021, 08:53 AM	#14
PeterT Grand Sorcerer Posts: 13,698 Karma: 79983758 Join Date: Nov 2007 Location: Toronto Device: Libra H2O, Libra Colour	Kobo uses two different reading engines; one for Epub and a second for Kobo Epub. The choice of engine is based on the file name. Files ending in .epub are processed by a RMSDK engine, while those ending in .kepub.epub are processed by an Access NetFront based engine. Some info on the Kobo format can be found at https://github.com/kobolabs/epub-spec Screenshots can be enabled via an entry in the kobo.conf file and then taken with the power switch. The simplest way to manage the required change to the conf file is to use nickle Menu. Sent from my Pixel 4a using Tapatalk

09-06-2021, 09:13 AM	#15
Quoth Still reading Posts: 15,004 Karma: 111111255 Join Date: Jun 2017 Location: Ireland Device: All 4 Kinds: epub eink, Kindle, android eink, NxtPaper	And the screenshots are in colour if the content is colour, so not the black, 14 greys and white of the actual display even for monochrome content. You'd want a sleep cover if using the power switch for screenshots. But does the kobo.conf setting work for all FW or models?