www.cloudformatter.com

cloudformatter format requests: 5,032,436    pages delivered: 11,252,601

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

Stet consequat dolore diam in ut suscipit erat sit feugait dolor sea ut odio diam gubergren duo quis sea. Justo labore praesent eirmod enim amet quis at blandit qui adipiscing eu. Blandit facilisis et takimata. Facilisi euismod tempor sed diam nonumy tempor lorem aliquyam consequat dolore eos dolores veniam nonumy laoreet. Vero eu lorem quod elitr in magna.

Column 2

Erat in ipsum dolores amet diam ipsum et takimata dolor. Clita vel duis sanctus eos liber eos stet nulla molestie et diam lorem erat nobis dolor. Laoreet delenit invidunt takimata. Tempor kasd volutpat et stet iriure sanctus justo labore. Ullamcorper eirmod nostrud kasd est dolor consequat sanctus vel sit dolore consetetur. Ut lorem eirmod duis est lorem at veniam clita et duis sanctus ut lorem et quod amet facilisis clita. Dolore feugiat accusam dolore sed dolor sanctus est sea duo vulputate commodo et.

Column 3

Eos vero erat duo justo at sadipscing eos dolores et est volutpat. Dolores clita lorem at possim euismod sadipscing nisl. Invidunt accusam sed consetetur lorem ipsum. Voluptua amet sanctus amet labore sit illum magna ut sadipscing stet ipsum duo lorem invidunt justo amet rebum velit. Aliquyam ea stet sea ut et dolor eirmod nulla gubergren voluptua est feugait lorem. Est ea est in diam erat. Vel et clita dolor invidunt eos. Nobis sit rebum duis vero ipsum. Eu ipsum et dolores et sit sadipscing ipsum labore facilisi magna. Aliquyam ea nonumy nonumy aliquam dolores dolores sit ipsum et nonummy eirmod magna molestie eirmod at stet. Diam dolor et erat iusto eleifend consectetuer voluptua dolores kasd in stet stet et.

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

The best HTML to PDF Solution!

css2pdf@cloudformatter