Image CSS not changing for iPad kindle from MOBI KindleGen - css

I'm writing an ebook in HTML and converting to MOBI with Kindlegen. I want to make sure the images never take up the whole page. However some images are doing just that.
I've tried multiple CSS styles but nothing seems to change. I'm testing on Kindle Previewer, iPhone X, kindle paper white (older device) and iPad. All these devices seem to react to CSS differently and the iPad seems to completely ignore my image styles. No matter what I set the iPAD images don't change. How can I make sure the images are never too large? I want the image to be small enough so that text is also on the same page. Ideal never larger than about 30% of the screen.
I've tried setting a percentage
width: auto;
height: 30%;
and setting em
width: auto;
height: 20em;
I get an error from Kindlegen if I use max-height
.image {
width: auto;
height: 30%;
}
.centerImg {
text-indent: 0;
margin: 1em 0 0 0;
padding: 0;
text-align: center;
}
<!-- Page 29 -->
<p class="centerImg">
<img class="image" alt="lock" src="images/page29.jpg" />
</p>
<p class="collector">
Text
</p>
<br />
<p class="description">
Text
</p>
<div class="pagebreak"></div>
What's the best way to do this?

CSS with ebooks on Amazon can be a bit daunting. I've even seen major bestsellers where the layout didn't work out as intended. Although I've never gotten an ebook to look exactly the same across all devices, I have been able to size my images satisfactorily. I use the free program Sigil for editing, then convert to .mobi with Calibre.
Because CSS can be so unreliable on ebooks, I sized the image in the HTML itself:
<div align="center"><img height="148" src="../Images/stars-300.jpg" width="200"/></div>
<br/>
<h1 class="cinz" id="sigil_toc_id_21">-21-</h1>
<br/>
<h1 class="toocinz sigil_not_in_toc">Between Worlds</h1>
Below is an image of the above code on Kindle Paperwhite. On the iPad, the image is a bit smaller, and some of the spacing is different, but it looks close enough. Another trick I've used to 'force' the ebooks to use your styling, is to use two CSS stylesheets. The first one simply refers to the second, "real" one. This can get around some of the default styles that override custom styles. I'm not sure how well it's worked, but it hasn't hurt:
Style0001.css has only this line:
#import url(../Styles/Style0002.css);
Style0002.css is where all my actual styling is. All my book pages link to the first stylesheet:
<link href="../Styles/Style0001.css" rel="stylesheet" type="text/css"/>.

Related

How to use an SVG logo in a web application?

My web application is only required to support modern browsers (IE starting at 10). But it has to be fully responsive, so it should look good on all possible display sizes and resolutions.
It has the standard logo in the upper left corner, which is linked to the start page. I want to use an SVG logo, which should look good at any resolution. At first, I had the logo in a normal <img> tag, with height and width specified in css.
<a href="#Url.Action("Index", "Home")" id="Home">
<img id="logo" src="~/Content/images/mitoLogo.svg" />
</a>
#logo {
height: 3em;
width: 9em;
margin: 0.3em 1.5em 0.3em 0.2em;
}
Sadly, IE cannot work with that and clips the logo instead of stretching it to the given size. So I looked around and found this suggestion for placing an SVG image in a page. What I have now is
<div id="logo">
<a href="#Url.Action("Index", "Home")" id="Home">
<object height="100%" width="100%"
data="~/Content/images/mitoLogo.svg" type="image/svg+xml">
</object>
</a>
</div>
This displays the image properly in both IE and Firefox (haven't tried other browsers yet), but the link only works in IE. Neither in IE nor in Firefox does the cursor change to a clicking hand, and FF with AdBlockPlus shows a "block" suggestion on hover, possibly because this is an object tag.
Is there a way to display the SVG image correctly everywhere, while preserving its link function? I'm not limited to css, but can do radical changes to the markup, if needed, and I can also change the SVG source.
I played with your initial code a bit and got it working... it seems that you need to only set the width as a percentage and it will scale the height appropriately.
#logo {
width: 25%;
}
Try changing the percentage and adjusting the result window size in the JSFiddle Demo
I tested it in IE10 (+ IE9 in the emulator) and Chrome and it worked exactly as expected.

Need image to automatically resize to browser window in IE 8

