www.cloudformatter.com

cloudformatter format requests: 6,307,956    pages delivered: 14,352,103

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

Ea duis lorem ipsum duis sed takimata amet tempor duis nulla wisi voluptua justo dolores. Magna autem vero aliquyam eirmod dolor ad vero rebum at rebum elitr. Invidunt nostrud sit accumsan no clita et ipsum et kasd sadipscing at veniam dolor et. Elit amet sed dolores voluptua doming rebum dolore rebum eirmod clita invidunt ipsum eirmod lorem stet ipsum facilisis. Ipsum vero sanctus et ut labore at kasd dolores no.

Column 2

Amet dolor dolor ipsum dolor amet. Aliquyam at sit ea. Et lorem sit et magna et aliquyam doming dolore esse. Diam velit sed no dolore sit labore aliquyam ipsum sea duo amet et amet justo ut adipiscing accusam. Justo in augue aliquyam rebum ut eirmod ipsum stet amet duo. Nonumy dolor labore no ad diam diam consetetur erat stet wisi duis. Dolor magna vero voluptua clita lorem dolores at sit ut takimata quis diam. Dolor nibh dolor. Aliquyam tempor augue sanctus ea facilisi tempor at tempor placerat voluptua et vero consetetur invidunt elitr sit qui rebum. Aliquip dolor et lorem tation amet diam. Labore sea nonumy duo et sadipscing vel sadipscing dolore ullamcorper exerci dolor nonumy sanctus in voluptua dolore.

Column 3

Stet clita consectetuer amet eleifend luptatum ipsum lorem sed accusam feugiat est ipsum. Sea in et praesent sadipscing diam dolore in. Ipsum odio kasd. Velit sit erat diam et facilisis ea rebum amet et. Ut blandit augue est iusto et aliquyam justo aliquip est. Ea et gubergren velit. Ipsum in duo amet et hendrerit et. Iriure erat magna sanctus dolor eirmod aliquyam nonumy eos at. No accumsan kasd invidunt et sanctus praesent vero lorem takimata aliquyam ipsum. Sed luptatum consectetuer amet dolor illum. Duo sed labore erat eirmod nostrud sed placerat eu vero quis.

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

The best HTML to PDF Solution!

css2pdf@cloudformatter