www.cloudformatter.com

cloudformatter format requests: 6,314,221    pages delivered: 14,362,745

Open
Download
Embed

Floating Content

xportability LLC

Floating Content

http://www.cloudformatter.com

Many current implementations in HTML make use of responsive designs. The challenge is to try and replicate this HTML into the printed page. The trigger here is the float element. We will start with an easy example, how about replicating a drop-cap.

T
his would be a good example of a floating container. A drop capital is frequently used in book publishing. The first letter of the first word is dropped out, floated to the left of the container and rendered in a larger font. Of course, to see the effect one needs a paragraph that extends beyond the height of the drop capital letter to see the effect. So we have put a few additional sentences in this paragraph to see the effect.

Now, a slightly more complex design that one would expect from a javascript solution like Twitter Bootstrap would appear like this.

Column 1

Hendrerit wisi takimata vel duo no et sea diam molestie. Sit takimata magna amet voluptua tempor at et sit amet diam et ipsum facilisis sea gubergren adipiscing. Elitr diam erat elitr dolore est rebum dolores gubergren facilisi dolor kasd at elitr magna volutpat consetetur eirmod est. Justo nonumy magna ut lorem sit rebum duis lorem et dolor lorem et eirmod justo at in et at. Invidunt te diam dolore dolore labore commodo tempor diam lorem labore justo est exerci feugiat et ea lorem. Aliquyam diam vel sit voluptua erat volutpat et ipsum eos hendrerit diam accusam stet erat. Augue amet vel. Justo adipiscing erat nam duo amet sadipscing id ut sea lorem erat elitr. Nonumy invidunt duo dolore sit ipsum eu justo kasd magna et sed minim. Voluptua aliquam ipsum sea dolores in ut aliquyam elit aliquyam.

Column 2

Est diam dolore consectetuer. Kasd blandit et nisl elitr possim magna consetetur te clita amet. Rebum invidunt diam liber eirmod dolore amet. Sed duis nobis sit ea dolore eirmod lobortis vero volutpat ipsum tempor dolor ut no ullamcorper placerat ipsum et. Accusam amet sea erat ut at et sadipscing eirmod accusam praesent diam eros nonummy consequat volutpat dolor.

Column 3

Ipsum sit dolore invidunt diam vero takimata gubergren ullamcorper kasd ipsum ea consequat. Praesent labore nibh lobortis molestie dolores. Elitr vel minim duo amet at nobis justo. Elitr exerci molestie diam magna dolore amet dolor magna invidunt sed ea gubergren et no et. At no vel sanctus stet. Sit nulla consetetur dolore magna sit sed ea et in rebum duo diam.

And this paragraph would appear after the floats. It has "clear" both to clear the floats.

The best HTML to PDF Solution!

css2pdf@cloudformatter