<ruby>实现 web 中的文字注释,只能单行吗?(例如还需要多行文字、小图之类)

2022-05-27 14:22:52 +08:00
 garywill

虽然通过<ruby>标签嵌套,可以搞出多行注释来,

除了嵌套有有其他办法吗?

还想加入点小 svg 之类的呢?

上图的 HTML:

謙,亨,天道下濟而光明,地道卑而

<div style="border: 0.5px dashed;display: inline-block;">
 <ruby style="text-decoration: underline;">
 
   <ruby style="ruby-position: under;">
    <a name="char1">上</a>
    <rt style="background-color: aqua;">
      註釋二:xxx
    </rt>
   </ruby>
 
   <rt>註釋一</rt>
 </ruby>
  
</div>
  
  行。天道虧盈而益謙,地道變盈而流謙,鬼神害盈而福謙,人道惡盈而好謙。謙尊而光,卑而不可逾,君子之終也。

935 次点击
所在节点    前端开发
2 条回复
marcong95
2022-05-27 15:11:18 +08:00
如果你要考虑标签语义的话 ruby 应该只是为了东亚文字的注音。

你这需求感觉用一个竖排 inline-flex 的 span 不好吗?
garywill
2022-05-27 16:01:13 +08:00
@marcong95 想要用<ruby>主要是为了基线对齐。图中注释一和注释二都有可能是 N 行的,N 又是不可预知的

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/855671

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX