Easy way to copy issue key and summary - Non-visible HTML/CSS tweaks

JIRA uses clipboard-unfriendly HTML and CSS to display the issue key and summary title on many pages (like the one you're reading right now). This makes it unnecessarily hard to copy and paste the key and summary into an email or other document (something I do 5+ times per day).

JIRA could make small changes to its HTML markup and CSS that would not change how the page looks but would make it much easier to copy, paste, and share JIRA info with the outside world. In particular:

• title and summary should show up as a single line of text in text-only clipboard clients
• formatting should be easy to repair for rich-text clients after pasting

To repro:

• on this page, use the mouse to select both the issue key and summary
• copy selection to clipboard
• paste into the title of an Outlook email (or Google Docs or Word or ...)

Expected: 1 line of text, because that's all that will fit into an Outlook email title. Ideally text that's a normal font size. And formatted like this:
JIRA-1234 - Make it easier to copy key and summary.

Actual:

• In outlook email titles, only the issue key shows up. You'll need to paste the clipboard somewhere else, remove the newline, then paste into the email
• In rich-text apps (Google docs, Word, etc.) you'll get a one-line list (which breaks any bullet points you paste into) and then a second paragraph of the summary in a huge font.
• If you use Word's/Outlook's "Merge Formatting" feature to try to match the formatting to your document, you end up with the issue key being 1. in a numbered list because the key is inside an LI element in HTML.

Possible Solution:
By making a few minor HTML and CSS changes, and without making any changes to how your key + summary HTML is displayed, you could make a big improvement in how this content is pasted.

Here's what I did in Firebug as a proof of concept:
1. changed the OL/LI elements currently used for the project name and key to SPAN elements with similar CSS. This is the first step to get plain-text clipboard clients (e.g. Outlook mail titles) to treat the selection as one line instead of two. This change also prevents problematic impact on bullet points and also enables Word/Outlook Merge Formatting to work correctly.
2. added a SPAN after the issue key with content of " - " and style="color:transparent". This adds a " - " after the issue key that won't be normally visible (it's transparent!) but will be copied to the clipboard.
3. wrapped the H1 issue summary title with a DIV with style="display: inline-block; width: 100%;". This is the second part of convincing clipboard clients that this is a one-line block of text.

Steps 1-3 above enable a single line of plain text to be pasted. Whoo-hoo! But rich-text clipboard clients (e.g. Word, Google Docs) still display the text as two lines because the H1 is recognized as a line-breaking block element, even when wrapped inside that sneaky inline-block DIV. But, if you're willing to change the H1 element, then you can get all the text onto one line in all clients using step #4 below:

4. Change the H1 to a SPAN with similar CSS as the H1. I used this CSS: display: inline-block; font-size: 24px; margin-top: -2px; margin-bottom: -2px;

This is still not perfect because the text is in a big font size, but it's massively better than the current state.

Below is the Firebugged HTML after steps 1-4 above. I'm not suggesting you should implement exactly like this, but only want to illustrate that minor HTML and CSS changes could improve usability in an important part of the product without changing how the page looks.

{{
<div class="aui-page-header-main"><span class="aui-nav aui-nav-breadcrumbs __skate"><span><a href="/browse/AEON" id="project-name-val">Seed Web</a><span style="margin: 0 6px 0 2px"> / </span><span><a class="issue-link" data-issue-key="AEON-10353" href="/browse/AEON-10353" id="key-val" rel="77818">AEON-10353</a></span><span style="color:transparent"> - </span></span></span><span style="display: inline-block; width: 100%;"><span style="display: inline-block; font-size: 24px; margin-top: -2px; margin-bottom: -2px;" title="Click to edit" class="editable-field inactive" id="summary-val">Reports cannot be viewed in chrome on iPad<span class="overlay-icon aui-icon aui-icon-small aui-iconfont-edit"></span></span></span></div>
}}