数式に横スクロールバーが表示される

[hahho]

昔からある不具合だと思うのですが、Discussionsを探した感じ言及がないので投稿いたしました。重複してましたら申し訳ございません。

検索したところいくつか対処法(1, 2)があるのですが、数式の多い記事だと書く側に余計に多くの負担がかかるのと、見た目が多少悪くなってしまいます。

[tanaka-asami415]

@hahho
ご意見ありがとうございます🙏

数式関連のご意見は他でもいただいているのですが、対応できておらず申し訳ないです… 🙇
こちらでは再現ができなかったりと調査や解決がなかなか思うようにいかず、お時間をいただいています。何卒ご了承ください 🙇

[tsubolabo]

　対処法(2)を投稿した本人が言うのもなんですが、本当に、\hspace{0.1ex} など、いちいちやっていられません。コピペで貼り付けるにしても面倒だし、なによりも可読性が下がって、あとが大変です。

　また、0.1ex 程度では言うことを聞かない数式に対しては、できるだけスペースが目立たないように、0.2ex, 0.3ex,... と、何回もご機嫌伺いをしながら適値を捜していかねばならず、すごく手間がかかります。

　ということで、本件に関しては早期の改善を「切望」しております。再現が困難とのことですが、本当に稀な現象で、極々一部の特殊環境のユーザーだけが我慢すれば済む問題なのか？　それとも、かなり広く現れている現象なのか？　それさえもユーザーには伝わってきません。もう少し情報を公開していただければ、ユーザーからも、何か解決の糸口になるような材料を提供できるかもしれません。

当面の対処法：

• ①　\hspace{0.1ex} を、例えば \q で代用できるようにマクロ登録します。
  $\def\q{\hspace{0.1ex}}$
  別途、マクロ登録時にできる無駄なスペースへの対処は必要です（下記参照）。
  \newcommandのみの数式ブロックが空白として表示される #326

• ②　@mogamoga1337 さんの対処法(1)（数式内末尾に半角スペース「\ 」を入れる）と、下記の自分の拘り
  　
  『 文中数式の前後の全角文字との間には、多くの場合、半角スペースを入れることにしている。その方が数式の前後が詰まり過ぎず美しく感じるから』
  　
  を融合させ、今までは「変数 $\alpha\beta\gamma$ とする」（$～$間には必要に応じて\hspace{0.1ex}を含める）と書いていたところを「変数$\ \alpha\beta\gamma\ $とする」と書き替えれば、見た感じは従来とさほど変わりませんが、少しは手間が減ると思われます。近々投稿予定の記事はこれで対処しようと思っています。

• ③　「\ 」(0.58～1.40ex相当,不定)の代わりに、「\,」(0.39ex相当)「\:」(0.52ex相当)「\;」(0.65ex相当)を使う手もあります。

[hahho]

@tsubolabo さん、そうですよね。僕も\hspace{0.1ex}で頑張ろうと思いましたが挫折しました。

@tanaka-asami415 さん

DevToolsを使って少し調べてみました。

現在CSS上で.MathJax {overflow-x: auto;}の指定が入っているようです。autoですと、オーバーフローする要素にスクロールバーが表示されてしまうので、hiddenかvisibleにするべきです。でも、.MathJaxを書き換えるとディスプレイモード（$$で括る数式）にも影響ありそうですが、多分ディスプレイモードではスクロールに対応したほうが良さそうですね。

Web系は全く本職ではないので、不正確な点があるかもしれませんが、参考になれば

[hahho]

ちなみに余談ですが、今のqiitaだとスクロールバーが表示されなくても数式の右端の方がクリップされることがよくあります。

試しに、.MathJax {overflow-x: visible; overflow-y: visible}のようにしましたら、その症状がなくなりました。

[kskwtnk]

@hahho
ご提案ありがとうございます:pray:

一度、ご提案いただいたcssも考慮して修正したいと考えております。
こちらで再現できていないため、修正後に再度お声がけさせていただきます 🙇

[tsubolabo]

xrxoxcxox さん

お世話になります。
「再現できていない」ことは、以前にも何回か 伺いました。そこで蛇足情報かもしれませんが、下記の件をお伝えしておきます。投稿記事（[Qiita]数式の下の無駄なスクロールバーを消す）には書いていましたが、この discussions では話題にしたことがなかったので、念のためです。この現象は環境によっては全く現れません。既に把握されている内容でしたらパスしてください。

この現象を確認できた環境は、Windows10下のEdgeとChrome。この問題の発生が全くないのが、iPadのSafariとWindows10下のFirefoxです。あとは未確認です。

[kskwtnk]

@hahho @tsubolabo
CSSの変更を実施しました！
現在、みなさんのお手元だとスクロールバーの表示はどうでしょうか……？

我々の方で網羅して検証すべきなのですが、ご協力いただけますと幸いです 🙏

[hahho]

素早い修正ありがとうございます！
いくつか記事を確認したのですが、僕の環境だとスクロールバーは全部なくなってました！

[tsubolabo]

xrxoxcxox さん

数式のプレビューがおかしい #298 の画像で例示していた不具合のうち、下記の問題についてはすべて解決しています。私の他の投稿記事は殆どhspaceで応急対策をしていたので、すぐには効果を確認できませんが、たぶん直っていると思われます。ありがとうございました。

１．不必要なスクロールバー（私としては、これが最優先課題）
２．ベースラインの不揃い
３．文字の上の装飾記号の隠れ

しかし、#298 の本題の方（下記）には未だ改善は見られません。引き続き改善をお願いしておきます。しかし、最優先課題が解決したようなので大助かりです。

投稿エディタのプレビュー画面で、数式 $\mathbf{e}_x$ などの表示が不安定です。

[tsubolabo]

　横スクロールバー問題は、他の記事でも解決していることが確認できましたので、「[Qiita]数式の下の無駄なスクロールバーを消す 」の冒頭に下記の note info を追記しておきました。

2022-11-15、Qiitaのシステムの改善により、数式の下の無駄なスクロールバーは出なくなりました。この記事は無意味になりましたが、過去の記録としてそのまま残しておきます。

[kskwtnk]

@hahho
確認ありがとうございます！よかったです！

@tsubolabo

投稿エディタのプレビュー画面で、数式 ex などの表示が不安定です。
こちらの点は、現在使用しているライブラリの挙動にも関わりがありそうで、もう少し時間がかかるかもしれません 🙏
引き続き調査や数式周りの改善をします！