search

dvschultz / 99problems

99 Problems and e-reader rendering are all of them
60 stars 3 forks source link

Kobo iOS breaks lines after each word on text boxes without explicit CSS width in px, in FXL if body has `position: relative` #49

Closed elmimmo closed 9 years ago

elmimmo commented 9 years ago

In EPUB 3 FXL, if the body element has the CSS property position, its implicit width becomes zero in Kobo iOS. As a consequence, descendants with dimensions relative to the body (be it by having explicit percentage-based dimensions while not contained within another element of dimensions not relative to the body, or by simply inheriting their width from body) inherit too a width of zero. In such case, text boxes break lines after each word.

An XHTML file with this markup:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta name="viewport" content="width=500, height=500"/>
    <meta charset="UTF-8"/>
    <title>A text box without explicit width</title>
    <style type="text/css">
        body{
            width:500px;
            height:500px;
            margin: 0; 
            position: relative;
        }
        .textFrame {
            position: absolute;
            left: 100px;
            top: 200px;
        }
    </style>
</head>
<body>  
    <div class="textFrame">
        <p>Lorem ipsum dolor sit amet,<br/>consectetur adipisicing elit.</p>
    </div>
</body>
</html>

displays correctly in a browser and Kobo for Mac 3.12.0 running on OS X 10.10.3, but not so in Kobo for iOS 7.4 on an iPad 3 running iOS 8.1.3 (not tested on any other Kobo app/device):

kobo for mac kobo for ios pixel-based positioning

Removing the body element's CSS position corrects the issue in Kobo for iOS, but breaks it on desktop browsers[^1]. Providing the text box with an explicit width in an absolute unit (such as px) so that it does not inherit from body makes it work properly in both Kobo for iOS and desktop browsers.

.textFrame {
    position: absolute;
    left: 100px;
    top: 200px;
    width: 300px;
}

kobo for ios pixel-based positioning and width

[^1]: You might have added position: relative along with width and height in px to the body for the purpose of previewing such pages in a desktop browser for editing or QA purposes. Desktop browsers have windows of variable size and disregard the viewport dimensions' declaration. Therefore, descendant elements whose dimensions and positions are percentage-based relative to the body would not display correctly on desktop browsers, unless body has explicit width and height in px and position. Ereaders, having fixed viewport sizes, do not need those, but having them present or not should make not difference for ereaders provided the body CSS dimensions match those of the viewport meta tag.

elmimmo commented 9 years ago

Fixed in Kobo for iOS 7.8