小文字の上つけ・下つけ・中つけ - Scrapboxカスタマイズコレクション

小文字の上つけ・下つけ・中つけ

https://gyazo.com/6b6a27df6697fbe038d129a5146f656d

小さい文字をテキスト行の　上、下、中　の位置へずらして表示するCSS。群馬と栃木に特別な関係はない。

修飾記号を後置指定にしたので、前から異なる修飾記号でエフェクトが追加できる（色文字やstorng など）。　　

[( 上つけの小文字]

[(_ 下つけの小文字]

[(- 中つけの小文字]

https://i.gyazo.com/944483eda3b3ad73d0f4d1c48ffda607.png

code:style.css

:root {

--MY-Ruby-SW: 1;

}

:not(.cursor-line) > .text class$="deco-\( deco-\_" ,

:not(.cursor-line) > .text class$="deco-\( deco-\-" ,

:not(.cursor-line) > .text class$="deco-\(" {

height: 14px; /* サイズはお好みで　*/

font-size: 0.6em;

padding: 0px 1px;

justify-content: space-around;

position: absolute;

z-index: 1;

opacity: calc(var(--MY-Ruby-SW) *1.0); /* 透過スイッチ */

}

:not(.cursor-line) > .text class$="deco-\(" { /* 行間に合わせて調整が必要！！ */

margin-top: -1.30em;

}

:not(.cursor-line) > .text class$="deco-\( deco-\_" {

margin-top: 1.30em;

}

:not(.cursor-line) > .text class$="deco-\( deco-\-" {

margin-top: 0.03em;

}

おまけ

どこでも RUN_JavaScriptBT with_HTML＆CSS　を実装して、ウザいときに非表示にするスイッチのページを作っておく。　

code:RUN.css

:root {

--MY-Ruby-SW: 0 !important;

}

code:RUN.js

alert('一時的にルビを非表示にします。\n\nページリロードすればもとに戻ります。')

UserCSS.icon