Rich text entangles content with style, and people confuse the two
Aliases: WYSIWYG confusion · bold as structure · visual heading
What it is
Rich text paints characters and their appearance on one canvas: bold, color, and headings all look like part of “the words.” People then cannot tell which layer downstream will treat as data and which is display. A heading look is taken as heading data; spaces are taken as structure; a theme change collapses everything. Content-style entanglement is that confusion. It is not about how many toolbar buttons there are, and not about dirty paste from a word processor.
Why it happens
What-you-see-is-what-you-get renders structure (heading, list, link) as appearance, and also folds pure appearance (this sentence red, that one italic) into the same selection commands. The editing model is “what I see is what I will submit.” Internally there are two layers: semantics in the markup, and span styles on top. Selecting “looks like a heading: large and bold” does not stamp a heading tag; search, a table of contents, and speech treat a paragraph. Conversely, a real heading tag changes look with the theme and users think the content was edited. Entanglement holds while “it looks right” and breaks when “the data must be right.”
Studying it
Give a task that needs downstream structure (build a TOC, export plain text, jump by heading). Have people finish it in rich text, then inspect whether the markup actually has headings/lists or only font size and bold. Factors: whether the toolbar separates structure from decoration, whether hidden marks are shown. Outcomes: semantic accuracy, collapse after a theme switch. Eye tracking can show whether people inspect marks or only the rendering. Do not use “does it look good” as success.
Where it stops holding
A short comment that never enters another pipeline suffers nothing; appearance is the whole. Explicit markup such as Markdown splits the layers and confusion drops, at the cost of writing marks. Collaboration comments and track-changes stack “someone else’s style” on top and entanglement is harder to unpick. Screen readers read structure; a decorative visual heading is no heading to them.
Applying it
- Make heading, list, and link structural commands, separate from color and italic; do not impersonate a heading with “large bold.”
- In structure-needed scenes, offer show-marks or selection info (“this is Heading 2, not big type”).
- Preview once on a theme change or a plain-text export so people see which “looks” will vanish.
- Verify by having people write a piece with sections, then strip style and read the structure tree or a plain export. If sections vanish, headings were still appearance.
Related
- Within the group: E2.18.2 A toolbar that does too much exceeds what most people use · E2.18.3 Leftover styles from external paste are a common source of dirty data · E2.18.4 Complex formatting needs a predictable downgrade into plain text
- Adjacent: E2.02 Multiline text areas · E2.08 Character limits
- Search terms:
content-style entanglement·WYSIWYG·semantic markup