字母预览PHP / JQuery

Question

I have a set of fields such as title, body, header, footer, signature and so on. When i fill these fields which are sections of a letter, a preview of what is being filled should show as the link given here: http://www.cvplaza.com/wp-content/uploads/2012/09/cover-letter-example.png

I will be developing this using codeigniter and want to know libraries or any other technologies to achieve this. I will also need to set predefined templates for the letter so once i loads them, i can then fill-in details and the preview fill format and show the final draft.

Answer 1

Something like this?

Guess some normal html would suffice, just create a html mockup, including some <address> tags etc (or whatever you want), and use some css to make it look like you want. Nothing special about it...

EDIT

reply on the comment: yes and no, ofcourse you can limit the number of characters or even words, but note that calculating dimensions based on text is nearly impossible. Except for monospace fonts every letter has it's own width, which is based on several variables, amongst others the rendering engine, which depends on the os and even the browser, the font chosen, etc. etc.

Except for if you have a lot of time and/or resources, I'd go with a practical solution. If you do have both, you can dynamically parse pdf files, using, eg. FPDF or TCPDF. Or you can look into dynamically parsing LaTeX, which gives you beautiful results with minimal effort in creating a page layout. But consider; is it worth the trouble?

In case of html and latex, you can create templates the way you would create normal html templates. An example for the template I created in the fiddle would look like this in php:

<div class="letter">
    <header>
        <div class="sender">
            <address>
            <?php echo $sender['name']; ?><br/>
            <?php echo $sender['address']; ?><br/>
            <?php echo $sender['city']; ?><br/>
            <?php echo $sender['zip']; ?><br/>
            </address>
        </div>
        <div class="date">
            <?php echo $date; ?>
        </div>
        <div class="recipient">
            <address>
                <?php // recipient... ?>
            </address>
        </div>
    </header>
    <div class="body">
        Dear <?php echo $recipient['full_name']; ?><br/>
        <br/>
        <strong><?php echo $subject; ?></strong><br/><br/>
        <?php echo nl2br($message_body); ?>
    </div>
</div>