Question

I’m trying to create a “post” creator that uses Bootstrap compatible <div>, <span>, etc tags. While the user types their post into a text box, I was hoping to create a “preview” next to it, at 1/2 page width size. So, everything inside it would be scaled down by 2.

My question: is there any way to scale down the Bootstrap elements so that it can be made into that preview? I can use jquery and such to take the input and format it dynamically onto the page, but I just need to know how to actually scale down everything.

Thanks!

Answer 1

Supposing you can make assumptions about the target audience or set minimum browser guidelines, one option is to make use of CSS3 2D Transforms. So, for example, if you wanted your scale your preview window 50%, you could do something like:

#my-preview-div {
transform: scale(.5);
-ms-transform: scale(.5); /* IE 9 */
-webkit-transform: scale(.5); /* Safari and Chrome */
-o-transform: scale(.5); /* Opera */
-moz-transform: scale(.5); /* Firefox */      
}

Then, you could use jquery to inject the preview html into your preview div, e.g. <div id="my-preview-div"></div>.