<?xml version="1.0" encoding="utf-8" standalone="yes" ?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
  <channel>
    <title>Presentaiton-Separation on Rindrics Mumbles</title>
    <link>https://rindrics.com/tags/presentaiton-separation/</link>
    <description>Presentaiton-Separation</description>    
    <generator>Hugo -- gohugo.io</generator>
    <language>en</language>
    <lastBuildDate>Mon, 20 Jul 2026 00:00:00 +0900</lastBuildDate>
    <atom:link href="https://rindrics.com/tags/presentaiton-separation/index.xml" rel="self" type="application/rss+xml" />
    
    <item>
      <title>喜びの声: 日本語と英数字の間にスペースを入れたくなる問題から解放された</title>
      <link>https://rindrics.com/posts/cheers-to-text-autospace/</link>
      <pubDate>Mon, 20 Jul 2026 00:00:00 +0900</pubDate>
      
      <guid>https://rindrics.com/posts/cheers-to-text-autospace/</guid>
      <description>&lt;p&gt;&lt;a href=&#34;https://developer.mozilla.org/ja/docs/Web/CSS/Reference/Properties/text-autospace&#34;&gt;&lt;code&gt;text-autospace&lt;/code&gt;&lt;/a&gt;の存在を知って、日本語と英数字の間にスペースを入れてしまう問題に終止符を打てたのでメモ。&lt;/p&gt;
&lt;p&gt;結論、下記をやればいい:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;日本語&amp;ndash;英数字の間隔をコントロールする目的のスペースは使わない&lt;/li&gt;
&lt;li&gt;&lt;code&gt;text-autospace: normal;&lt;/code&gt;を設定する&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;執筆時点（2026/07/20）では&lt;a href=&#34;https://drafts.csswg.org/css-text-4/#propdef-text-autospace&#34;&gt;&lt;code&gt;text-autospace&lt;/code&gt;の仕様&lt;/a&gt;が完全には実装されていなさそうだったので、かんたんな検証結果をメモしておく。&lt;/p&gt;
&lt;h2 id=&#34;前提&#34;&gt;前提&lt;/h2&gt;
&lt;p&gt;日本語と英数字が隙間なく詰まった文章は美しくないと思う。
&lt;figure&gt;&lt;img src=&#34;https://rindrics.com/images/2026-07-20-space/tight.webp&#34;
    alt=&#34;ギッチリ詰まっていると色々な意味でみにくい。&#34;&gt;&lt;figcaption&gt;
      &lt;p&gt;ギッチリ詰まっていると色々な意味でみにくい。&lt;/p&gt;
    &lt;/figcaption&gt;
&lt;/figure&gt;

&lt;figure&gt;&lt;img src=&#34;https://rindrics.com/images/2026-07-20-space/spaced.webp&#34;
    alt=&#34;あ、ステキ。&#34;&gt;&lt;figcaption&gt;
      &lt;p&gt;あ、ステキ。&lt;/p&gt;
    &lt;/figcaption&gt;
&lt;/figure&gt;

気づいたら、日本語と英数字の間にスペースを入れる手癖がついてしまっていた。
いつの間にか編み出していた状況に応じた細かいルールや、この方法のデメリットなどは下記の記事で書き尽くされているのでここでは繰り返さない:








&lt;div class=&#34;card&#34;&gt;
  &lt;a href=&#34;https://qiita.com/CodeOne/items/43d2b8e4247b020652b2&#34; target=&#34;_blank&#34; rel=&#34;noopener noreferrer&#34; class=&#34;card-link&#34;&gt;
    &lt;div class=&#34;card-content&#34;&gt;
      &lt;h4 class=&#34;card-title&#34;&gt;[Solved] 日本語文章中、英単語の両端にスペースをつける人 | qiita.com&lt;/h4&gt;
      
      &lt;span class=&#34;card-url&#34;&gt;https://qiita.com/CodeOne/items/43d2b8e4247b020652b2&lt;/span&gt;
    &lt;/div&gt;
  &lt;/a&gt;
