Question

我正在创建HTML页面，其基本字符串和注释位于基本字符串的单词和字母之上。现在我正在使用 ruby，rb 和 rt 标签，我也试过了桌子和div。它看起来像这样：

text ruby markup

来源：

<body>
<ruby>
<rb>新</rb><rt>しん</rt>
<rb>Brasil</rb><rt>ブラジル</rt>
<rb>1</rb><rt>いち</rt>
etc.

我的问题是：有没有办法重写HTML，所以输出看起来大致相同，但同时只允许突出显示黄色的小字符，而不必选择与他们的大字母（以便选择可以复制到剪贴板）？

现在，我尝试使用简单的表格单元格方法，你不得不用小字母突出显示大字母。

图片使关联看起来完全随机，但棘手的部分是标记必须与相应的“大”字母对齐。

Answer 1

<style>
.r { display: inline-block;  text-align: center;}
.ra { display: block;  font-size: 60%; }
</style>
<a class=r><span class=ra>しん</span>新</a>
<a class=r><span class=ra>ブラジル</span>Brasil</a>
<a class=r><span class=ra>いち</span>1</a>

在支持ruby标记的浏览器上，ruby注释看起来可以选择并可复制给我。但是在IE上，当选择注释时，浏览器使用的独特背景颜色也会延伸到基本文本上，因此看起来就像你选择了两者一样。如果你按Ctrl + C和Ctrl + V然后，你会看到只复制了注释。在Chrome上，此问题不存在：仅突出显示所选注释。

这仍然是一个问题。 Firefox不支持ruby标记可能存在更严重的问题。

我上面建议的代码使用带有类的文本级标记而不是ruby标记和样式，以类似ruby的方式显示它。我将注释之前的注释放在注释的单词之前，因为这样很容易将注释放在基础文本之上 - 无需定位，只需将容器元素设置为内联块并将注释设置为内部块。

标记有点混乱，但这种方法在浏览器中广泛使用。我认为主要问题在于display: inline-block，但似乎在这样的简单使用中，support即使在IE的旧版本中也存在（来自IE 5.5）。

如何突出显示红宝石标记文本的顶行（用于复制+粘贴）？

1 个答案: