特定の子要素の有無でレイアウト（ｃｓｓ）を切り替える

Question

前提・実現したいこと

サイトに文章を掲載する際に”吹き出し”を
用いて文章を表示しているのですが、
”ふりがな”<ruby><rt></rt></ruby>を吹き出し内1番上の行に
記入した際に発生する上の余白が気になっております。

下の画像を参考にしてください。
左側が現在の状況で、右側が理想の状態です。

条件は下記の３つになります

①rubyが1行目（1行目をline-height:0にしているので実質2行目）
にある場合、padding-topの設定を変える。
（元が10pxなので、2px程度の予定）

②rubyが2行目以降にしかない場合、上に空白ができる
ことはないのでpadding-topの設定は変わらない。

③新規でのclass名などは用いず、rubyが最初の行に
あるかないかでレイアウトの振り分けを行う

想定としては以上になります。

該当のソースコード

【HTML】

<div class="sentence">
<span class="CharaName">
ふりがな有
</span><p class="l1">
<ruby>テスト<rt>ふりがな</rt></ruby>テストテストテスト
テストテストテストテスト
</p></div>

※今回は.sentence p　内だけの設定です。
.l1は吹き出しの見た目だけなので
paddingの設定に影響はしていません。

【　CSS　】

/*　吹き出しまたは台詞　*/
.sentence
{display:flex;
position:relative;
margin-top:-15px}

/*　名前欄　*/
.sentence .CharaName{
width:4em;
padding:1.6em 0.5em 0.5em 0.5em;
text-align: right;
}


/*　台詞・説明欄内　*/
.sentence p{
white-space: pre;
position: relative;
background: #fff;
margin-left:10px;
border-radius:10px;
padding:**10px** 15px 7.5px 15px;　⇦こちらの10pxが上の空白です
width:auto;
}


/*最初の行、改行取り消し*/
.sentence p:first-line
{line-height: 0px;}

/*フォントサイズ調整*/
rt{transform: scale(0.78);}

吹き出しのレイアウト

.sentence .l1{
border:solid 1px;
}

.sentence .l1:before,
.sentence .l1:after{
content: ""; position: absolute;
}

 .sentence .l1:before {
top: 22px; left: -13px;
margin-top: -12px;
border: 5px solid transparent;
border-right: 10px solid #FFF;
z-index: 2;
}

 .sentence .l1:after {
top: 23px; left: -15px;
margin-top: -13px;
border: 5px solid transparent;
border-right: 10px solid #555;
}

試したこと

プログラムの知識がないので、cssだけで
対応を試みたのですが、ruby事態にcssでposition:absoluteや
position:relativeを指定してもrubyで囲った文字だけが
移動してしまう為空白の調整はできず、:first-childや:notなどで
色々検証してみても上記の３つの条件を満たせるものは
cssだけでは実現できそうにありませんでした。

jQueryに.has（）のようなものがあるのは
調べて分かったのですが、それで設定する方法も
私の方では理解できなかったのでこちらで質問を
させていただきました。

よろしくお願いします。

補足情報（FW/ツールのバージョンなど）

Comments

[takopo]

