UserCSS:拡張吹き出し記法
吹き出し記法の拡張機能
動機
よくあるキャラクター同士が会話するようなコンテンツを想定
Aさんの吹き出しとBさんの吹き出しを色分けで識別したい
実装
文字を大きくする記法の* の数ごとに吹き出しの背景色を割り当てる（10色）
フォントサイズを固定して、大きくする機能を抑制する
すべて同じフォントサイズにする
[**{ セリフ]や[****} セリフ]というような書式
できていないこと（やりたいこと）
強調の文字の大きさの分だけ、隙間が空いてしまう
特に、大きな強調文字は、隙間が大きく、レイアウトが崩れてしまう
吹き出しに見えない
code:style.css
:root {
--main-color: DarkGray; /* 主調色 */
--assort-color: White; /* 従属色 */
--base-color: WhiteSmoke; /* 背景色 */
--accent-color: BlueViolet; /* 強調色 */
--text-color: Black; /* 文字色 */
--l1-color: hsl(0,100%,90%);
--l2-color: hsl(30,100%,90%);
--l3-color: hsl(60,100%,90%);
--l4-color: hsl(90,100%,90%);
--l5-color: hsl(150,100%,90%);
--l6-color: hsl(180,100%,90%);
--l7-color: hsl(210,100%,90%);
--l8-color: hsl(270,100%,90%);
--l9-color: hsl(300,100%,90%);
--l10-color: hsl(330,100%,90%);
}
てすと
code:stylexx.css
.c-0 {
background-color: var(--l1-color) ;
}
.c-1 {
background-color: var(--l2-color) ;
}
.c-2 {
background-color: var(--l3-color) ;
}
code:style.css
span.deco-\{,
span.deco-\} {
text-decoration: none; /* init */
font-size: 18px; /* 固定長 */
/*font-weight: lighter; /* */
height: 26px; /* 固定長 */
line-height: 24px; /* 固定長 */
color: var(--text-color) ;
background-color: var(--base-color);
padding: 0.1em 0.3em 0.1em 0.3em; /* */
/* border-style: solid; /* for test*/
/* border-width: 2px; /* for test*/
/* border-color: #111; /* for test*/ border-radius: 0.4em; /* */
margin: auto 0.4em; /* */
display: inline; /* */
/*display: inline-block; /* */
max-width: calc(100% - 100px);
vertical-align: top; /* */
}
span.deco-\{:before {
position: absolute;
margin: 0;
padding: 0;
transform: translateX(-100%) translateY(calc(1em - 80%));
width: 0;
content: "";
border-width: 0 0 0.6em 0.6em;
border-style: solid;
border-color: var(--base-color) transparent;
}
span.deco-\}:after {
position: absolute;
margin: 0;
padding: 0;
transform: translateY(calc(1em - 80%));
width: 0;
content: "";
border-width: 0 0.6em 0.6em 0;
border-style: solid;
border-color: var(--base-color) transparent;
}
code:stylexx.css
.line strong.level > span.deco-\{,
.line strong.level > span.deco-\} {
text-decoration: none; /* init */
font-size: 18px; /* 固定長 */
font-weight: lighter; /* */
height: 26px; /* 固定長 */
line-height: 24px; /* 固定長 */
}
code:stylexx.css
/* デバッグ用 */
.deco-\!:before, .deco-\!:after {
border-color: #ee6666 transparent; /* */ }
code:stylexx.css
/* デバッグ用 */
.deco-\* {
/* color: #fff; /* 白文字 */ }
code:stylexx.css
/* デバッグ用 */
.level-1 ,
.level-2 ,
.level-3 ,
.level-4 ,
.level-5 ,
.level-6 ,
.level-7 ,
.level-8 ,
.level-9 ,
.level-10
{
/* background-color: red; /* for test */
background-color: yellow; /* for test */
}
幅をつめる
code:stylexx.css
.line strong.level.level-1 ,
.line strong.level.level-2 ,
.line strong.level.level-3 ,
.line strong.level.level-4 ,
.line strong.level.level-5 ,
.line strong.level.level-6 ,
.line strong.level.level-7 ,
.line strong.level.level-8 ,
.line strong.level.level-9 ,
.line strong.level.level-10 {
text-decoration: none; /* init */
line-height: 18px; /* 固定長 */
height: 22px; /* 固定長 */
}
code:style.css
.line strong.level.level-1 > span.deco-\{ , .line strong.level.level-1 > span.deco-\} ,
.line strong.level.level-2 > span.deco-\{ , .line strong.level.level-2 > span.deco-\} ,
.line strong.level.level-3 > span.deco-\{ , .line strong.level.level-3 > span.deco-\} ,
.line strong.level.level-4 > span.deco-\{ , .line strong.level.level-4 > span.deco-\} ,
.line strong.level.level-5 > span.deco-\{ , .line strong.level.level-5 > span.deco-\} ,
.line strong.level.level-6 > span.deco-\{ , .line strong.level.level-6 > span.deco-\} ,
.line strong.level.level-7 > span.deco-\{ , .line strong.level.level-7 > span.deco-\} ,
.line strong.level.level-8 > span.deco-\{ , .line strong.level.level-8 > span.deco-\} ,
.line strong.level.level-9 > span.deco-\{ , .line strong.level.level-9 > span.deco-\} ,
.line strong.level.level-10 > span.deco-\{ , .line strong.level.level-10 > span.deco-\}
{
text-decoration: none; /* init */
text-shadow: none; /* init */
font-size: 18px; /* 固定長 */
font-weight: 400 ; /* 固定長 */
line-height: 20px; /* 固定長 */
height: 22px; /* 固定長 */
color: var(--text-color);
/* border-style: solid; /* for test*/
/* border-width: 2px; /* for test*/
/* border-color: var(--text-color); /* for test*/
}
色を設定
code:style.css
.line strong.level.level-1 > span.deco-\{ , .line strong.level.level-1 > span.deco-\} {
background-color: var(--l1-color);
}
.line strong.level.level-1 > span.deco-\{:before , .line strong.level.level-1 > span.deco-\}:after {
border-color: var(--l1-color) transparent;
}
.line strong.level.level-2 > span.deco-\{ , .line strong.level.level-2 > span.deco-\} {
background-color: var(--l2-color);
}
.line strong.level.level-2 > span.deco-\{:before , .line strong.level.level-2 > span.deco-\}:after {
border-color: var(--l2-color) transparent;
}
.line strong.level.level-3 > span.deco-\{ , .line strong.level.level-3 > span.deco-\} {
background-color: var(--l3-color);
}
.line strong.level.level-3 > span.deco-\{:before , .line strong.level.level-3 > span.deco-\}:after {
border-color: var(--l3-color) transparent;
}
.line strong.level.level-4 > span.deco-\{ , .line strong.level.level-4 > span.deco-\} {
background-color: var(--l4-color);
}
.line strong.level.level-4 > span.deco-\{:before , .line strong.level.level-4 > span.deco-\}:after {
border-color: var(--l4-color) transparent;
}
.line strong.level.level-5 > span.deco-\{ , .line strong.level.level-5 > span.deco-\} {
background-color: var(--l5-color);
}
.line strong.level.level-5 > span.deco-\{:before , .line strong.level.level-5 > span.deco-\}:after {
border-color: var(--l5-color) transparent;
}
.line strong.level.level-6 > span.deco-\{ , .line strong.level.level-6 > span.deco-\} {
background-color: var(--l6-color);
}
.line strong.level.level-6 > span.deco-\{:before , .line strong.level.level-6 > span.deco-\}:after {
border-color: var(--l6-color) transparent;
}
.line strong.level.level-7 > span.deco-\{ , .line strong.level.level-7 > span.deco-\} {
background-color: var(--l7-color);
}
.line strong.level.level-7 > span.deco-\{:before , .line strong.level.level-7 > span.deco-\}:after {
border-color: var(--l7-color) transparent;
}
.line strong.level.level-8 > span.deco-\{ , .line strong.level.level-8 > span.deco-\} {
background-color: var(--l8-color);
}
.line strong.level.level-8 > span.deco-\{:before , .line strong.level.level-8 > span.deco-\}:after {
border-color: var(--l8-color) transparent;
}
.line strong.level.level-9 > span.deco-\{ , .line strong.level.level-9 > span.deco-\} {
background-color: var(--l9-color);
}
.line strong.level.level-9 > span.deco-\{:before , .line strong.level.level-9 > span.deco-\}:after {
border-color: var(--l9-color) transparent;
}
.line strong.level.level-10 > span.deco-\{ , .line strong.level.level-10 > span.deco-\} {
background-color: var(--l10-color);
}
.line strong.level.level-10 > span.deco-\{:before , .line strong.level.level-10 > span.deco-\}:after {
border-color: var(--l10-color) transparent;
}
表示テストtest
Lv1test
Lv2test
Lv3test
Lv4 test
Lv5 test
Lv6 test
Lv7 test
Lv8test
（このへんの隙間が気になる）
Lv9test
Lv10test
アイコンに合わせる
suto3.icontest testsuto3.icon
suto3.icontest testsuto3.icon
suto3.icontest testsuto3.icon
suto3.icontest testsuto3.icon
suto3.icontest testsuto3.icon
suto3.icontest testsuto3.icon
suto3.icontest testsuto3.icon
suto3.icontest testsuto3.icon
suto3.icontest testsuto3.icon
suto3.icontest testsuto3.icon
動作例
/suto3/haku.icon こんにちはー
おや、どうしたんすかsuto3.icon
/suto3/haku.icon 寒くなってきたねー😭
そうですねーsuto3.icon
寒いですねーsuto3.icon
test ですもう一度/suto3/haku.icon これはtest です test です これもtestです
お、どうしたの？ suto3.icon
/suto3/haku.icon にゃーんにゃーん
/icons/Beaver.icon やあ、みんな。元気かな？
ひゃっはー/icons/サーフィン忍者.icon
ワタシハ Linux チョトデキル/icons/linux.icon
Test
testtest
testtesttesttest
testtest
code:style.css
.line span.deco span{
text-decoration: none !important; /* */
/* border-bottom: none !important; /* */
/* text-decoration: none; /* */
/* border-bottom: none; /* */
}
アンダーラインを背景のグラデーションで表現
code:style.css
.deco-\~ {
background: linear-gradient(
transparent 65%,
var(--main-color)
/* var(--l1-color) */
);
}
code:stylexx.css
.level-1 > .deco-\{ ,
.level-2 > .deco-\{ ,
.level-3 > .deco-\{ ,
.level-4 > .deco-\{ ,
.level-5 > .deco-\{ ,
.level-6 > .deco-\{ ,
.level-7 > .deco-\{ ,
.level-8 > .deco-\{ ,
.level-9 > .deco-\{ ,
.level-10 > .deco-\{
background: linear-gradient(
transparent 65%,
var(--main-color)
);
{
code:style.css
.level-1 > .deco-\~ {
background: linear-gradient(
transparent 65%,
var(--l1-color)
);
}
.level-2 > .deco-\~ {
background: linear-gradient(
transparent 65%,
var(--l2-color)
);
}
.level-3 > .deco-\~ {
background: linear-gradient(
transparent 65%,
var(--l3-color)
);
}
.level-4 > .deco-\~ {
background: linear-gradient(
transparent 65%,
var(--l4-color)
);
}
.level-5 > .deco-\~ {
background: linear-gradient(
transparent 65%,
var(--l5-color)
);
}
.level-6 > .deco-\~ {
background: linear-gradient(
transparent 65%,
var(--l6-color)
);
}
.level-7 > .deco-\~ {
background: linear-gradient(
transparent 65%,
var(--l7-color)
);
}
.level-8 > .deco-\~ {
background: linear-gradient(
transparent 65%,
var(--l8-color)
);
}
.level-9 > .deco-\~ {
background: linear-gradient(
transparent 65%,
var(--l9-color)
);
}
.level-10 > .deco-\~ {
background: linear-gradient(
transparent 65%,
var(--l10-color)
);
}
Test
test
UserCSS.icon
https://img.shields.io/badge/UserCSS-拡張吹き出し記法-1572B6.svg?logo=css3&style=for-the-badge