PDF CSS example

5 Questions View all
User avatar

Options

pdf Custom CSS - howto make all images same size?

Goal is simple:

I want all images in the pdf to be the same big size (420px I believe).

The Setup and Trouble:

With one image in step, it looks like this. ALl good. This is what I want. img class=large

Block Image

When I override standard and medium images (in steps that contain 2 and 3 images, the images are in bullet list with standard and medium classes)

.stepImages.standard img{
    width: 420px;
}
.stepImages.medium img{
    width: 420px;
}

I do get all images nice and big, but the text is up below instead of on the side.

Block Image

So I launch into making the text shift to the right, but the default method seems to be hardcoded (from what I see in the CSS) to shift one picture height up.

.stepText.rightText {
    width: 300px;
    margin-top: -315px;
    min-height: 315px;
    margin-left: 440px;
    margin-right: -56px;
}

This means that I would have to shift the text different amount depending whether there are two images or three images in the step.

... and that seems impossible with pure CSS unless I'm missing something.

I even asked a question on StackOverflow on this: http://stackoverflow.com/questions/43416...

Block Image

SO

How do I do this?

Thanks!

Answered! View the answer I have this problem too

Is this a good question?

Yes No
Score 0
Add a comment

2 Answers

Filter by:
Most Helpful Newest Oldest
Chosen Solution
User avatar

Options

For those interested, taking Eric's suggestion at just having two columns of images, here's the initial CSS I'm going with. I'm posting the whole CSS.

All Images Same Size pdf CSS

Obviously just for inspiration, your mileage may vary.

  • all images same size
  • re-aligned bullets with now smaller 'large' image
  • optimized borders so that they never align next to each other - which looks ugly in pdf
  • centered logo, and give it some breathing space
  • aligned summary with introduction
  • everything is big. small paper margins.

Block Image

/* IMAGES - LAYOUT 
==================== */

ul.stepImages {
    width: 812px !important;
}

li.stepImage {
    margin-right: -4px;
    margin-top: -4px;
}

.stepImage img, .step img.large {
    padding: 0px;
}

/* resize large images */

.step img.large {
    width: 388px;
    height: 291px;
}

.stepText.rightText {
    width: 360px;
    margin-top: -290px;
    margin-left: 410px;
}

/* resize medium and standard images : */

.stepImages.standard img, .stepImages.medium img {
    width: 388px;
}

/* standard images only one pixel in between, border alignment/overlap looks bad in pdf */

.stepImages.standard .stepImage.first img {
    border-width: 1px 0px 1px 1px;
}

.stepImages.standard .stepImage.last img {
    border-width: 0px 1px 1px 1px;
}

/* medium images only one pixel in between, border alignment/overlap looks bad in pdf */

.stepImages.medium .stepImage.first img {
    border-width: 1px 0px 1px 1px;
}

.stepImages.medium .stepImage.last img {
    border-width: 1px 1px 1px 1px;
}

/* OTHER STUFF 
================= */

.logo {
    margin-left: 0px;
}

.logo img {
    margin-top: 15px;
}

.title .summary {
    margin: 8px 30px 16px 30px;
}

.introText {
    margin: 40px 30px 0 30px;
}

p {
    font-size: 12pt;
}

.stepImages .noImage {
    display: none;
}

.author {
    display: none;
}

h3.stepTitle {
    background: #f5f5f5;
}

.introText {
    page-break-inside: avoid;
    page-break-after: avoid;
}

Was this answer helpful?

Yes No
Score 0
Add a comment
User avatar

Options

Not sure if this will be satisfactory - but this seems like a reasonable presentation to me:

ul.stepImages {
    width: 812px !important;
}

li.stepImage {
    margin-right: -4px;
    margin-top: -4px;
}
   
.stepImage img, .step img.large {
   padding: 0px;
   border: none;
}

.stepImages.standard img{
    width: 400px;
}

.stepImages.medium img{
    width: 400px;
}

p {font-size: 12pt; }

.stepImages .noImage {display: none; }

.author {display:none;}

h3.stepTitle {background: #f5f5f5; }

.introText {
    page-break-inside: avoid;
    page-break-after: avoid;
}

Was this answer helpful?

Yes No
Score 0

Comments:

Thanks @eric. I'll most likely end up using this as it does solve the big issue of tiny images, and two next to each other may be a reasonable compromise. (And you conveniently included bunch of my random CSS tweaks.)

That being said, it does not really answer the question.

Unless the answer is: impossible. No can do. We'd need a sorcerer, and we dont' have one.

Cheers.

by

Add a comment

Add your answer

Author avatar Filip Goc will be eternally grateful.
TRUSTe