I created some pages to display a simple picture gallery, just the picture in the middle with next and back to click on either side of it. The picture sizes average about 800X1050, which fit great on my 1920X1200 monitor. What I needed was a way to automatically resize the picture to the browser height for use on smaller monitors, and I managed to get that to work after much searching on this site and others. I tested this on my wife's laptop and was happy with the results. However, when I tested it at work on our IE8 browsers (don't ask me why...), it doesn't work. Some of the people I will be sharing this gallery with will have to view it on our woefully outdated computers, so I've been trying the past couple of days to get it work and I can't. Here's the sample code I currently have for each of the gallery pages. There could very well be some unnecessary / redundant bits as I cobbled this together from many sources. Any help for this problem, and possibly even any improvements would be greatly appreciated!
<html>
<title>Picture Gallery</title>
<head>
<style>
.numbering {
vertical-align: top;
}
img {
max-height: 100%;
vertical-align: middle;
}
</style>
</head>
<body bgcolor="silver">
<center>
<img src="10.png" class="numbering">
<img border="0" src="back.png">
<img src="picture.jpg">
<img border="0" src="next.png">
<img src="spacer.png" class="numbering">
</center>
</body>
</html>
As the Max-width property works in ie8, Use width: inherit; to make it work with pure CSS in IE8.
like this
img {
width: inherit; /* This makes the next two lines work in IE8. */
max-width: 100%; /* Add !important if needed for the code to work. */
height: auto; /* Add !important if needed. for the code to work */
}

Div element size changes when printing in Chrome

