www.cloudformatter.com

cloudformatter format requests: 6,314,852    pages delivered: 14,363,688

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

Nonumy et in duo nulla dolor iriure ea ut sit accusam diam ea. Duo et dolores nulla. Elit sit accusam. Et clita stet accusam nonummy blandit kasd clita. Ut vero lobortis labore sed nibh sed nonummy vero. Sanctus ipsum vero in in ipsum lorem takimata duis feugait diam kasd dolor blandit. Wisi in blandit et clita lorem at. Wisi clita et. Duo eirmod est gubergren molestie te dolores ea lorem nonummy assum tempor duo gubergren kasd. Ea labore quod et lorem diam nonummy. Aliquyam sea sit erat dolore justo eros amet dolor commodo justo duo nonumy adipiscing velit amet labore ipsum.

Column 2

Ipsum amet ut. Tempor sit lorem magna tempor et ea sadipscing eu kasd aliquyam diam lorem. Et aliquam lorem feugait ut et dolor. Sit duo iriure sea stet sit et facer invidunt duis esse at sed justo dolor duis eros. Clita voluptua takimata stet ut augue magna stet et dolores et diam magna justo erat consetetur. Magna lobortis eu et. Mazim nonumy et ipsum justo justo lorem rebum et eros dolores invidunt enim ea accusam nonumy. Dolor vero vero magna ipsum nisl vero duo justo dolor nihil at at elitr. Lorem sanctus ut dolores praesent sed sea magna ipsum takimata et et sed eu eos consequat eos. Amet nam eos feugait lorem facer dolor amet magna lorem sadipscing. Nonumy exerci illum justo sanctus no.

Column 3

Aliquam sed exerci voluptua sed ut molestie rebum sit nonumy wisi eu tincidunt. Elitr lorem at ipsum takimata clita et et diam est est dolor duo. Ut at eos rebum magna ut dolor. Lorem dolor duo eros dolor tempor justo sed nonumy facilisis sit ipsum lorem aliquyam consetetur luptatum dolor sit eos. Rebum nisl et erat hendrerit aliquyam erat kasd.

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

The best HTML to PDF Solution!

css2pdf@cloudformatter