将下划线向右移动

Question

正在关注 this question of marking a position between 2 characters, somebody suggested to use decoration of Monaco Editor. I tried the following code in the playground。

(* JavaScript: *)

var editor = monaco.editor.create(document.getElementById('container'), {
    value: "fg(23,)",
    language: 'javascript'
});

var decorations = editor.deltaDecorations(
    [],
    [
        {
            range: new monaco.Range(1, 6, 1, 7),
            options: { inlineClassName: 'myInlineDecoration' }
        }
    ]
);

(* CSS: *)

.myInlineDecoration {
    text-decoration: underline;
    text-decoration-style: wavy;
    text-decoration-color: red;
}

它返回了这个输出：

然而，

似乎 text-decoration-style: wavy 返回的下划线比我们在 the yellow underlines here.
这样的编辑器中经常看到的普通下划线“更波浪形”
如果下划线可以右移0.5个字符就更好了，那么,和)之间的位置就会有下划线。

有谁知道如何做到这一点（可能是 CSS）？

Answer 1

如果目标是使下划线更明显，css 属性 text-decoration-skip-ink: none; 可能会有所帮助。文本下划线通常被下降部分覆盖，即落在下划线下方的字母部分。 skip-ink 属性允许波浪形下划线覆盖文本。好像还不错browser support. And here is a link to documentation.

如果您只想在某些文本下划线，那么 Monaco 编辑器可能不是一个好的解决方案。

运行下面的代码片段包含和不包含 text-decoration-skip-ink.

的示例

.wavy1 {
  text-decoration: underline wavy red;
}

.wavy2 {
 text-decoration: underline wavy red;
 text-decoration-skip-ink: none;
}

<div style="font-size:2em;">

  fg(23<a class="wavy1">,</a>)  fg(23<a class="wavy2">,</a>)
  <br/>
  <span class="wavy1">jgpyq</span> <span class="wavy2">jgpyq</span>

</div>

Answer 2

基于@Roberto 的回答，您可以使用以下 CSS 在 .myInlineDecoration 之后插入内容，将内容本身设置为透明并为其添加下划线（可见）：

.myInlineDecoration {
   text-decoration: none; 
   position: relative; 
 }   

.myInlineDecoration:after {
    text-decoration: underline;
    text-decoration-color: red;
    text-decoration-style: wavy;
    position: absolute;
    height: 1px;
    margin: 0 5px; /* adjust to move left and right */
    content: 'x';
    color: rgba(0, 0, 0, 0);
    left: 0;
    bottom: 13px; /* adjust to move up and down */
}

Javascript如下：

var editor = monaco.editor.create(document.getElementById('container'), {
    value: "fg(23,)\ngh(45,)",
    language: 'javascript'
});

var decorations = editor.deltaDecorations(
    [],
    [
        {
            range: new monaco.Range(1, 6, 1, 7),
            options: { inlineClassName: 'myInlineDecoration' }
        },
        {
            range: new monaco.Range(2, 3, 2, 4),
            options: { inlineClassName: 'myInlineDecoration' }
        }
    ]
);

我不认为这是最好的解决方案（使用 CSS 而不是依赖 Monaco 感觉很老套 - 但我不确定如何仅在 Monaco 中做到这一点）

将下划线向右移动

Shift the underline to the right

javascript

css

monaco-editor