V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
garywill
V2EX  ›  前端开发

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

  •  
  •   garywill ·
    garywill · 2022-05-27 14:22:52 +08:00 · 935 次点击
    这是一个创建于 909 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

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

    XefsfS.png

    上图的 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>
      
      行。天道虧盈而益謙,地道變盈而流謙,鬼神害盈而福謙,人道惡盈而好謙。謙尊而光,卑而不可逾,君子之終也。
    
    
    2 条回复    2022-05-27 16:01:13 +08:00
    marcong95
        1
    marcong95  
       2022-05-27 15:11:18 +08:00
    如果你要考虑标签语义的话 ruby 应该只是为了东亚文字的注音。

    你这需求感觉用一个竖排 inline-flex 的 span 不好吗?
    garywill
        2
    garywill  
    OP
       2022-05-27 16:01:13 +08:00
    @marcong95 想要用<ruby>主要是为了基线对齐。图中注释一和注释二都有可能是 N 行的,N 又是不可预知的
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2717 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 00:28 · PVG 08:28 · LAX 16:28 · JFK 19:28
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.