The example prepares vCard 4.0 text and a decoded-note check for fictional Avery Quinn. It escapes the note's comma and newline, retains five structured-name components, and counts UTF-8 bytes. A separate 76-byte folding fixture splits into physical widths 75 and 2 and unfolds exactly. The page displays prepared text without saving or importing a contact.
Keep the native format explicit
The intended deliverable is a .vcf file, not an HTML business-card page. The bounded property order is BEGIN:VCARD, VERSION:4.0, FN, N, EMAIL, NOTE, END:VCARD. VERSION follows BEGIN immediately. RFC 6350 supplies the selected base-format rules. This builder's policy is UTF-8 without a byte-order mark and CRLF after every physical content line, including END. Its readable display is not a native-file download; the byte and line-ending policy is reported separately so a visual preview cannot be mistaken for proof of file creation.
FN is Avery Quinn. N contains family Quinn, given Avery, then empty additional, prefix and suffix fields: Quinn;Avery;;;. Keep those trailing separators rather than trimming the empty components. The email avery@example.com is a practice value, not a verified mailbox. Restrict the builder to named fields and reject raw line breaks in name and email inputs. That local boundary prevents the input from injecting an additional property line or a second record. Do not claim the small builder covers every property or parameter in vCard.
Separate note text from property lines
The intended note has two lines: “Bring a draft, and notes.” and “Ask before adding details.” Encode the comma as backslash-comma and the logical newline as backslash-n inside NOTE. Literal backslashes need doubling. Escape commas and semicolons inside name components while preserving the structural separators between the five components. The page unfolds the prepared content, decodes the note value, and compares it with the intended note. An equal round trip checks this serialization path, not a receiving application's field mapping.
If a target requires vCard 3.0, prepare a separately checked version-specific contract. Changing only VERSION does not establish that the remaining file obeys another format. Keep native file revision and receiving-app state separate as well: editing source text cannot update a contact someone already imported. Record the app/version, exact file revision, displayed name components, email, note and duplicate outcome during the actual import check, leaving those observations blank until the work occurs.
Fold at whole-character boundaries
RFC 6350 recommends folding long lines at 75 octets and keeping multi-octet characters intact. A continuation begins with a marker space, which counts toward that physical line's width. The synthetic fixture NOTE: plus 35 copies of é plus X has five prefix bytes, seventy accented-character bytes and one final byte: 76 total. Folding before X produces a first line of 75 bytes and a continuation containing space plus X, two bytes. Unfolding must recover the exact logical line, including genuine value spaces.
After any edit, rebuild before using the text. A blank FN blocks generation and clears stale prepared content. Keep import compatibility as a separate observation rather than inferring it from a round trip or a clean preview. Use the native VCF and actual target-app results for the final handoff; the HTML field review is an explanation of the intended mapping and byte contract, not a saved address-book entry.
Make your own working example
Build a bounded vCard 4.0 contact-text preparation page. Defaults: FN Avery Quinn; family Quinn; given Avery; email avery@example.com; note two logical lines Bring a draft, and notes. then Ask before adding details. Include editable named fields, Build text, Run folding fixture, Reset, encoded preview and decoded-note comparison. Do not offer fake download, import or saved-contact controls.
Serialize BEGIN, VERSION:4.0, FN,N,EMAIL,NOTE,END with UTF-8, no BOM and CRLF including the final line. Keep five N components. Escape literal backslashes, commas, semicolons and note newlines while preserving structural N separators. Reject blank FN and line breaks in non-note fields. Clear stale output on edits or invalid input.
Fold physical lines to at most 75 UTF-8 bytes between whole characters, counting continuation marker space. Unfold before interpreting the note. Separate fixture NOTE: plus 35 é plus X has logical width 76, physical widths 75/2 and exact unfolded equality. Label receiving-app/version/import and duplicates as untested. This is a small base-format text builder, not universal vCard support or synchronization.
Use one self-contained HTML file with no remote dependency. Keep the initial sample, output, and labeled controls near the top. Use at least 16px text, strong contrast, visible focus, and a stacked layout at 360px without horizontal overflow. Use explicit type=button click handlers and explicit DOM selectors; do not depend on native form submission. Clear stale feedback when task inputs change. Render entered text safely. Keep practice data local to the current page; do not imply saving, sending, or production integration. Return only the finished HTML.
Explain the expected import mapping
Keep native VCF and target-app observations together. For the HTML field review, NOS supports direct visual revision of eligible static notes without AI regeneration. Clarify the expected two-line note before someone tests the actual contact import.