2

I'm making a custom stylesheet to add to doxygen output files which is aimed at making website elements not selectable, so that only the useful code/text is selectable. Below is an example of a CSS rule to remove line numbers. Although it seems to select the correct classes, using select-all or dragging with a mouse and then copy/pasting into a text editor still copies over the line numbers. Why does this happen? Furthermore, how do I prevent it?

http://jsfiddle.net/b5cU2/1/

<div class="fragment"><div class="line"><a name="l00099"></a><span class="lineno">   99</span>&#160;{</div>
<div class="line"><a name="l00100"></a><span class="lineno">  100</span>&#160;    <a class="code" href="class_talon.html#a139bb330021efa545fd6047fa291dbeb">Set</a>(output);</div>
<div class="line"><a name="l00101"></a><span class="lineno">  101</span>&#160;}</div>
<div class="ttc" id="class_talon_html_a139bb330021efa545fd6047fa291dbeb"><div class="ttname"><a href="class_talon.html#a139bb330021efa545fd6047fa291dbeb">Talon::Set</a></div><div class="ttdeci">virtual void Set(float value, uint8_t syncGroup=0)</div><div class="ttdef"><b>Definition:</b> <a href="_talon_8cpp_source.html#l00070">Talon.cpp:70</a></div></div>
</div>

<style>
.lineno {
    background-color: red !important;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.line:not(.lineno) {
    background-color: blue;
    -webkit-touch-callout: text !important;
    -webkit-user-select: text !important;
    -khtml-user-select: text !important;
    -moz-user-select: text !important;
    -ms-user-select: text !important;
    user-select: text !important;
}
</style>
Alexander
  • 59,041
  • 12
  • 98
  • 151
  • is jQuery an option? i think the problem is you need to add those css rules to the outer parent from .lineno, also further information can be found here: http://stackoverflow.com/questions/826782/css-rule-to-disable-text-selection-highlighting – caramba Apr 26 '14 at 22:12
  • 1
    Well the 'easiest' method would be to reformat the code so that the line numbers and line contents are in separate containers. – MDEV Apr 26 '14 at 22:19
  • I can select the parents of .lineno, but what use will that be? – Alexander Apr 26 '14 at 22:19
  • Regarding the line numbers, I would advise you to use CSS counters to generate them, so that they're never selectable. Here is an [example](http://jsfiddle.net/LadXs/1/). It has great [browser support](http://caniuse.com/css-counters) – TKrugg Apr 26 '14 at 22:36
  • They're not counted from 0, the line numbers represent the position of the code in source, so they can't be generated on the fly with counters – Alexander Apr 26 '14 at 22:48

1 Answers1

0

It's about how browsers interpret it. Firefox does what you want and matching selector cannot be copied. WebKit allows the text to be copied if you select elements around it.

You could always use another structure. Like this

JimmyRare
  • 3,958
  • 2
  • 20
  • 23