ご提示いただいたコードだけでは「現在の状況」が再現できません。.paragraph .sentence .l1 や ruby rt には何かスタイルがかかっていますか？こちらで再現できるだけのコードを載せていただいた方が回答を得られやすいと思います。あとコードは ``` で囲うと見やすくなります。

[youser]

takopoさんコメントありがとうございます。
他にスタイルが掛かっている要素はl1の吹き出しの
見た目とsentenceのcssぐらいです。
念の為そちらのcssも追記しておきます。

Answer 1

CSSの ::firstline疑似要素 が使えるかと思ってためしてみたけど、white-space: pre;だと無効になるようです。

たぶん、CSSだけでは無理だと思います。JS を使って、rt のp内での相対位置を取得して、一行目ならpaddingTop を 0 にするというのでいけそうです。

let p = document.querySelectorAll('.sentence p');
for (var i = 0; i < p.length; i++) {
  const rt = p[i].querySelector('rt');
  if ((rt !== null)  && (rt.getBoundingClientRect().top - p[i].getBoundingClientRect().top) < 40) {
    p[i].style.paddingTop = "0";
  };
}

Comments

[youser]

hatena19さんご解答ありがとうございます。
さっそく記入してみたのですが、
反映される様子はありませんでした。

導入内容は、htmlファイル内に
<script type="text/javascript" >　</script>
を追加して、この中にお教えいただいたコードを記入してみたのと、
jsファイルにそのまま追加する二つの方法で試してみました。

これらのやり方に問題があったのかも
しれませんので、何かアドバイスをいただければ幸いです。

[hatena19]

さきほど、回答のコードを少し修正しましたので、もう一度コードをコピーして試してみてください。
(null判定を追加しました。）

<script type="text/javascript" >　</script>内に記述する場合は、 </body>の直前に記述してみてください。

Codepenサンプル
https://codepen.io/hatena19/pen/gOrEypv

[youser]

編集された内容を拝見させていただきました。
上の空白についてですが、詰めることはできておりました。

しかし、例えば1行目にrubyが存在せず
2行目以降にのみrubyが存在していた場合
ふりがなのない1行目が上に移動してしまって
余白がない状態となっております。

1行目にrubyがある時にのみ、
今の設定を導入することはできますでしょうか？

[hatena19]

前回のコメントのサンプルをみてください。2行目以降にのみrubyが存在していた場合は上に移動してないです。
どこかサンプルと異なるところがあると思います。確認してみてください。

[youser]

原因が分かりました。

/*最初の行、改行取り消し*/
.sentence p:first-line
{line-height: 0px;}

これの有無によって結果が変わっていたようです。

こちらを加味した上でご対応いただけないでしょうか？
よろしくお願いします。

[hatena19]

padding-Top: 0 は1行目に rt がある場合に適用されてます。
それ以外（2行目以降に rt がある場合も）は padding-Top: 10px; です。

.sentence p:first-line
{line-height: 0px;}
があり ruby もあると padding 以外の余白が少しつくようですね。
これを消す方法はちょっと分かりません。

[hatena19]

.sentence p::first-line {
line-height: 0;
font-size: 0;
}
としたらよさげです。

[youser]

ご回答ありがとうございます。

Codepenサンプル
https://codepen.io/hatena19/pen/gOrEypv
に記入されておりませんでしたが、

.sentenceにはdisplay:flex;が導入されており
font-size: 0;を指定した場合
吹き出しがうまく機能しなくなってしまいました。

.sentence
{display:flex;
position:relative;
margin-top:-15px}

/*　名前欄　*/
.sentence .CharaName{
width:4em;
padding:1.6em 0.5em 0.5em 0.5em;
text-align: right;
}

.sentence p:first-line
{line-height: 0px;
font-size: 0px;}

追加でこちらを記入してみてください。
状態がご確認いただけるかと思います。

[hatena19]

そもそも、
.sentence p:first-line {line-height: 0px;}
がなぜ必要かというと、
.sentence p{white-space: pre;} としているので改行が削除されずにページにそのまま出力されます。
そのため、

<p class="l1">
<ruby>テスト<rt>ふりがな</rt></ruby>テストテストテスト

の<p class="l1">の後に改行があるので、1行分空いてしまいます。
それを消す為ですよね。

<p class="l1"><ruby>テスト<rt>ふりがな</rt></ruby>テストテストテスト

と最初から改行をなくしておけば、.sentence p:first-line {line-height: 0px;} は不要になります。
そうすれば display:flex; があってもうまくいきます。
サンプルを修正しましたので確認ください。

https://codepen.io/hatena19/pen/gOrEypv

[youser]

仰られる通り
1行分改行して文章を書いていましたので
.sentence p:first-line {line-height: 0px;} を
利用していました。

その旨は条件①にも（）内ではありますが
予め記載はしております。

ご指摘の内容は頭にあったのですが、
htmlに直接書き込んで作業をしておりまして、
その際に作業をしやすいのが今の形だったので
できればこの設定を崩さないようお願いしたいです。

該当のソースコードにあるcssは基本崩さず
jsだけで2行目を指定すると言うのは難しいでしょうか？

不躾な要求ばかりで申し訳ございませんが、
ご検討いただければ幸いです。

[hatena19]

.sentence p:first-line {line-height: 0px;}
というのが他のも悪影響を与えていて事態を複雑にしています。
逆に、改行をいれないだけのことがそんなに難しいことですか？

どうしても必要ということなら js で<p class="l1">の直後の改行を取り除けばいいでしょう。

[hatena19]

let p = document.querySelectorAll('.sentence p');
for (var i = 0; i < p.length; i++) {
p[i].innerHTML = p[i].innerHTML.trim(); //前後の改行と空白の削除
const rt = p[i].querySelector('rt');
if ((rt !== null) && (rt.getBoundingClientRect().top - p[i].getBoundingClientRect().top) < 20) {
p[i].style.paddingTop = "0px";
};
}

先頭だけでいいなのら trimStart() で。

[youser]

trimStart()にしたところ
上手く機能いたしました。
ご対応いただきありがとうございます。