settings
ルビ記法が便利だ
code:style.css
.col-page {
max-width: 600px;
}
.editor {
font-size: 15px;
line-height: 25px
}
ルビ記法
code:style.css.old
.line:not(.cursor-line) .deco-\# {
display: inline-flex;
flex-direction: column-reverse;
}
.line:not(.cursor-line) .deco-\# > span:nth-child(1) {
display: inline-flex;
justify-content: space-around;
width: 100%;
}
.line:not(.cursor-line) .deco-\# > span:nth-child(2) {
line-height: 0;
}
.line:not(.cursor-line) .deco-\# > span:nth-child(2) > a {
display: inline-flex;
justify-content: space-around;
width: 100%;
font-size: 50%;
/* 以下はふりがなをリンクにしない場合に入れる */
pointer-events: none;
color: var(--page-text-color, #4a4a4a);
}
code:style.css
/* <ruby>相当 */
.line:not(.cursor-line) .deco-\# {
display: inline-flex;
flex-direction: column-reverse;
vertical-align: bottom; /* Chrome 108で表示が乱れる場合の対応 */
}
/* <rb>相当 */
.line:not(.cursor-line) .deco-\# > span:nth-child(1) {
display: inline-flex;
justify-content: space-around;
width: 100%;
}
/* <rt>相当 */
.line:not(.cursor-line) .deco-\# > span:nth-child(2) {
line-height: 0;
font-size: 50%;
}
/* <rt>相当 */
.line:not(.cursor-line) .deco-\# > span:nth-child(2) > a {
display: inline-flex;
justify-content: space-around;
width: 100%;
pointer-events: none;
color: var(--page-text-color, #4a4a4a);
}