I've made some small icon sprites for a userscript for another Stack site. It embeds some icon elements onto the page that look like the Magic: the Gathering mana symbols using a sprite sheet. The code snippet at the end is a sample of its output.
All of the icons contain a hidden text element (using Bootstrap's .sr-only) which is the plain text equivalent of the symbol. This means you can select the text around them, and copy and paste them to get useful plain text! For example if I run the code snippet below, highlight the following, and press CTRL+C:
Then I've copied these: → {W} {U} {B} {R} {G} ← onto my clipboard and can paste that elsewhere. This is pretty useful, and exactly what I want to happen. However, the symbols don't look like they're getting selected with the text around them even though they are — all the text is obviously highlighted, the symbols themselves are not — and this is weird for a user and a confusing detriment to user experience I'd prefer to overcome. If it's getting selected like it could be copied and pasted, it should look like it.
(At least, it works this way in Chrome and Firefox on Windows.)
How can I ensure these elements look like they're being highlighted just like regular text?
It is OK if different HTML output is required, but I would like to keep the basic sprite sheet mechanism intact (load one image, not more than one). If the output's changed, it should still copy plaintext alternatives to the sprites to your clipboard.
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>
←The script above packs a sheet of 32px sprites into a 16px element (using background-size to forcibly resize it). This provides support to high-resolution screens, e.g. retina, and people using their browser zoom. Maintaining this support (via high-resolution sprites or SVG) is optional but preferable.
Resources available for you to use:
- A sprite sheet of 32px sprites: https://i.stack.imgur.com/kF1U5.png, downsized and packed into the 16px sprite elements in the sample.
- 16px sprites, not actually currently used: https://i.stack.imgur.com/eyrtu.png
- An SVG sprite sheet that defaults to 16px sprites: http://svgur.com/i/Mg.svg
Image asset credits: Edited by me for the userscript. Most symbols created by micku on github, in turn based on the work of Goblin Hero and skibulk of Slightly Magic. Energy symbol by ahkren of Slightly Magic.
