All geek questions in one place

How can I make a sprite element element selected as plain text?

I made some small sprites for the user for another Stack site . It overlays some icon elements on the page that look like Magic: the Gathering mana symbols using a sprite sheet . The code snippet at the end is a sample of its output.

All icons contain a hidden text element (using Bootstrap.sr-only ), which is the equivalent of a plain text symbol. This means that you can select the text around them, copy and paste them to get useful plain text! For example, if I ran the code snippet below, select the following and press CTRL + C:

selection wrapping mana symbols and some text around them

Then I copied these: → {W} {U} {B} {R} {G} ←to my clipboard and can paste it to another location. This is very useful, and exactly what I want. However, the characters do not look , because they are selected with the text around them, even if they are - all the text is clearly selected, the characters themselves are not; and it’s weird for the user and intricate damage for the user, which I would prefer to overcome. If it is selected, how it can be copied and pasted, it should look like this.

(At least it works this way in Chrome and Firefox on Windows.)

How can I ensure that these elements look as if they are highlighted in the same way as plain text?

, HTML, ( , ). , .

body {
  font-family: sans-serif;
}

.mana-symbol {
  display: inline-block;
  width: 16px;
  height: 16px;
  background: url('//i.stack.imgur.com/kF1U5.png') no-repeat black;
  background-size: 169px;
  position: relative;
  top: 0.2em;
  box-shadow: 1px 1px 0px 0px #000;
  border-radius: 8px;
}

.mana-symbol .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

.mana-symbol.W { background-position: -68px -34px }
.mana-symbol.U { background-position: -85px -34px }
.mana-symbol.B { background-position: -102px -34px }
.mana-symbol.R { background-position: -119px -34px }
.mana-symbol.G { background-position: -136px -34px }
try selecting, copying and pasting these: →
<span class="mana-symbol W"><span class="sr-only">{W}</span></span>
<span class="mana-symbol U"><span class="sr-only">{U}</span></span>
<span class="mana-symbol B"><span class="sr-only">{B}</span></span>
<span class="mana-symbol R"><span class="sr-only">{R}</span></span>
<span class="mana-symbol G"><span class="sr-only">{G}</span></span>
&larr;
Hide result

script 32px 16px ( ). , . , . ( SVG) , .

, :

: . , micku on github, . ahkren of Small Magic.

+4
2

, <img> . Robin Rendle CSS- , .

16px, SVG. , 32px, SVG- , .

body {
  font-family: sans-serif;
}

.mana-symbol {
  object-fit: none;
  object-position: 0 0;
  width: 16px;
  height: 16px;
  box-shadow: 1px 1px 0px 0px #000;
  border-radius: 50%;
}

.mana-symbol.W { object-position: -68px -34px }
.mana-symbol.U { object-position: -85px -34px }
.mana-symbol.B { object-position: -102px -34px }
.mana-symbol.R { object-position: -119px -34px }
.mana-symbol.G { object-position: -136px -34px }
<p>try selecting, copying and pasting these: &rarr;
<img src="//i.stack.imgur.com/eyrtu.png" class="mana-symbol W" alt="{W}">
<img src="//i.stack.imgur.com/eyrtu.png" class="mana-symbol U" alt="{U}">
<img src="//i.stack.imgur.com/eyrtu.png" class="mana-symbol B" alt="{B}">
<img src="//i.stack.imgur.com/eyrtu.png" class="mana-symbol R" alt="{R}">
<img src="//i.stack.imgur.com/eyrtu.png" class="mana-symbol G" alt="{G}">
&larr;</p>

<p>SVG version &rarr;
<img src="http://svgur.com/i/Mg.svg" class="mana-symbol W" alt="{W}">
<img src="http://svgur.com/i/Mg.svg" class="mana-symbol U" alt="{U}">
<img src="http://svgur.com/i/Mg.svg" class="mana-symbol B" alt="{B}">
<img src="http://svgur.com/i/Mg.svg" class="mana-symbol R" alt="{R}">
<img src="http://svgur.com/i/Mg.svg" class="mana-symbol G" alt="{G}">
&larr;</p>
Hide result
+2

- color: transparent;, position: absolute; .. , .

body {
  font-family: sans-serif;
}

.mana-symbol {
  display: inline-block;
  width: 16px;
  height: 16px;
  background: url('//i.stack.imgur.com/kF1U5.png') no-repeat black;
  background-size: 169px;
  top: 0.2em;
  box-shadow: 1px 1px 0px 0px #000;
  border-radius: 8px;
  color: transparent;
}

.mana-symbol.W { background-position: -68px -34px }
.mana-symbol.U { background-position: -85px -34px }
.mana-symbol.B { background-position: -102px -34px }
.mana-symbol.R { background-position: -119px -34px }
.mana-symbol.G { background-position: -136px -34px }
try selecting: &rarr;
<span class="mana-symbol W"><span class="sr-only">{W}</span></span>
<span class="mana-symbol U"><span class="sr-only">{U}</span></span>
<span class="mana-symbol B"><span class="sr-only">{B}</span></span>
<span class="mana-symbol R"><span class="sr-only">{R}</span></span>
<span class="mana-symbol G"><span class="sr-only">{G}</span></span>
&larr;
Hide result
+1

Source: https://habr.com/ru/post/1662888/

More articles:


All Articles