Readers quote sites. They select a paragraph, or the whole page, and paste it into an email, a doc, a Slack message, a spreadsheet. I had never once looked at what our site puts on the clipboard when they do, so I measured it on all 79 pages of our site.
The instrument is four lines in the page:
const sel = getSelection(); const range = document.createRange(); range.selectNodeContents(document.body); sel.addRange(range); const text = sel.toString(); // the text/plain flavour const html = (() => { const d = document.createElement("div"); d.appendChild(range.cloneContents()); return d.innerHTML; })(); // text/html The two flavours
| across 79 pages | characters |
|---|---|
text/plain | 392,583 |
text/html | 5,326,804 |
13.6 times more markup than words. On /faq alone it is 6,144 characters of text against 73,348 of HTML. A clipboard carries both flavours, and which one a target application takes is its decision, not the reader's: a plain-text editor takes the first, a rich-text editor, a Google Doc or a Notion page takes the second.
Where the 13x comes from is not a mystery. Counting class attribute contents in the delivered HTML:
| /faq | all 79 pages | |
|---|---|---|
| class attributes | 168 | 14,877 |
| characters inside them | 8,551 | 751,144 |
| share of the document | 10.9% | 13.1% |
The longest single class attribute on /faq is 350 characters. A Tailwind site's markup is mostly class names, and every one of them goes on the clipboard when a reader copies a paragraph, along with any inline SVG they happen to have selected, of which /faq has six.
None of that markup does anything useful after the paste. The stylesheet stays behind. What arrives in the document is the structure, plus a few thousand class names that now mean nothing.
422 characters of furniture around every quote
Comparing the full selection of three different pages for their common prefix and suffix:
common prefix, 72 characters, identical on every page: PubTrivia Features Solutions Pricing Resources Sign in Get started Home common suffix, 350 characters, identical on every page: ... the entire footer, ending in © 2026 CogniPrep Ltd So a reader who selects a whole page of ours and pastes it gets the navigation, then the content, then the footer: 422 characters of site furniture, which is 5.9 per cent of a long guide page, 6.9 per cent of the FAQ and 9.4 per cent of /pricing. That is the cost of having a header and a footer inside body, which is to say it is unavoidable and worth knowing the size of.
One declaration holds one thing back
Our stylesheet has 1,254 style rules in it. Exactly one of them declares user-select, and on 76 of 79 pages exactly two elements compute to user-select: none, with 18 characters of text between them.
It is the giant watermark word at the bottom of the footer, the one rendered at clamp(6rem, 18vw, 18rem) and at 5 per cent opacity. It carries aria-hidden="true" and Tailwind's select-none, so it is hidden from assistive technology and withheld from the clipboard, and that combination is correct: it is decoration, not content.
The proof is the gap between what the DOM reports as text and what the clipboard receives. On /faq:
document.body.innerText 6,157 characters selection.toString() 6,144 characters Thirteen characters, and a diff shows all of them: the word PubTrivia and some newline handling. The three legal pages have zero select-none elements at all, because they get the compact footer with no watermark, so on those three nothing is withheld from the clipboard.
Three things that are not in the clipboard, and one that is
Nothing is hidden for screen readers. .sr-only is defined in the stylesheet and matches 0 elements on all 79 pages. There is no visually-hidden text anywhere on the site, so a reader pasting a page does not pick up a single string they could not see. Many sites cannot say that, and it is accidental here rather than earned.
No ::selection rule exists. Zero, on every page. The highlight a reader sees while dragging across our near-black pages is the browser's own default, which we have never looked at or styled, on a site that otherwise specifies every colour it uses.
The comparison tables copy as tables. They are real table markup, so pasting one into a spreadsheet lands in cells rather than as a wall of text, which is the right outcome. The first cell is a non-breaking space, because the corner header cell is <th scope="col"> </th>, so the paste arrives with one deliberately empty cell. You can watch that happen on any of our comparison pages.
And one string in the clipboard that a screen reader never gets. The homepage has a mascot with a speech bubble reading "Easy as one, two, three.", marked aria-hidden="true" because the sentence beside it already says the same thing. It is invisible to assistive technology and fully selectable, so it is in the plain text of any whole-page copy of the homepage. Inverse of the watermark, and both decisions were made on purpose; it is just interesting that the clipboard and the accessibility tree disagree about both of them, in opposite directions.
Try it on your own site in one minute
Open a page, press select-all then copy, and paste it twice: once into a plain-text editor and once into something rich, a draft email will do. Then ask three questions.
- How much navigation and footer did the reader have to delete before their quote made sense?
- Did any text arrive that they could not see on the page? If yes, you have
sr-onlycontent that is probably in the wrong place. - Is the rich paste enormous? Our ratio is 13.6 to 1. The fix is not available in CSS, but a
copyhandler that rewritesclipboardDatais about ten lines, and knowing the number is the part most sites skip.
You can run the measurement above against any page of ours in your own browser console and compare it with your site before you change anything.