I'm writing a page that is meant to be printed and styling is different from the rest of the pages in my application. Essentially I'm trying to create a wallet card with login information for a user to print out, cut, and keep with them.
I've only tried printing my login card with chrome and IE. IE get's it perfectly but chrome unfortunately makes the card too big. Not sure if it matters (I'm not a CSS expert) but I tried using different units; inches, pixels, and points.
When I use the developer tools in chrome, I see that the pixels are calculated correctly. I checked that to see if the browser was adding additional padding inside the div.
Here's what I have for the login card elements.
<div id="divLoginCard">
<div id="divLoginCardHeader">
<h3>User Login - <span id="spnUserName"></span></h3>
</div>
<div id="divLoginCardContent">
<div class="fieldRow">
<span class="fieldLabel">Website:</span>
<span class="fieldValue">http://www.xxx.zzz</span>
</div>
<div class="fieldRow">
<span class="fieldLabel">ID:</span>
<span class="fieldValue" id="spnUserID"></span>
</div>
<div class="fieldRow">
<span class="fieldLabel">Contact's Name:</span>
<span class="fieldValue" id="spnContactsName"></span>
</div>
</div>
</div>
Here is my CSS styling. I'm trying to achieve a physical size of 3.5" x 2" which is a standard US business card size.
#divLoginCard
{
margin:0 auto;
width:252pt;
height:144pt;
border-style:dashed;
border-color:gray;
}
#divLoginCardHeader
{
text-align:center;
}
#divLoginCardContent
{
margin-left:25px;
margin-right:15px;
padding-top:15px;
}
.fieldRow
{
margin-bottom: 3px;
display: table;
width: 100%;
}
.fieldLabel
{
font-weight: bold;
width: 96px;
text-align: left;
display: table-cell;
}
.fieldValue
{
min-width: 100%;
display: table-cell;
word-wrap: break-word;
width: 200px;
}
body
{
font-family:Arial;
}
Naturally, I would prefer to have a cross browser solution for this where I don't have to use a lot of browser specific style rules but that may not be possible in this case.
Do I need some sort of CSS reset in order to properly size this for printing with any browser?
UPDATE
Chrome renders my html as a PDF document when it is printed. I noticed that the print dialog in chrome is simply a modal window on top of the page. I checked out the elements in developer tools and the print preview is a pdf document. The html provides the source URL (chrome://my_path/print.pdf) which is the full document that is printed by a printer.
SO, long story short; my issue seems to be how chrome renders my html as pdf. Is there a way to control how it renders the html or maybe some chrome friendly CSS that I could use?
Try the #media print specification in your CSS. Chrome is probably overriding your on-screen CSS with print CSS that sizes the elements to fit the printed page.
#media print {
/* put your fixes here */
}
I think this is more likely to be the issue than that Chrome is translating to pdf.

H1 image replace alternative

I'm looking to add an h1 element to my header, however I am using tags in the header (not background images) that replace each other when the screen resolution changes.
I've looked at the technique
<h1 class="technique-four">
<a href="#">
<img src="images/header-image.jpg" alt="CSS-Tricks" />
</a>
</h1>
h1.technique-four {
width: 350px; height: 75px;
background: url("images/header-image.jpg");
text-indent: -9999px;
}
...but since my layout is fluid, the background can be seen when the image changes.
Is it even necessary to replace the h1 with an image? couldn't I just do something like:
<h1 class="headerhone">kb-k bwf-kb</h1>
<img src="<?php bloginfo('stylesheet_directory'); ?>/images/720.jpg" class="show-on-phones"/>
<img src="<?php bloginfo('stylesheet_directory'); ?>/images/980_full.jpg" class="hide-on-phones"alt=""/>
(ignore the php)
and then give h1 a height of zero:
h1.headerhone{
height:0px;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
} /*this was suggested to me as an alternative to the -9999px; thing.*/
would this work? Would it have any negative SEO implications or usability issues?
In the second solution, on a screen reader, your h1 content will be "kb-k bwf-kb" and the screen reader won't understand the alt property of the following image is in fact your h1.
For Google, this second solution'll seem you want to hide content in h1 tag : bad.
A visual example would be useful, I don't understand all you want to achieve.
Google has never had anything positive to say about hiding text and using images in <h1> tags so I always hesitate to recommend that as a solution. Your last technique would almost certainly fall under serving up different content to search engines so I also recommend against it.
Your second idea is on the right track though. What you want to do is use responsive design to determine the width of your layout and adjust the image accordingly. In fact, Google has been writing a lot about it in their blog lately. I highly recommend learning how to do it.

How to fix some issues with printing very basic HTML

I have some very simple HTML:
<div id="advisor">
<div id="print_this_container">
<form>
<input type="button" value=" Print this page "
onclick="window.print();return false;" />
</form>
</div>
<div id="top_section">
<div class="left_box" style="position: relative;">
<div id="avatar_container">
<img class="avatar" src="<%= #advisor.avatar_url %>" />
</div>
</div>
<div class="right_box">
<h2><strong>Council on Emerging Markets</strong></h2>
</div>
</div>
</div>
The associated CSS is:
#advisor{
width: 800px;
}
#top_section{
border-bottom: 1px solid #666 !important;
height: 200px;
}
.right_box{
float: left;
padding-left: 25px;
padding-top: 50px;
width: 550px;
}
.left_box{
background: #ccc;
width: 200px;
float: left;
text-align: center;
height: 100%;
}
img.avatar{
width: 150px;
}
And in my print.css
#advisor{
width: auto;
}
#print_this_container{
display: none;
}
It looks great in my web page. However, when I print it the following issues occur:
The top section border disappears
The image shrinks
The right box is displayed under the
left box, it does not float
The left box background color
disappears
Does anyone know how to fix these issues?
There are a number of problems with printing from within a browser. A lot of the printing-specific stuff doesn't work on most browsers and even where it's supported by multiple browsers, it is handled differently
We've jsut spent two weeks trying to print labels using a browser - in the end, we've gone for multiple solutions which fail as gracefully as possible...
Firstly, we detect silverlight and flash - if either is present, we use them to print.
Next, we have a piece of code which loads a web browser in memory on the server and takes a screenshot of the page at a specific URL - this generates an image which we then return to the client for printing. This is okay for our scenario but you might want to check mem usage/etc. for high volume sites.
Some things we've found: Page margins are a REAL pain (especially for labels!). It seems that only certain versions of Opera will allow you to modify page margins from CSS
Background images and colors aren't usually printed by browsers (to save ink) - There's an option in most browsers to enable printing BG.
In firefox look in about:config
print.printer_<PrinterName>.print_bgcolor
print.printer_<PrinterName>.print_bgimages
In IE I think it's under File->Page Setup...
Obviously, neither of these help you much as they can't be set by the site itself - It depends who the users are going to be whether or not you can ge tthis set intentionally. Failing that, you might try using a normal non-background image placed behind your content?
In my experience float doesn't work on printing - However, it's been a while since I've tried and it's possible this will now work as long as you provide an explicit width for your page (100%?) at present, I think most browsers use shrink-to-fit as default on print media.
Page width is another interesting one - I've only found very limited "width" properties that seem to work - at one point I almost resorted to tables. So far percentages seem to work fine, auto doesn't.
Try having a look Here and Here for some solutions and Here for a browser compatability chart

Resources