Example from snipsnap.org (Oct 2002)

Example from http://snipsnap.org (Oct 2002)

Example from www.moock.org/blog/archives/000044.html (14 Sep 2003). This is an actual form textarea - this makes copying easier, but you need to scroll the box to see the whole contents.

Example from http://www.moock.org/blog/archives/000044.html (14 Sep 2003). This is an actual form textarea - this makes copying easier, but you need to scroll the box to see the whole contents.

http://cocoadevcentral.com

http://cocoadevcentral.com (Jul 2003)

1. Formatted HTML: for small to large content; harder to copy; easier to view (top example)
2. A textarea of a form: for larger content; easier to copy; harder to view (example from Moock below)

http://snipsnap.org

Example from snipsnap.org (Oct 2002)

Example from www.moock.org/blog/archives/000044.html (14 Sep 2003). This is an actual form textarea - this makes copying easier, but you need to scroll the box to see the whole contents.

Relations to lower patterns.

Books and articles that are used describing the pattern.

-- ArthurClemens - 26 Jul 2003

Authors:
-- ArthurClemens - 14 Sep 2003

%META:FILEATTACHMENT{name="Copybox_Moock_20030914.png" attr="h" comment="" date="1063548256" path="Copybox_Moock_20030914.png" size="74956" user="ArthurClemens" version="1.1"}%

A webpage presents information that the user needs to copy (and paste in another application). Copy-paste operations on a Web page are often difficult, especially when the to-copy-selection extends over multiple lines - all to easily you select too much (the entire page) or you miss some characters.

Copy-paste operations on a Web page are often difficult, especially when the to-copy-selection extends over multiple lines - all to easily you select too much (the entire page) or you miss some characters.

A webpage presents information that the user needs to copy (and paste into another application). TO WRITE...

Principle

• Textual information should be copied to another application, such as a terminal or code editor.

Copy box works very well for showing code samples.

More examples

Examples

-- ArthurClemens - 03 Jul 2003

Connections

Literature

Example from http://snipsnap.org

http://cocoadevcentral.com

Copy box works very well for showing code samples.

Example from this site (Edit page)

http://snipsnap.org

-- ArthurClemens - 01 Jul 2003

-- ArthurClemens - 03 Jul 2003

%META:FILEATTACHMENT{name="CocoaDevCentral-Copybox.png" attr="h" comment="" date="1057239257" path="CocoaDevCentral-Copybox.png" size="13761" user="ArthurClemens" version="1.1"}%

Principle

A webpage presents information that the user needs to copy (and paste in another application). Copy-paste operations on a Web page are often difficult, especially when the to-copy-selection extends over multiple lines - all to easily you select too much (the entire page) or you miss some characters.

A webpage presents information that the user needs to copy (and paste in another application). Copy-paste operations on a Web page are often difficult, especially when the to-copy-selection extends over multiple lines - all to easily you select too much (the entire page) or you miss some characters.

Create a rectangular shaped area (a box) that indents the body text. Give the box a border and a distinct background color. The text inside the box should have high contrast (for instance black), so it has an active appearance.

Create a rectangular shaped area (a box) that indents from the body text. Give the box a border and/or a distinct background color.

Principle

Examples

More examples

Example from this site (Edit page)

Literature

Used literature

Related literature

-- ArthurClemens - 18 May 2003

• example2.png:
  

-- ArthurClemens - 01 Jul 2003

%META:FILEATTACHMENT{name="example.png" attr="h" comment="" date="1053261405" path="example.png" size="58415" user="ArthurClemens" version="1.2"}% %META:FILEATTACHMENT{name="example2.png" attr="h" comment="" date="1053263455" path="example2.png" size="10454" user="ArthurClemens" version="1.1"}%

%META:FILEATTACHMENT{name="example.png" attr="h" comment="" date="1057056423" path="example.png" size="6067" user="ArthurClemens" version="1.2"}% %META:FILEATTACHMENT{name="example2.png" attr="h" comment="" date="1053263708" path="example2.png" size="6979" user="ArthurClemens" version="1.1"}%

%META:TOPICPARENT{name="Repository_patterns"}%

%META:TOPICPARENT{name="Content_presentation"}%

Principle

Principle

Problem

A webpage presents information that the user needs to copy (and paste in another application). Copy-paste operations on a Web page are often hard, especially when the selection extends over multiple lines - all to easily you select too much or you miss some characters.

Motivation

Solution

Create a rectangular shaped area (a box) that is indented from (?) the normal text. Give the box a border and a distinct background color. The text inside the box should have high contrast (for instance black).

Diagram

Problem

Motivation

Solution

Diagram

Use when

Implementation

Use when

Implementation

Examples

Examples

Example 1

Literature

Used literature

Related literature

• example2.png:
  

Literature

Used literature

Related literature

-- ArthurClemens - 29 Jan 2003

%META:FORM{name="Title_form"}% %META:FIELD{name="Title" title="Title" value="Copy box"}% %META:FIELD{name="Subtitle" title="Subtitle" value=""}%

%META:FILEATTACHMENT{name="example.png" attr="h" comment="" date="1053261405" path="example.png" size="58415" user="ArthurClemens" version="1.2"}% %META:FILEATTACHMENT{name="example2.png" attr="h" comment="" date="1053263455" path="example2.png" size="10454" user="ArthurClemens" version="1.1"}%

Copy box

%META:FORM{name="Title_form"}% %META:FIELD{name="Title" title="Title" value="Copy box"}% %META:FIELD{name="Subtitle" title="Subtitle" value=""}%

A webpage presents information that the user needs to copy (and paste in another application). With plain text, it is often hard to make an exact selection - all to easily you copy too much or not enough.

A webpage presents information that the user needs to copy (and paste in another application). Copy-paste operations on a Web page are often hard, especially when the selection extends over multiple lines - all to easily you select too much or you miss some characters.

-- ArthurClemens - 23 Nov 2002

-- ArthurClemens - 29 Jan 2003

%META:TOPICPARENT{name="Repository_patterns"}%

%META:TOPICINFO{author="guest" date="1038009705" format="1.0" version="1.1"}%

Copy box

Also known as:

Principle

Selection

Problem

A webpage presents information that the user needs to copy (and paste in another application). With plain text, it is often hard to make an exact selection - all to easily you copy too much or not enough.

Motivation

Solution

Create a rectangular shaped area (a box) that is indented from (?) the normal text. Give the box a border and a distinct background color. The text inside the box should have high contrast (for instance black).

Diagram

Use when

Implementation

Examples

Example 1

Literature

Used literature

Related literature

-- ArthurClemens - 23 Nov 2002