如何使 sprite 元素看起来像普通文本一样被选中?
How can I make a sprite element look selected like regular text?
我为 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 制作了一些小图标精灵。最后的代码片段是其输出的示例。
所有图标都包含一个隐藏的文本元素(使用 Bootstrap's .sr-only
),它是符号的纯文本等价物。这意味着您可以 select 它们周围的文本,然后复制并粘贴它们以获得有用的纯文本!例如,如果我 运行 下面的代码片段,突出显示以下内容,然后按 CTRL+C:
然后我将 these: → {W} {U} {B} {R} {G} ←
复制到我的剪贴板并可以将其粘贴到其他地方。这非常有用,而且正是我想要发生的事情。 但是, 这些符号 看起来 不像它们即使它们是 - 所有文本都明显突出显示,符号本身却没有 - 这对用户来说很奇怪,并且对我更喜欢的用户体验造成令人困惑的损害克服。如果它被 select 编辑成可以复制和粘贴的样子,它应该看起来像这样。
(至少,它在 Chrome 和 Windows 上的 Firefox 中是这样工作的。)
如何确保这些元素看起来像普通文本一样被突出显示?
如果需要不同的 HTML 输出也没关系,但我想保持基本精灵 sheet 机制完整(加载一张图像,不要超过一张)。如果输出发生变化,它仍应将 sprite 的明文替代品复制到剪贴板。
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>
←
上面的脚本将一个 sheet 的 32px 精灵打包到一个 16px 的元素中(使用 background-size 强制调整它的大小)。这提供了对高分辨率屏幕的支持,例如视网膜,以及使用浏览器缩放的人。保持这种支持(通过高分辨率精灵或 SVG)是可选的,但更可取。
可供您使用的资源:
- 一个 32px 精灵的精灵 sheet:https://i.stack.imgur.com/kF1U5.png,缩小并打包到示例中的 16px 精灵元素中。
- 16px 精灵,当前未实际使用:https://i.stack.imgur.com/eyrtu.png
- 默认为 16px 精灵的 SVG 精灵 sheet:http://svgur.com/i/Mg.svg
图片资产来源:由我为用户脚本编辑。大多数符号由 micku on github, in turn based on the work of Goblin Hero and skibulk of Slightly Magic. Energy symbol by ahkren of Slightly Magic.
创建
一个选项是使用 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: →
<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>
←
事实证明,<img>
元素在过去几年中已经发展为 spriting。基于 Robin Rendle's guide on CSS Tricks 我已经能够使用 object-position.
重新创建所需的效果
有了这个,我可以使用 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: →
<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}">
←</p>
<p>SVG version →
<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}">
←</p>
我为 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 制作了一些小图标精灵。最后的代码片段是其输出的示例。
所有图标都包含一个隐藏的文本元素(使用 Bootstrap's .sr-only
),它是符号的纯文本等价物。这意味着您可以 select 它们周围的文本,然后复制并粘贴它们以获得有用的纯文本!例如,如果我 运行 下面的代码片段,突出显示以下内容,然后按 CTRL+C:
然后我将 these: → {W} {U} {B} {R} {G} ←
复制到我的剪贴板并可以将其粘贴到其他地方。这非常有用,而且正是我想要发生的事情。 但是, 这些符号 看起来 不像它们即使它们是 - 所有文本都明显突出显示,符号本身却没有 - 这对用户来说很奇怪,并且对我更喜欢的用户体验造成令人困惑的损害克服。如果它被 select 编辑成可以复制和粘贴的样子,它应该看起来像这样。
(至少,它在 Chrome 和 Windows 上的 Firefox 中是这样工作的。)
如何确保这些元素看起来像普通文本一样被突出显示?
如果需要不同的 HTML 输出也没关系,但我想保持基本精灵 sheet 机制完整(加载一张图像,不要超过一张)。如果输出发生变化,它仍应将 sprite 的明文替代品复制到剪贴板。
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>
←
上面的脚本将一个 sheet 的 32px 精灵打包到一个 16px 的元素中(使用 background-size 强制调整它的大小)。这提供了对高分辨率屏幕的支持,例如视网膜,以及使用浏览器缩放的人。保持这种支持(通过高分辨率精灵或 SVG)是可选的,但更可取。
可供您使用的资源:
- 一个 32px 精灵的精灵 sheet:https://i.stack.imgur.com/kF1U5.png,缩小并打包到示例中的 16px 精灵元素中。
- 16px 精灵,当前未实际使用:https://i.stack.imgur.com/eyrtu.png
- 默认为 16px 精灵的 SVG 精灵 sheet:http://svgur.com/i/Mg.svg
图片资产来源:由我为用户脚本编辑。大多数符号由 micku on github, in turn based on the work of Goblin Hero and skibulk of Slightly Magic. Energy symbol by ahkren of Slightly Magic.
创建一个选项是使用 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: →
<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>
←
事实证明,<img>
元素在过去几年中已经发展为 spriting。基于 Robin Rendle's guide on CSS Tricks 我已经能够使用 object-position.
有了这个,我可以使用 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: →
<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}">
←</p>
<p>SVG version →
<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}">
←</p>