MobileRead Forums
Page 1 of 4 1 234
Show 40 post(s) from this thread on one page

MobileRead Forums (https://www.mobileread.com/forums/index.php)
-   Kobo Reader (https://www.mobileread.com/forums/forumdisplay.php?f=223)
-   -   border-radius with RMSDK? (https://www.mobileread.com/forums/showthread.php?t=341557)

Skinkie 09-03-2021 12:11 AM
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>

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 (Post 4151364)
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 (Post 4151457)
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 (Post 4151610)
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 (Post 4151298)
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 (Post 4151846)
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 (Post 4151846)
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
2 Attachment(s)
Quote:
Originally Posted by Skinkie (Post 4151298)
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 (Post 4151984)
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?


All times are GMT -4. The time now is 05:10 PM.
Page 1 of 4 1 234
Show 40 post(s) from this thread on one page

Powered by: vBulletin
Copyright ©2000 - 3.8.5, Jelsoft Enterprises Ltd.
MobileRead.com is a privately owned, operated and funded community.