/suto3/UserCSS:拡張吹き出し記法

generated at 2/17/2025, 1:04:15 PM
UserCSS:拡張吹き出し記法
吹き出し記法の拡張機能

動機
よくあるキャラクター同士が会話するようなコンテンツを想定
Aさんの吹き出しとBさんの吹き出しを色分けで識別したい

実装
文字を大きくする記法の *  の数ごとに吹き出しの背景色を割り当てる（10色）
フォントサイズを固定して、大きくする機能を抑制する
すべて同じフォントサイズにする
 [**{ セリフ] や [****} セリフ] というような書式

できていないこと（やりたいこと）
強調の文字の大きさの分だけ、隙間が空いてしまう
特に、大きな強調文字は、隙間が大きく、レイアウトが崩れてしまう
吹き出しに見えない

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%);
 }
てすと
stylexx.css.c-0 {
  background-color: var(--l1-color) ;
}
.c-1 {
  background-color: var(--l2-color) ;
}
.c-2 {
  background-color: var(--l3-color) ;
}

style.cssspan.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;
}

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; /* 固定長 */
}

stylexx.css/* デバッグ用 */
.deco-\!:before, .deco-\!:after {
  border-color: #ee6666 transparent; /* */
}

stylexx.css/* デバッグ用 */
.deco-\* {
  color: #111; /* 黒文字 */
  /* color: #fff; /* 白文字 */
}

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 */
 }

幅をつめる
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; /* 固定長 */
}


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*/
}

色を設定
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

アイコンに合わせる
test test
test test
test test
test test
test test
test test
test test
test test
test test
test test

動作例
 こんにちはー

おや、どうしたんすか

 寒くなってきたねー😭

そうですねー
              寒いですねー
間に説明を入れてみたり
 test ですもう一度  これはtest です
       test です                          これもtestです


 #Scrapbox の更新作業をお願いします。
お、どうしたの？ 
 にゃーんにゃーん

 やあ、みんな。元気かな？

ひゃっはー
ワタシハ Linux チョトデキル
Test

testtest
testtesttesttest
testtest

style.css.line span.deco span{
  /*color: #ee6666; /* 赤 */
  text-decoration: none !important; /* */
  /* border-bottom: none !important; /* */
  /* text-decoration: none; /* */
  /* border-bottom: none; /* */
}

アンダーラインを背景のグラデーションで表現
style.css.deco-\~ {
  background: linear-gradient(
    transparent 65%,
    var(--main-color)
    /* var(--l1-color) */
  );
}


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)
  );
{

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:吹き出し記法
UserCSS:文字装飾記法
吹き出し