I have this basic XHTML file, with a table that displays images in the first column (images size is roughly 64x64 pix) and some text in the second column.
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops">
<head>
<link href="../Styles/style.css" rel="stylesheet"/>
</head>
<body>
<table>
<tbody>
<tr>
<td><img src="../Images/A.png"/></td>
<td><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sapien tortor, malesuada convallis mi quis, mattis porta eros. Integer sed massa et felis aliquam interdum eget sed massa. Vestibulum luctus, lacus in posuere consectetur, neque orci maximus lectus, tristique aliquam tortor nulla id lacus. Sed tempor auctor felis at vulputate. Duis euismod, metus sed hendrerit blandit, sem tortor laoreet lorem, non feugiat quam nunc condimentum erat. Vestibulum sit amet laoreet est, vel sollicitudin urna. Aliquam erat volutpat. Pellentesque sodales tincidunt turpis eget sollicitudin. Nunc et tincidunt ligula, at tristique orci. Praesent ut congue mauris. Praesent non metus ut libero sagittis hendrerit et ac dui. Donec eget ultricies risus, quis euismod massa.</p></td>
</tr>
<tr>
<td><img src="../Images/D.png"/></td>
<td><p>Donec pretium dapibus felis at vestibulum. Morbi posuere mauris ac facilisis sollicitudin. Praesent iaculis mauris molestie ante cursus, sit amet ornare velit viverra. Cras dictum sollicitudin erat, mollis tempus orci hendrerit sit amet. Mauris orci nunc, sodales ut metus sit amet, pretium posuere velit. Mauris elementum, dolor ut laoreet faucibus, neque purus fringilla urna, vel tristique lacus odio sit amet purus. Suspendisse eget ultricies libero. Sed a semper augue. Morbi ac ligula ut nibh ornare eleifend nec ut nisl. Quisque ut rhoncus odio. </p></td>
</tr>
</tbody>
</table>
</body>
</html>
Opening the file in a browser, images in the first column are displayed full size. If I shrink the window, or force tablet/smartphone view in the browser, images are still displayed full size.
I added the file to an epub. Opening it with an ebook reader (Calibre default one) I see everything like in the browser (i.e. full size images).
I've uploaded the epub on my erader device (an old Kobo Touch). Here images are shrinked to a very small size.
Why is this happening?
Could it be an ereader problem? Likely. Any HTML/css trick to force full size?
I've tried to add this to the css file
table img {
height: 100%! important;
}
Still no luck, the images are shrinked.
Related
Problem
I am working on a project in which I need to convert HTML to a PDF. I am doing this simply with the browsers print capabilities. The problem came when I added headers and footers to my document using the method described here.
In my document I am also using css columns, and for some reason, only when there is at least one full column AND less than one page of content being printed, it adds a blank page at the beginning and end of the document leaving me with 3 pages. This is not ideal as I am aiming to automate this process in the future and having extra blank pages with just the header and footer being printed is not acceptable.
I initially thought there must be some invisible margin causing the blank pages to be added, but as soon as it gets to more than one page of content the blank pages disappear and the output is as expected.
I am not proficient with CSS at all so if someone has any insight as to why this is happening, and preferably how I can solve it, I would be very grateful to hear it.
Here is the HTML and CSS which causes the extra blank pages when printed. To see how it reverts back to normal, just add more content to the page div so that it creates more than one page of content.
EDIT: To see the problem you'll have to run this code in the firefox browser since chrome doesn't support the column-fill property meaning the columns will be balanced and none of them will be filled.
.page-header, .page-header-space {
height: 100px;
}
.page-footer, .page-footer-space {
height: 50px;
}
.page-footer {
position: fixed;
bottom: 0;
width: 100%;
border-top: 1px solid black; /* for demo */
background: yellow; /* for demo */
}
.page-header {
position: fixed;
top: 0mm;
width: 100%;
border-bottom: 1px solid black; /* for demo */
background: yellow; /* for demo */
}
.page {
page-break-after: always;
columns: 3;
column-fill: auto;
}
#page {
margin: 20mm
}
#media print {
thead {display: table-header-group;}
tfoot {display: table-footer-group;}
button {display: none;}
body {margin: 0;}
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="page-header" style="text-align: center">
I'm The Header
<br/>
<button type="button" onClick="window.print()" style="background: pink">
PRINT ME!
</button>
</div>
<div class="page-footer">
I'm The Footer
</div>
<table>
<thead>
<tr>
<td>
<!--place holder for the fixed-position header-->
<div class="page-header-space"></div>
</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<!--*** CONTENT GOES HERE ***-->
<!-- <div class="page">PAGE 1</div>
<div class="page">PAGE 2</div> -->
<div class="page" style="line-height: 1;">
PAGE 3 - Long Content
<br/> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tincidunt metus eu consectetur rutrum. Praesent tempor facilisis dapibus. Aliquam cursus diam ac vehicula pulvinar. Integer lacinia non odio et condimentum. Aenean faucibus cursus
mi, sed interdum turpis sagittis a. Quisque quis pellentesque mi. Ut erat eros, posuere sed scelerisque ut, pharetra vitae tellus. Suspendisse ligula sapien, laoreet ac hendrerit sit amet, viverra vel mi. Pellentesque faucibus nisl et dolor
pharetra, vel mattis massa venenatis. Integer congue condimentum nisi, sed tincidunt velit tincidunt non. Nulla sagittis sed lorem pretium aliquam. Praesent consectetur volutpat nibh, quis pulvinar est volutpat id. Cras maximus odio posuere
suscipit venenatis. Donec rhoncus scelerisque metus, in tempus erat rhoncus sed. Morbi massa sapien, porttitor id urna vel, volutpat blandit velit. Cras sit amet sem eros. Quisque commodo facilisis tristique. Proin pellentesque sodales rutrum.
Vestibulum purus neque, congue vel dapibus in, venenatis ut felis. Donec et ligula enim. Sed sapien sapien, tincidunt vitae lectus quis, ultricies rhoncus mi. Nunc dapibus nulla tempus nunc interdum, sed facilisis ex pellentesque. Nunc vel
lorem leo. Cras pharetra sodales metus. Cras lacus ex, consequat at consequat vel, laoreet ac dui. Curabitur aliquam, sapien quis congue feugiat, nisi nisl feugiat diam, sed vehicula velit nulla ac nisl. Aliquam quis nisi euismod massa blandit
pharetra nec eget nunc. Etiam eros ante, auctor sit amet quam vel, fringilla faucibus leo. Morbi a pulvinar nulla. Praesent sed vulputate nisl. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean commodo
mollis iaculis. Maecenas consectetur enim vitae mollis venenatis. Ut scelerisque pretium orci id laoreet. In sit amet pharetra diam. Vestibulum in molestie lorem. Nunc gravida, eros non consequat fermentum, ex orci vestibulum orci, non accumsan
sem velit ac lectus. Vivamus malesuada lacus nec velit dignissim, ac fermentum nulla pretium. Aenean mi nisi, convallis sed tempor in, porttitor eu libero. Praesent et molestie ante. Duis suscipit vitae purus sit amet aliquam. Vestibulum lectus
justo, lobortis a purus a, dapibus efficitur metus. Suspendisse potenti. Duis dictum ex lorem. Suspendisse nec ligula consectetur magna hendrerit ullamcorper et eget mauris. Etiam vestibulum sodales diam, eget venenatis nunc luctus quis. Ut
<!-- fermentum placerat neque nec elementum. Praesent orci erat, rhoncus vitae est eu, dictum molestie metus. Cras et fermentum elit. Aenean eget augue lacinia, varius ante in, ullamcorper dolor. Cras viverra purus non egestas consectetur. Nulla
nec dolor ac lectus convallis aliquet sed a metus. Suspendisse eu imperdiet nunc, id pulvinar risus. Maecenas varius sagittis est, vel fermentum risus accumsan at. Vestibulum sollicitudin dui pharetra sapien volutpat, id convallis mi vestibulum.
Phasellus commodo sit amet lorem quis imperdiet. Proin nec diam sed urna euismod ultricies at sed urna. Quisque ornare, nulla et vehicula ultrices, massa purus vehicula urna, ac sodales lacus leo vitae mi. Sed congue placerat justo at placerat.
Aenean suscipit fringilla vehicula. Quisque iaculis orci vitae arcu commodo maximus. Maecenas nec nunc rutrum, cursus elit quis, porttitor sapien. Sed ac hendrerit ipsum, lacinia fringilla velit. Donec ultricies feugiat dictum. -->
</div>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>
<!--place holder for the fixed-position footer-->
<div class="page-footer-space"></div>
</td>
</tr>
</tfoot>
</table>
</body>
</html>
This question already has answers here:
How to make <div> fill <td> height
(6 answers)
Percentage Height HTML 5/CSS
(7 answers)
Closed 2 years ago.
I'm trying to make a TABLE with table-layout:fixed be as high as the viewport; and have some large div in a cell that is scrollable.
This works ine in chrome; however; I can't seem to get it so work in Firefox.
See also this fiddle: https://jsfiddle.net/kw09ncjx/
HTML (all inline)
<!doctype html>
<html style="height:100%">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
</head>
<body style="height:100%; padding:0; margin:0">
<table style="table-layout:fixed; width:100%; height:100%; border-collapse:collapse">
<tr style="height:100%">
<td style="width:150px; vertical-align:top">
<div class="content">left too mucht text oh
noooz
</div>
</td>
<td>
<div style="width:100%; height:100%; overflow: auto;">
<div style="height:1600px; white-space:nowrap">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras fringilla leo et tellus
tempus, vitae gravida elit convallis. Donec porta luctus nulla non iaculis. In felis
ligula, volutpat sed neque sit amet, fermentum porttitor felis. In eget semper dui.
Proin ac mollis massa, eu tincidunt enim. Fusce et urna dapibus, elementum risus eget,
tempor quam. Cras sed enim sit amet lacus feugiat interdum a vel enim. In in leo
ullamcorper, dapibus augue quis, mollis enim. Nulla feugiat tortor eget nisi sodales
tempus eget eu felis. Nam sit amet lacus erat. Ut metus magna, fermentum eu metus vitae,
scelerisque semper turpis. Sed varius gravida nisi eu pellentesque. Etiam convallis
dapibus eleifend. Nam rutrum blandit turpis non ornare. Proin interdum lorem et augue
ultricies venenatis. Morbi dolor dolor, mattis et fermentum eget, varius non ipsum.
<br>
Sed ut dignissim ex. Curabitur convallis est eu dui maximus feugiat. Mauris interdum,
justo ac porta tincidunt, magna metus efficitur orci, eu vestibulum lectus ligula
iaculis nunc. Vestibulum accumsan ullamcorper egestas. Aliquam erat volutpat.
Suspendisse eget ultricies diam, nec luctus libero. Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Praesent venenatis nibh non dui ullamcorper, at vestibulum
orci semper. Aenean metus felis, lobortis at nisl nec, iaculis convallis erat. Phasellus
eu ultricies elit. Suspendisse vitae varius enim. Donec eget ante feugiat, egestas eros
at, bibendum ligula. Nullam in rutrum quam. Suspendisse sit amet metus accumsan diam
pellentesque rhoncus. Aenean dignissim, odio tincidunt dictum sollicitudin, nulla nibh
tincidunt eros, vitae cursus erat elit vel tortor.
<br>
Duis vitae faucibus nisi. Nulla facilisi. Phasellus vitae dui lectus. Quisque vehicula
sit amet augue eget posuere. Cras tincidunt fringilla massa vitae tristique. Donec
semper odio ut tempus venenatis. Sed euismod malesuada nunc, pharetra interdum augue
porta aliquet. Phasellus eu ex vel felis bibendum auctor. Donec dapibus, dui vitae
ornare pharetra, lorem felis egestas mi, non convallis quam enim et neque. Curabitur eu
felis eu nisi aliquam varius vitae ut erat. Nulla porta, odio sit amet commodo vehicula,
erat eros tincidunt quam, eget lobortis est diam quis ipsum. Proin rhoncus magna a urna
varius mollis. Nam ultricies sapien condimentum, scelerisque lorem nec, tristique risus.
Duis eleifend nunc vel suscipit laoreet.
<br>
</div>
</div>
</td>
<td style="width:40px; background-color: #ccc">
right
</td>
</tr>
</table>
</body>
</html>
It is just a problem that exists in firefox? Or am I doing something that causes undefined behaviour?
It seems that mobile selection on iOS devices does not work correctly when text is contained within an iFrame that is offset (padded, margined) from the top of the page.
In the example below, if one opens the page: https://viking2917.github.io/mobileselectionbug/
on an iOS mobile browser, and them tap-and-hold on the word "amet" in the first line to select it, then attempt to expand the selection by dragging the text selection drag handles, the drag handle will immediately jump down to near the bottom of page, and if you drag it around you will see the drag handle is offset from your finger (looks like by the amount the iFrame is offset from the top of the page).
The HTML to reproduce this (hosted at the link above):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, user-scalable=no">
</head>
<body>
<div>
<div>
<div style="height: 200px;"></div>
<iframe srcdoc="<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dignissim neque nec ante suscipit semper. Sed sit amet rutrum metus, in mattis ante. Quisque at nunc tellus. Maecenas ut rhoncus erat, sit amet ultricies augue. Aliquam et consectetur mauris. Pellentesque porttitor accumsan pretium. Vivamus risus lorem, varius in laoreet vel, interdum nec metus. Nam gravida vehicula lorem at lobortis. Curabitur sit amet libero ut nulla fermentum volutpat sed at mauris. Ut mollis at tellus vel tincidunt. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer lacinia iaculis odio, sed tincidunt massa accumsan a. Aliquam arcu urna, ullamcorper sagittis nunc eu, facilisis tempor felis. Ut fermentum justo in risus ullamcorper, tempus viverra neque venenatis. Aenean lectus sapien, interdum ut congue non, hendrerit sed diam. Suspendisse ante tellus, luctus eget ex eu, faucibus porttitor nulla.</p><p> Aliquam iaculis placerat tincidunt. Donec justo ligula, dictum ac volutpat accumsan, molestie eu est. Pellentesque lectus est, elementum sed finibus non, scelerisque a nunc. Cras id ornare turpis. Quisque consequat erat turpis. Vestibulum ut nulla feugiat, pretium eros et, dignissim nisi. Sed et finibus turpis. Morbi viverra vulputate lacus.</p><p>Sed in lorem laoreet, gravida metus nec, cursus nunc. Proin dignissim elit id urna imperdiet commodo. Nullam laoreet elementum risus vel tristique. Praesent aliquam ante id nibh condimentum, in semper lectus porta. Proin commodo leo sit amet finibus consectetur. Nam posuere lorem elit, at eleifend odio lobortis nec. Aenean ultricies tellus nec nunc porta, id hendrerit dui malesuada. Aliquam vel lacus feugiat tellus fermentum sollicitudin. Suspendisse consectetur ipsum ac ligula tincidunt molestie. Aenean vel ex eget justo pretium sodales eu sed lectus. Quisque malesuada rutrum tincidunt. Cras sit amet massa pulvinar, fermentum ante in, tristique diam. Etiam nec semper mauris. Donec ultricies purus ut est scelerisque eleifend imperdiet accumsan mi.</p>">
</iframe>
</div>
</div>
</body>
</html>
I can't see that I'm doing anything wrong, any ideas?
Really feels like a browser bug. This is broken on mobile Chrome, Safari and Firefox.
This is an iOS/Safari bug. The fix is in the beta for 12.2, to be released at some point. Details here: https://bugs.webkit.org/show_bug.cgi?id=193663
I would like to layout a webpage as sketched in the image:
The main text (a series of div elements) is supposed to go in a main column. I do have occasional images and remarks that relate to the text but with which I don't want to interrupt the actual text flow.
How can I position a given image or "remark" text box to the right of a given div element in the main column?
In the following minimal example, how would I put the img element just to the right of the second div element?
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Pellentesque eu condimentum ligula. Fusce sollicitudin quam ornare,
pharetra lorem quis, luctus erat. Nulla convallis velit magna, sit
amet semper erat cursus sed. Praesent non turpis id lectus aliquet
vestibulum. Donec non leo venenatis, commodo dolor eget, facilisis
turpis. Donec dapibus scelerisque orci vel molestie. Vestibulum ut
elit a arcu interdum tempor ut scelerisque enim. Duis maximus ex sit
amet elit scelerisque, ultricies feugiat mauris feugiat. Morbi non
egestas arcu, at semper massa. Ut feugiat metus eget nulla porttitor
lobortis. Praesent lorem lacus, finibus quis blandit a, iaculis sed
mauris. Vivamus aliquam molestie ex, a lacinia erat faucibus non.
Donec scelerisque neque ac ante interdum, vel varius justo tincidunt.
Quisque ultricies nulla in nisi facilisis, et accumsan libero imperdiet.
</div>
<div>Curabitur imperdiet at diam eget rhoncus. Aenean pretium magna
quis sodales ornare. Sed vitae vehicula nisi. Nulla a tristique lectus.
Nam rutrum ut libero viverra porta. In rhoncus leo et mi luctus, at
osuere est commodo. Vestibulum fringilla luctus mi, in consectetur sem
semper non. Phasellus ac augue et purus vulputate suscipit.
Pellentesque tempus imperdiet urna non convallis. Quisque finibus elit
magna, nec finibus ipsum ornare vitae. Vestibulum id sapien est. Maecenas
in mauris sit amet orci facilisis bibendum id sed ante. Vestibulum at
egestas justo. In nibh ex, ullamcorper sit amet urna vel, molestie mattis
tortor. Ut vel felis dolor.
</div>
<img src="img.png"/>
The easy way is to add calc width (for example 100% - 100px for 100px wide column right):
.leave-space-form-right {
width: calc(100% - 100px);
float:left;
}
.put-element-on-right {
float:left;
}
Here is an example:
https://jsfiddle.net/txdue3n0/6/
I have some data on my screen in table form, and the width of the table is set to 500px. This looks identical in both IE8 and Chrome.
However, when I print this screen using Chrome, the print looks identical to what you see on the screen, i.e. the number of characters per line and the number of lines.
When I print it from IE8, the number of characters per line and the number of lines does not match when is seen on the IE8 screen.
Why is this happening and how do I get the printed output to match the screen output?
Here is the HTML table:
<table id="test-table" width="500px">
<tr>
<td>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum porttitor, nunc sit amet aliquet sodales, enim nisi malesuada magna, eget auctor arcu urna eu nisi. Etiam gravida faucibus mauris in bibendum. Cras eu elit eget leo porttitor scelerisque nec eget eros. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque accumsan tellus dolor, quis convallis massa placerat ac. Donec eros metus, ornare eu risus ac, malesuada fermentum nibh. Integer facilisis ut velit a adipiscing. Maecenas in eleifend mi. Nullam feugiat pulvinar mauris. Duis ligula purus, fringilla et pretium egestas, scelerisque vitae dui.
</td>
</tr>
<tr>
<td>
Nunc suscipit et neque ac fermentum. Nam condimentum sit amet mauris eget consequat. Aenean gravida cursus ante, id ultricies eros suscipit nec. Pellentesque viverra velit faucibus diam gravida aliquet. Etiam vehicula massa nunc, sed accumsan quam mattis sit amet. Vivamus id ornare quam. In facilisis accumsan sodales. Morbi aliquet, augue in feugiat vulputate, sem neque ultricies mauris, quis facilisis risus dolor at ante. Duis dignissim lacus cursus mauris pulvinar cursus. Sed sed libero sed quam tincidunt euismod at sed mi. Nunc nec consectetur dolor. Quisque et accumsan neque.
</td>
</tr>
</table>
You can use the css media query for print to style how the printed version looks:
#media print {
/* your styles here*/
}