Member Avatar for tgkprog

i want to allow a user to either preview or edit a letter ()
the user can choose if they want to go with a template (no editing the letter directly then) or a custom letter (can edit)
I can use
1. text area
2. div to read template - text area to edit
3. div to read and edit (use contentEditable)
4. iframe to read - text area to edit
5. iframe to read and div to edit

text area is good for plain text only(as far as i know) so should i use another combination?

Want to know the best UI that you would opt for , please comment. thank you

FYI the site is for a parent to customize a letter that gets sent by post; as if from Santa; to the child.

Regards

  • 2 Contributors
  • 2 Replies
  • 103 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by tgkprog

Dani AI

Generated

For the Santa-letter use case described by (and noting 's concern about isolated embeds), focus on two practical goals: predictable printed output and a safe, simple editing surface for parents.

Keep templates as presentation-only HTML/CSS fragments with placeholder tokens for variables (name, age, etc.). Replace tokens server-side and always escape user-supplied text before it goes into the template so parents cannot break layout or introduce unsafe markup. Store the template separately from user content so you can update artwork or fonts without touching saved letters.

For the editing experience, prefer constrained inputs: discrete form fields for structured data and a minimal rich-text input for the message body if formatting is needed. Use a maintained editor library (it smooths over browser quirks) and run a reliable sanitizer on any HTML produced. Keep an explicit “reset to template” and save both the raw user input and the sanitized/rendered HTML for auditing and rollback.

Preview vs. print fidelity is the key UX trap. Render previews with the exact CSS that will be used for the physical print (same font files, container width, margins). For guaranteed, repeatable output across printers and browsers, generate the final printable file server-side (PDF via headless Chrome or similar). If printing from the browser, supply a dedicated print stylesheet and test page breaks, margins, and font loading on actual printers.

Quick checklist: separate template/presentation from user input; escape and sanitize user data; limit formatting tools; provide reset/undo; test print output on multiple browsers and printers; and export a server-side PDF when exact layout matters. This keeps the authoring flow simple for parents while making the final mailed letter reliable and secure.

Recommended Answers

All 2 Replies

Member Avatar for ccube921

whats the big deal 3 and 2 both sound fine to me(dont use iframes, please!)

Member Avatar for tgkprog

justy wanted opionions not done this and was going with iframes when someone else suggested no divs better
will have to read the source files using AJAX and chance the div contentes. with iframe just had to change the iframes src attribute as its now at


* well its a little bit more programming this way but ok
div to read template - text area to edit
Ty :)

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.