www.cloudformatter.com

cloudformatter format requests: 6,321,121    pages delivered: 14,373,892

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

Amet sanctus doming nulla eos et sed gubergren gubergren clita vero. Takimata dolore ad diam et sit ea nibh amet sanctus diam dolore erat clita ipsum delenit. Facilisi clita dolor amet hendrerit justo vero diam ipsum labore odio duo kasd qui sed eos at. Esse option et amet suscipit sanctus et aliquyam diam ea clita. Kasd sit sed blandit ipsum amet et justo ea nulla mazim rebum eos. Nulla amet consequat amet amet et et no duo amet sea voluptua et nulla et nihil hendrerit gubergren rebum.

Column 2

Justo sed consetetur nobis diam amet accusam ut odio takimata ipsum tempor et labore nulla nulla sea lorem eirmod. Magna labore sed no kasd clita et nulla velit tempor amet. Cum gubergren suscipit est accusam invidunt no at justo clita dolor sadipscing est lorem eum. Odio et dolor dolor voluptua aliquyam elitr. Rebum et sanctus erat ipsum stet et illum. Erat et luptatum kasd esse sea justo aliquyam dolor eirmod et. Ut lorem duis dolores in invidunt ea ex lorem at et duo eirmod voluptua et rebum magna vero nam. Dolor wisi dolor no ea augue et.

Column 3

Eos commodo sadipscing eos dolore nulla stet consetetur clita elitr diam dolore ea dolor erat ut delenit et diam. Sea exerci diam ex takimata et sit volutpat accusam sit magna ipsum consetetur. Lorem voluptua nonummy amet vero duo ut stet qui. Euismod et dolore aliquyam accusam diam esse sed sanctus takimata et ea sea. Elit at et tincidunt lorem amet kasd vero eirmod quis eos lorem. Duo dolore feugiat te nisl lorem sea accusam vero nostrud accusam delenit. Ut suscipit sit eirmod ut labore ipsum ipsum dolor commodo elitr lorem delenit eum nisl et amet. Et ipsum sit praesent nulla duis et. Kasd option vulputate accumsan labore et sed quod no eirmod erat labore.

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

The best HTML to PDF Solution!

css2pdf@cloudformatter