&lt;/div&gt;
&lt;/p&gt;
&lt;h2 id=&#34;検証環境&#34;&gt;検証環境&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;macOS 15.6.1&lt;/li&gt;
&lt;li&gt;Firefox 151.0.3 (aarch64)&lt;/li&gt;
&lt;/ul&gt;
&lt;h2 id=&#34;試したこと&#34;&gt;試したこと&lt;/h2&gt;
&lt;p&gt;&lt;a href=&#34;https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/text-autospace#syntax&#34;&gt;シンタックスの解説ドキュメント&lt;/a&gt;によると、&lt;code&gt;text-autospace&lt;/code&gt;には複数の値を設定できるようになっている。
ドキュメントをマネして設定してみたが、目標位置の間隔を思うように調整できないことがあったのでメモしておく。&lt;/p&gt;
&lt;p&gt;日本語と数字の間:
&lt;figure&gt;&lt;img src=&#34;https://rindrics.com/images/2026-07-20-space/spacing1.webp&#34;
    alt=&#34;日本語&amp;ndash;数字間制御のレンダリング結果。text-autospaceにnormalあるいはideograph-numericを指定したときにスペースが追加されている&#34;&gt;&lt;figcaption&gt;
      &lt;p&gt;日本語&amp;ndash;数字間制御のレンダリング結果。&lt;code&gt;text-autospace&lt;/code&gt;に&lt;code&gt;normal&lt;/code&gt;あるいは&lt;code&gt;ideograph-numeric&lt;/code&gt;を指定したときにスペースが追加されている&lt;/p&gt;
    &lt;/figcaption&gt;
&lt;/figure&gt;
&lt;/p&gt;
&lt;p&gt;日本語と英語アルファベットの間:
&lt;figure&gt;&lt;img src=&#34;https://rindrics.com/images/2026-07-20-space/spacing2.webp&#34;
    alt=&#34;日本語&amp;ndash;英字間制御のレンダリング結果。text-autospaceにnormalあるいはideograph-alphaを指定したときにスペースが追加されている&#34;&gt;&lt;figcaption&gt;
      &lt;p&gt;日本語&amp;ndash;英字間制御のレンダリング結果。&lt;code&gt;text-autospace&lt;/code&gt;に&lt;code&gt;normal&lt;/code&gt;あるいは&lt;code&gt;ideograph-alpha&lt;/code&gt;を指定したときにスペースが追加されている&lt;/p&gt;
    &lt;/figcaption&gt;
&lt;/figure&gt;
&lt;/p&gt;
&lt;p&gt;どちらも、&lt;code&gt;text-autospace&lt;/code&gt;に複数の値を設定したときにうまく動いていない。
結果を総合すると、&lt;code&gt;normal&lt;/code&gt;を指定した時が一番いい感じになる。&lt;/p&gt;
&lt;p&gt;シンタックスドキュメントの誤りかと思ってドキュメントを修正しかけたが、&lt;a href=&#34;https://drafts.csswg.org/css-text-4/#typedef-autospace&#34;&gt;仕様&lt;/a&gt;を見たところ確かに&lt;code&gt;[ ideograph-alpha || ideograph-numeric || punctuation ]&lt;/code&gt;なのでこれらについては「複数設定できる」は正しそう。&lt;/p&gt;
&lt;p&gt;下記を見る限り、現時点で未実装なだけだと思う:








&lt;div class=&#34;card&#34;&gt;
  &lt;a href=&#34;https://bugzilla.mozilla.org/show_bug.cgi?id=1869577&#34; target=&#34;_blank&#34; rel=&#34;noopener noreferrer&#34; class=&#34;card-link&#34;&gt;
    &lt;div class=&#34;card-content&#34;&gt;
      &lt;h4 class=&#34;card-title&#34;&gt;Implement text-autospace CSS property | bugzilla.mozilla.org&lt;/h4&gt;
      
      &lt;span class=&#34;card-url&#34;&gt;https://bugzilla.mozilla.org/show_bug.cgi?id=1869577&lt;/span&gt;
    &lt;/div&gt;
  &lt;/a&gt;
&lt;/div&gt;
&lt;/p&gt;
&lt;h2 id=&#34;学んだこと&#34;&gt;学んだこと&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;&lt;code&gt;text-autospace: normal;&lt;/code&gt;は全てを解決する（2026/07/20現在）&lt;/li&gt;
&lt;li&gt;仕様がある機能の場合には、バグ起票・pull request作成の前に仕様書を読もう&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;このブログも晴れてスペースフリーになった。
見た目のためにコンテンツを汚染している罪悪感から解放されて、人生の幸福度が0.1%くらい上がった。
メンテナの方々、ありがとうございます。&lt;/p&gt;</description>
    </item>
    
  </channel>
</rss>
