Copy Box Edit
Problem summary
The user needs to copy formatted text from a website and insert into a text editor or similar application
Example
Usage
- Use when you have text to show on a web page, which you want to format as it would appear in a text/code editor or terminal window. For instance if you have text that is an example from such application, that you wish to present on your web page without loosing the formatting.
- Use when you wish to present information that the user needs to copy (and later paste into another application)
Solution
Create a box that has its own style in regards font color, font style, and background color that distinguishes itself from the rest of the page.
To preserve indentation and general formatting of the text box so that it looks like a terminal window or text editor, use a mono-space font: a font that has a fixed width typeface (glyphs have the same width).
As inserting text in raw HTML renders without line breaks and strips repeating spaces, you need to put special tags around the text you want to preserve the original formatting with. One solution is to use the <pre> around the text you want to preserve formatting with – another is to put the text inside a <textarea>.
Rationale
If you just paste ascii formatted text into a HTML file, the user’s browser will format the text and display it all in one line and regardless of how the code looks like in the HTML file as special tags are used in HTML to define line breaks (<br>).
More example images of the 'Copy Box' pattern
-
-
Copy Box at digg.com
-
Copy box with rounded corner and thick top border.
-
The code in the copy box on the right is documented in the column on the left. Notice how documentation for one code segment of code is aligned vertically with the start of the code segment.
This document is in version 1 and was last updated on Dec 25, 2008 by Anders. Edit this pattern.
