Take the 2-minute tour ×

I have a div tag <div id="preview"></div> with a fixed width and height, and in the preview I'd like to display some html: h1, h2, p, block quotes, lists, all shrunk down so the entire chunk of html fits inside the preview, perfectly scaled and proportioned. How would I go about it? Thanks!

share|improve this question
Please show us your HTML, and, ideally, a live demo. Explain the difficulties you're having, and what you want that you don't seem to be getting. –  David Thomas Aug 3 '12 at 23:11
It's clear from the question what he's asking. A live demo is nice but not required. –  ash Aug 3 '12 at 23:13
add comment

2 Answers

up vote 5 down vote accepted

Use CSS's zoom property:

#preview { 
    zoom: 0.5; 
    /* For Firefox */
    -moz-transform: scale(0.5); 
    -moz-transform-origin: 0 0;
share|improve this answer
add comment

After more research it seems that the iframe is more appropriate for displaying html: instead of supplying an external link to a web page, you can load the iframe with raw html directly. Also you can embed a stylesheet in the iframe and the stylesheet won't affect the rest of your site. Perfect for themes. You can see the jsfiddle here.


<textarea id="editor"><p>This is plain html to keep it simple. In my 
application, this would be Markdown text and converted to html by a 
Markdown converter in javascript.</p></textarea>

<iframe id="preview"></iframe>​​​


var html = document.getElementById('editor').value;
head = '<style type="text/css">#inner {color: blue; margin: auto; zoom: 0.6; -moz-transform: scale(0.6); -moz-transform-origin: 0 0;}</style>';     
var body = '<div id="inner">' + html + '</div>';
var preview = document.getElementById('preview').contentWindow.document;
preview.head.innerHTML = head;
preview.body.innerHTML = body;​


#editor, #preview {
    height: 300px;
    width: 200px;

textarea {
    resize: none;
share|improve this answer
add comment

Your Answer


