 |
|
|
|
|
|
| |
| |
|
|
|
|
| |
| |
|
|
OK, here's a great one:
Does anybody know how to make it so that images show up normal size on a
web page, but shrink to fit the paper when the page is printed out?
(Yes, I realise that printing a web page is 92% guaranteed to fail in
all possible cases...)
Post a reply to this message
|
|
| |
| |
|
|
|
|
| |
| |
|
|
Invisible <voi### [at] dev null> wrote:
> Does anybody know how to make it so that images show up normal size on a
> web page, but shrink to fit the paper when the page is printed out?
By providing a printable version of the page, as some websites do.
--
- Warp
Post a reply to this message
|
|
| |
| |
|
|
|
|
| |
| |
|
|
On 9/28/2010 6:57 AM, Invisible wrote:
> OK, here's a great one:
>
> Does anybody know how to make it so that images show up normal size on a
> web page, but shrink to fit the paper when the page is printed out?
>
> (Yes, I realise that printing a web page is 92% guaranteed to fail in
> all possible cases...)
>
Google CSS Media. That should at least get you started.
--
~Mike
Post a reply to this message
|
|
| |
| |
|
|
|
|
| |
| |
|
|
On 28/09/2010 01:23 PM, Mike Raiford wrote:
> Google CSS Media. That should at least get you started.
OK, so adding
@media print
{
img {max-width: 100%;}
}
causes all images to be scaled to fit the width of the paper.
Unfortunately the image height remains completely unchanged, wildly
distorting the image aspect ratio. (!)
You'd think there would be an option for "preserve aspect ratio", but as
far as I can tell, there isn't...
Post a reply to this message
|
|
| |
| |
|
|
|
|
| |
| |
|
|
Le 28/09/2010 15:55, Invisible a écrit :
> On 28/09/2010 01:23 PM, Mike Raiford wrote:
>
>> Google CSS Media. That should at least get you started.
>
> OK, so adding
>
> @media print
> {
> img {max-width: 100%;}
> }
>
> causes all images to be scaled to fit the width of the paper.
> Unfortunately the image height remains completely unchanged, wildly
> distorting the image aspect ratio. (!)
>
> You'd think there would be an option for "preserve aspect ratio", but as
> far as I can tell, there isn't...
I get a pleasant result (at least in preview from Firefow) with
img {max-width: 17cm; max-height: 24cm; background: white ;color:#000; }
inside a <link rel="stylesheet" href="../style/print.css"
type="text/css" media="print" />
Beware of transparent images, background is a good idea!
You might want to take care of page-break after title:
h1 { page-break-after:avoid}
h2 { page-break-after:avoid}
h3 { page-break-after:avoid}
h4 { page-break-after:avoid}
/* up to your usual depth */
At least it try to give some clue to the paging engine.
As well as printing the actual URL of link (because on paper, a printed
visual of link is useless):
a:link:after, a:visited:after{ content: " (" attr(href) ") ";
font-size: 90% }
--
A: Because it messes up the order in which people normally read text.<br/>
Q: Why is it such a bad thing?<br/>
A: Top-posting.<br/>
Q: What is the most annoying thing on usenet and in e-mail?
Post a reply to this message
|
|
| |
| |
|
|
|
|
| |
| |
|
|
>> OK, so adding
>>
>> @media print
>> {
>> img {max-width: 100%;}
>> }
>>
>> causes all images to be scaled to fit the width of the paper.
>> Unfortunately the image height remains completely unchanged, wildly
>> distorting the image aspect ratio. (!)
>
> I get a pleasant result (at least in preview from Firefow) with
> img {max-width: 17cm; max-height: 24cm; background: white ;color:#000; }
This requires you to know what the dimensions of the paper are, and what
the correct aspect ratio of every image is. I'd prefer it if there were
some way to have the browser scale images in proportion, but I'm not
seeing any way of doing that.
> You might want to take care of page-break after title:
> h1 { page-break-after:avoid}
> h2 { page-break-after:avoid}
>
> At least it try to give some clue to the paging engine.
Isn't that part of the default CSS rules anyway? Certainly the
pagination looks fairly plausible right now.
> As well as printing the actual URL of link (because on paper, a printed
> visual of link is useless):
>
> a:link:after, a:visited:after{ content: " (" attr(href) ") ";
> font-size: 90% }
That's true - not that the correct document I'm working on contains any
links...
Post a reply to this message
|
|
| |
| |
|
|
|
|
| |
| |
|
|
nemesis wrote:
> Invisible escreveu:
>> On 22/09/2010 06:04 PM, nemesis wrote:
>>
>>> document.write is not part of DOM:
>>
>> I know that.
>>
>>> you can see it simply writes new
>>> content to the page, doesn't work by manipulating trees and nodes as in
>>> DOM. It's a relic from pre-standardized Netscape days..., like the blink
>>> tag... :p
>>
>> Well, that's very nice, but as far as I can see, there's no equivalent
>> way of doing what document.write does.
>
> what? like:
Maybe like outputting mismatched tags to the browser? What's the equivalent of
document.write("<table>")
?
--
Darren New, San Diego CA, USA (PST)
Quoth the raven:
Need S'Mores!
Post a reply to this message
|
|
| |
| |
|
|
|
|
| |
| |
|
|
Le 28/09/2010 16:44, Invisible a écrit :
>>> OK, so adding
>>>
>>> @media print
>>> {
>>> img {max-width: 100%;}
>>> }
>>>
>>> causes all images to be scaled to fit the width of the paper.
>>> Unfortunately the image height remains completely unchanged, wildly
>>> distorting the image aspect ratio. (!)
>>
>> I get a pleasant result (at least in preview from Firefow) with
>> img {max-width: 17cm; max-height: 24cm; background: white ;color:#000; }
>
> This requires you to know what the dimensions of the paper are, and what
> the correct aspect ratio of every image is.
Yes and No.
Notice we set max-*, not width & height... so the max-* does not define
any ratio: in firefox preview, at worst one of the max is inforced (and
the other dimension remains lower) if the number of pixel reach the
dimension... If the picture is smaller, it is not expanded.
(Problem: we do not have access to the DPI either!)
the problem with "100%" is that it is relative to the container... an
absolute size would be better: I used "cm" but you can search for some
units more appropriate (hint: CSS3 vm/vh/vW ?) (viewport...)
--
A: Because it messes up the order in which people normally read text.<br/>
Q: Why is it such a bad thing?<br/>
A: Top-posting.<br/>
Q: What is the most annoying thing on usenet and in e-mail?
Post a reply to this message
|
|
| |
| |
|
|
|
|
| |
| |
|
|
>>> I get a pleasant result (at least in preview from Firefow) with
>>> img {max-width: 17cm; max-height: 24cm; background: white ;color:#000; }
>>
>> This requires you to know what the dimensions of the paper are, and what
>> the correct aspect ratio of every image is.
>
> Yes and No.
> Notice we set max-*, not width& height... so the max-* does not define
> any ratio: in firefox preview, at worst one of the max is inforced (and
> the other dimension remains lower) if the number of pixel reach the
> dimension... If the picture is smaller, it is not expanded.
> (Problem: we do not have access to the DPI either!)
Yes. And I had *hoped* that by setting only the maximum width, Firefox
would figure out that the height should be similarly adjusted. But no...
> the problem with "100%" is that it is relative to the container... an
> absolute size would be better: I used "cm" but you can search for some
> units more appropriate (hint: CSS3 vm/vh/vW ?) (viewport...)
Yes. And if the container is the entire page, it means that the image
ends up the exact right size for whatever size of paper you happen to be
using (which I cannot know ahead of time).
Post a reply to this message
|
|
| |
| |
|
|
|
|
| |
| |
|
|
And lo On Tue, 28 Sep 2010 14:55:18 +0100, Invisible <voi### [at] devnull> did
spake thusly:
> On 28/09/2010 01:23 PM, Mike Raiford wrote:
>
>> Google CSS Media. That should at least get you started.
>
> OK, so adding
>
> @media print
> {
> img {max-width: 100%;}
> }
>
> causes all images to be scaled to fit the width of the paper.
> Unfortunately the image height remains completely unchanged, wildly
> distorting the image aspect ratio. (!)
>
> You'd think there would be an option for "preserve aspect ratio", but as
> far as I can tell, there isn't...
Not sure what you're trying to do as
img {width: 20%;}
@media print {img {width: 100%;}}
Takes a 50% screen width image and fills the width of my print preview up
whilst retaining the proportions of the height. Modifying the print style
width adjusts to the page and the height shifts accordingly. This works in
Firefox, Opera, and hey Chrome doesn't have a preview... nope that printed
out fine.
The attachment is for a width of 20% and 10% respectively.
--
Phil Cook
--
I once tried to be apathetic, but I just couldn't be bothered
http://flipc.blogspot.com
Post a reply to this message
Attachments:
Download 'printwidth.png' (19 KB)
Preview of image 'printwidth.png'
|
|
| |
| |
|
|
|
|
| |
