i have an jpg where the height is larger than a regular 8.5x11 piece of paper (the height is around 2000px)
here is the link
http://i39.tinypic.com/121d7ur.jpg
so obviously when you try to print this picture its going to print on more than 1 piece of paper ....however when i try to print the page (or even go to print preview)...it only shows half the image on the first page....but there is no second page?...there should be a second page to show the rest (or even a 3rd page)
if i use FF there is no problem...it prints on 3 pages....but with IE 7 i'm limited to just printing 1 piece of paper.
i have right right clicking on the image itself within IE7 and clicking "print this image" and still no luck.
anyone have a solution for this?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Blank XHTML 1 Transitional Page</title>
<style>
#media print {
html { height: 100%; }
img { height: 100%; }
}
</style>
</head>
<body>
<img src="bigimage.jpg" />
</body>
</html>
EDIT: Sorry, didn't initially realize your image was too TALL rather than too WIDE. To reduce the image height whilst maintaining aspect ratio, use CSS to set both HTML and IMG to have a height of 100% - see modified example.
I know this probably isn't the answer you are really looking for, but if you are intending on the users printing the image, I would consider putting it into a PDF. That way it will always print the same, everytime for everyone.
Try wrapping the image in a div, in the div css apply the following:
image_wrapper {*height:1%; position:relative}
The star/* selector should limit to IE, this is a variant of the holly hack.
Related
I have a page where the <title> tag contains some text (specifically: the department name) that screen readers do not pronounce very well (the department's name is ‘AskHR’ -- it’s the HR department’s helpdesk).
I want to provide screen readers with a more pronounceable version (‘Ask H R’) whilst keeping the more stylised version for visual display. I was thinking of using aria-label to achieve this, but I’m uncertain whether it can be applied to the <title> element in the <head>.
Can anyone confirm whether or not this is valid?
I don't think this is valid.
First not all screen readers are made equal!
What you're trying to do may work in some but not in others. For example VoiceOver reads out "AskHR" as you would expect. (And ignores the aria-label attribute.)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title aria-label="xxx">AskHR</title>
</head>
<body>
<button aria-label="close">X</button>
</body>
</html>
I think this is perhaps closer to what you're trying to do but support is limited:
.label {
speak-as: spell-out
}
See https://developer.mozilla.org/en-US/docs/Web/CSS/#counter-style/speak-as
If we inspect the example above in Chrome, you see this for the <button> element:
The aria-label attribute takes over the button content. VoiceOver reads out "close" instead of "x".
However this is what we see for <title>:
i have a pdf form that i need to be able to import as a background then use Dompdf to overlay html/text.
can this be done?
thanks
Dompdf is a library for converting HTML -> PDF. I'm no expert on that particular library but as far as I can tell it doesn't do things like overlaying html/text.
PDF cannot be imported into HTML because it isn't an HTML format and it isn't an image. There might be a parser library somewhere (e.g. http://www.pdfonline.com/easyconverter/sdk/pdf-to-html/), but without your own fairly extensive work you wont get that PDF document to be displayed in HTML.
HOWEVER, you CAN use something like this, it'll show your PDF document as the background, create a div that covers the screen just above the PDF document to make it non-interactive, then you can put all your contents above that. Note that there will be controls showing on the sides which as far as I know can't be prevented since they're provided by the browser when displaying a PDF file (you could use some fancy JS/CSS to prevent it I'm guessing but I don't know exactly how off the top of my head).
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PDF as background</title>
</head>
<body>
<iframe src="http://unec.edu.az/application/uploads/2014/12/pdf-sample.pdf" style="width: 100vw; height: 100vh;position:absolute;top:0;z-index:0;"></iframe>
<div style="position:fixed;width:100%;height:100%;z-index:1"></div>
<div id="content" style="position: absolute;top:50%;left: calc(50% - 4cm);z-index:2">
<h1 style="font-size:20px;background:#00ff00;">I am on top of the PDF document!</h1>
</div>
</body>
</html>
Do you have to insert an image into the DOM to get its dimensions?
Yanick and many others say yes, add the img to the dom off screen to get its dimensions (after it is loaded).
Alex, Nickf and others say no, you can create an img element that is not added to the dom. Its image will then be loaded and sized.
Which opinion is right for "modern" browsers? Are there any tests which cover this question. Is this behavior by design for the browsers?
ADDED: I'm looking for a source / reference that confirms this behavior. I already have code examples a plenty.
Try this:-
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>answer</title>
</head>
<body>
<script>
var img = new Image;
img.onload = function(){alert(img.width);};
img.src = "image.png";
</script>
</body>
</html>
Which will alert the image width (assuming there is an image called image.png in the same folder as the file containint this htlm).
There's no need to add the element to the DOM to get those properties from it - just create the <img> element and the dimensions will be accessible in JS.
I've been making websites for a few years now, but only recently have I started using the html5 doctype and today I discovered the behaviour where a padding-bottom of 4px is added to images.
The padding disappears if you change the doctype to xhtml1.0
here is the simple example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Technic-Al</title>
<style>
html, body {
margin:0;
padding:0;
}
#contain {
width: 900px;
background-color:#6C0;
}
</style>
</head>
<body>
<div id="contain">
<img src="images/head.gif" width="900" height="100" border="0" alt="head">
</div>
</body>
</html>
changeing the doctype to any of the others removes the bottom-padding (green from the background)
Quite a few people have come on here to suggest the fix
line-height=0
I believe there is another fix that works as well.
Or should I say "work-around"
but surely this is a bug with the html5 doctype?
who do we speak to about it?
who deals with a bug like this?
how do we get it fixed?
Does anybody here know how to get this fixed?
It's not a bug, it's what the CSS spec says should happen. It's not HTML5 specific, the HTML 4.01 strict and XHTML 1.0 strict doctypes will do the same thing.
It's not padding - it's the consequence of the computed height of the line box.
There's no hope of getting it changed, Too many web pages depend on the existing behaviour.
The appropriate authority for this is the W3C CSS working group.
I had an issue where page was showing padding in bottom of page
img { display:block ; }
writing above in css file solved my problem. Hope this help
Use the vertical-align property in your css :
img{
vertical-align:top;
}
Imagine a fairly simple HTML document
<!DOCTYPE HTML >
<html>
<body>
<table> <tr> <td> This is a test </td> </tr> </table>
</body>
</html>
where we are applying this css
body {background-color: ffffff;
font-size:100px;
font-style: normal;
font-family: MankSans,Arial,Helvetica, sans-serif;
}
In every single modern browser out there the font properties will apply. in my WebView however, they wont.
Looking around I found out that the problem is that the WebView goes into quirksmode, where the td tag lacks inheritance so the body css doesnt apply.
Im aware that there are ways around this, like using a more explicit 4.01 doctype, or adding this to the css
table, thead, tbody, tr, td, th {
font-size: inherit;
font-family: inherit;
}
these however dont fix the root of the problem, which is that WebView decides against all logic to suddenly "missunderstand" the HTML5 doctype and switch to quirksmode, when all other WebKit-based browsers (Safari, Chrome, etc) behave correctly.
Is there any way to programmatically fix this?
Ok, my stupid mistake
it turns out that the doctype is getting screwed because before sending the HTML document to the webview im treating it, and adding an internal ID to all tags (this internal ID is required for features inside my app)
but in case someone screws up in the same way I did and wonder whats going on, I'll offer a lenghty explanation.
DOMDocumentType has several fields, among them you have name, publicId and systemId.
for example, consider the typical HTML 4.01 transitional doctype
it can be divided in
name = html
publicId = -//W3C//DTD XHTML 1.0 Transitional//EN
systemID = http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
and you can add a Custom ID to it as long as the format is preserved, like this
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" CustomID="1">
the problem with the HTML 5 DOCTYPE is that while it looks like a)
<!DOCTYPE html>
for the DOM, it actually is b)
<!DOCTYPE html PUBLIC "" "">
long story short, adding my CustomID="1" at the end of a) caused the DOM to not recognize it as a valid DOCTYPE, hence switching my WebView into quirksmode. If you want to have an HTML5 DOCTYPE and add a custom id to it you should do
<!DOCTYPE html PUBLIC "" "" CustomId="1">
w3schools.com tells us that the id attribute is not valid in: base, head, html, meta, , script, style, and title.
they should warn us that, poorly placed, it can also screw your DOCTYPE =)