てがろぐ - Fumy Otegaru Memo Logger -

ご報告ありがとうございます。

Re:3898◆ご報告ありがとうございます。iOS版Safariで確認してみたところ、たしかにご指摘の表示になりますね。もしかしてMac版Safariでもそうなるのでしょうか？ 解決策が2通りありますので、後述します。
Re:3899◆たこ焼きアイコンありがとうございます！ たこ焼きが並べられて嬉しいです。(笑) また、解決策もありがとうございます。おっしゃる方法どちらもうまくいきました。以下に記します。

▼SVG画像でのカスタム絵文字が横方向に並ばない場合の対処方法(1)
➡ SVG画像をテキストエディタで開き、1行目にあるwidthとheightの値を書き換える。
例えば、<svg width="100%" height="100%" viewBox="0 0 32 32"  ... のように書かれているなら、
ここを、<svg width="32" height="32" viewBox="0 0 32 32" ... のように書き換えます。

ここが、<svg width="100%" height="100%" viewBox="0 0 50 65"  ... のように書かれているなら、
ここを、<svg width="50" height="65" viewBox="0 0 50 65" ... のように書き換えます。

このようにすると、CSSに関係なくSVG画像は（iOSでも）横並びになってくれます。


▼SVG画像でのカスタム絵文字が横方向に並ばない場合の対処方法(2)
➡ 横幅の最大値も制限するCSSを追記する。
デフォルト設定では、（カスタム絵文字に対して）てがろぐは style="width:auto; height:auto; max-height:2em; vertical-align:middle;" というCSSを挿入します。ここでは高さの最大値は指定されていますが、横幅の最大値は指定されていません。どうやらiOS版のSafariは、（SVG画像にwidth="100%"があるとき）描画空間として横幅100％を確保してしまうっぽいですね。なので、以下のCSSをスキン等に追記すれば解決します。
.cemoji img { max-width:2em; }
これで横幅も最大2文字分に制限されますので、下図の右側の通り、横に並んでくれました。
ただ、これだと、あらゆる絵文字の横幅が 2em になりますので、もし takoyaki だけに限定して適用したいなら、
.ce-takoyaki img { max-width:2em; }
のようにすると良いかもしれません。



個人的には、SVG画像のソースを書き換えた方が良いのではないかと思いますけども。大きく表示させたいケースがある場合には、SVGソースはそのままで、CSSで対処する方が良いかもしれませんが。
（たぶん、Safariの問題なんでしょうね……？）

🍘動作テスト：
➡ここでは、SVG画像のソースを直接書き換えたバージョンを置いています。
➡開発放言では、SVG画像はそのままで、CSSソースを追記して対処しています。
どちらもiOSで確認しても同じように横並びになっていました。

🍘注意：
上記の対策を施しても、iOS側でブラウザのキャッシュをクリアしないと表示に反映されないのでご注意下さい。
iOS版ブラウザにスーパーリロードの仕組みはないっぽいので、例えばここで紹介されている「閲覧履歴とタブを維持したい場合」の方法で操作するのが良いかもしれません。