#2529 Copying code from Firefox mangles newlines
Opened 2 years ago by sanqui. Modified 13 days ago

For example, copying a portion of this file:

https://pagure.io/pagure/blob/master/f/setup.py

results in the following in the clipboard:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
#!/usr/bin/env python

"""

Setup script

"""

# Required to build on EL6

__requires__ = ['SQLAlchemy >= 0.8', 'jinja2 >= 2.4']

import pkg_resources

import os

import re

from setuptools import setup

pagurefile = os.path.join(os.path.dirname(__file__), 'pagure', '__init__.py')

# Thanks to SQLAlchemy:

# https://github.com/zzzeek/sqlalchemy/blob/master/setup.py#L104

with open(pagurefile) as stream:

    __version__ = re.compile(

        r".*__version__ = '(.*?)'", re.S

    ).match(stream.read()).group(1)

It is desirable that the newlines are preserved correctly.

This problem is not present with Chrome.


Would you have any idea on how to fix this? Otherwise I'd recommend you use the Raw view to copy text :)

The problem seems to be the <pre> tag in each row of the code:

<tbody><tr><td class="cell1"><a id="_1" href="#_1" data-line-number="1"></a></td>
<td class="cell2"><pre><span style="color: #8f5902; font-style: italic">#!/usr/bin/env python</span></pre></td>
</tr>
<tr><td class="cell1"><a id="_2" href="#_2" data-line-number="2"></a></td>

</tr><tr><td class="cell1"><a id="_3" href="#_3" data-line-number="3"></a></td>
<td class="cell2"><pre><span style="color: #8f5902; font-style: italic">"""</span></pre></td>
</tr>
<tr><td class="cell1"><a id="_4" href="#_4" data-line-number="4"></a></td>
<td class="cell2"><pre><span style="color: #8f5902; font-style: italic">Setup script</span></pre></td>
</tr>

<pre> is a block element. Semantically, Firefox puts extra newlines around one.

There are multiple fixes possible here but generally the block element needs to go. You could set display: inline; onto the <pre>. Or you could change the <pre> to a <span> and set a monospace font with CSS, as well as a pre-like white-space property.

It may also be necessary to include a <td> for empty rows, which is not currently done.

Correction: seems like just adding display: inline; to <pre> isn't enough to change the behavior in Firefox. So the best path is probably to switch to <span> with font-family: monospace and white-space: pre (or pre-wrap).

Would you like to make a PR for this?

I'll give it a shot :)

Metadata Update from @pingou:
- Issue tagged with: bug

2 years ago

I don't think using span is a good solution. pre is semantically correct. \<pre>\<code> even better. I can dig around and see if the is another solution.

Did either of you find a solution for this one?

looking at the html as rendered, I see:

  1. a lot of CR's, particularly after close tags for TD and TR. In trying to do multi-browser similar rendering in the past, I have had to go in and get rid of those to get similar appearances. This is a 'practical' real world, rather than a 'against the specification' observation

  2. it is intentional to have 'line by line' PRE pairs? :

"""
Setup script
"""

Instead of changing the underlying html, we could use a javascript listener on copy event to clean the copied text and achieve this

Login to comment on this ticket.

Metadata