boltにて、日本語コメントの後の英語翻訳を改行して表示したい。

[yuzuchicch]

対象

わんコメ/テンプレート

利用OS

Windows 11 Pro

利用バージョン: Windows、わんコメやOBSのバージョン

Windows: 11 24H2
わんコメ： 7.2.1
OBS: 0.0.0

PRO版を利用していない

過去ログ確認

した

ドキュメント確認

した

内容

わんコメのテンプレート「bolt」で、日本語＋英語翻訳で使用させて頂いているのですが、
日本語の後の英語翻訳を、日本語の横では無く、日本語の下に（改行して）表示させるにはどうしたらいいでしょうか？
現状では、日本語の横に英語翻訳が表示されるので、画面の大半をコメント字幕が覆ってしまっています。

[shinkunoshizuku]

@yuzuchicch

日本語の後の英語翻訳を、日本語の横では無く、日本語の下に（改行して）表示させるにはどうしたらいいでしょうか？

CSSで簡単に済ませるのであれば、以下のようなCSSの追加（カスタムCSSへの追記で十分です）が考えられます。

.origin {
  display: inline;
}

.t {
  display: block;
}

ただこのCSSを使った場合は、改行は実現するものの、

• 日本語
• 英語
• 空白の行

といった形になってしまうため美しくなく、余計な高さも取ってしまう欠点があります。

---

一方で、boltに限らずですが、テンプレートをコピーしcustomフォルダに入れたうえでCSSはいじらずindex.htmlとscript.jsを変更するのであれば、変更が面倒ではありますが上記CSSの欠点はなくなります。

細かな実装方法はお任せしますが、

index.htmlは

<div class="comment-text">
  <span class="origin" v-if="comment.data.commentOriginHtml" v-html="comment.data.commentOriginHtml"></span>
  <br v-if="comment.data.translated">
  <span class="t" v-if="comment.data.translated" v-html="comment.data.translated"></span>
</div>

script.jsは

extractOriginAndTranslation(html) {
  const div = document.createElement('div');
  div.innerHTML = html;
  const originSpan = div.querySelector('span.origin');
  const tSpan = div.querySelector('span.t');
  return {
    origin: originSpan ? originSpan.outerHTML : '',
    translated: tSpan ? tSpan.outerHTML : ''
  };
}

// originとtranslatedを抽出して格納
const result = this.extractOriginAndTranslation(comment.data.comment)
// 翻訳がない場合は全体をoriginとして扱う
comment.data.commentOriginHtml = result.origin || comment.data.comment
comment.data.translated = result.translated

といった追記や書き換えを行うことで、ご希望の改行結果が余計な行を表示させることなく実現できています。

---

上記コードでの実装サンプルとしては、以下テンプレートを参考にしてみてください。

https://nvl-game.tokyo/uploads/onecomme/templates/bolt-forum-2373.zip

[yuzuchicch]

shinkunoshizuku様

アドバイスありがとうございます。
僕はHTMLさえ分からないのですが、お教えの通り、index.htmlを比較して、ここかな？と思う所に流し込み、script.jsはよく分からなかったので、zipのものをそのまま使用させて頂いて、テストで動かしてみた所、無事、日本語の後改行して英語表記されました。

素早く丁寧に対応して頂き、誠にありがとうございました！

[burikiyasan]

私が使用しているやり方は style.css の最後に
/改行/
.t::before { content: “\A” ;
white-space: pre; }
.t { word-break: break-word; }
/( ）を外す/
.par { display: none; }

を追加して利用しています。

[yuzuchicch]

ありがとうございます！