iOS環境で、MFMのfont構文内で改行すると表示がおかしくなる

[momizi06]

💡 Summary

MFMのfont構文($[font ])を使用する際、構文内に改行を入れると表示がおかしくなる(スクリーンショット参照)。

🥰 Expected Behavior

構文内で改行しても、インライン要素のように振る舞い、構文前後で行が異なっても行毎に揃って表示される

🤬 Actual Behavior

ブロック要素のように振る舞ってしまい、構文内で改行するとそのままfont構文の内容だけ改行されてしまう。

📝 Steps to Reproduce

1. 投稿フォームを開く
2. 任意のfont構文内に改行を含む文章を入力する

aaa$[font.serif bc
def]

3. 投稿するか、プレビュー機能を使用する

💻 Frontend Environment

* Model and OS of the device(s): iPhone SE2, iOS 18.7.1
* Browser: Safari(PWA, 通常のアプリのどちらでも再現を確認)
* Server URL: misskey.io
* Misskey: 2025.4.1-io.12b-fb6fbea074

補足: はなみすきー及び自鯖でも同じ症状が再現できたため、Misskey本体のバグと考えられる。

はなみすきー及び自鯖のMisskeyバージョンを以下に示す。

* 自鯖(misskey.momizi06.com): 2025.12.2-tempura-2.0.1-dev
  * Misskey-Tempura
* はなみすきー(misskey.flowers): 2025.11.1-hanami.28653+699d10a34d

また、端末依存を疑ったものの他のiOS環境でも再現を確認した。
https://misskey.io/notes/anppvl42msx4014g についているリプライ等を参照

🛰 Backend Environment (for server admin)

* Installation Method or Hosting Service:
* Misskey:
* Node:
* PostgreSQL:
* Redis:
* OS and Architecture:

Do you want to address this bug yourself?

• Yes, I will patch the bug myself and send a pull request

[syuilo]

Windowsでもなりました

[dosubot]

Hi @momizi06! I'm Dosu and I'm helping the syuilo's Org team.

This issue is likely caused by the display: inline-block styling applied to the <span> element wrapping font function content. In packages/frontend/src/components/global/MkMfm.ts, all styled MFM functions (including font) are rendered as [1]:

return h('span', {
  style: 'display: inline-block; ' + style,
}, genEl(token.children, scale));

inline-block gives the span block-level layout properties, which causes content with newlines to be treated as a self-contained block rather than flowing inline with surrounding text. This explains why the font-styled text breaks out of the normal text flow on iOS Safari.

For comparison, semantic inline elements like <b>, <i>, and <del> (used for bold, italic, strike MFM) don't have this issue because they remain truly inline elements without the inline-block override.

A potential fix would be to use display: inline instead of display: inline-block for the font function specifically, since font styling (just font-family) doesn't require block-level layout properties. However, this change would need to be considered carefully since the same rendering pattern is shared by other MFM functions (tada, shake, spin, etc.) that may genuinely need inline-block for their transform/animation effects.

To reply, just mention @dosu.

---

Share context across your team and agents. Try Dosu.

[momizi06]

なんか自分で直せそうなので一旦テストしてからPR作成します

[kakkokari-gtyih]

However, this change would need to be considered carefully since the same rendering pattern is shared by other MFM functions (tada, shake, spin, etc.) that may genuinely need inline-block for their transform/animation effects.

にもあるように、これを修正したことが原因で既存のMFMを用いたテキストが壊れないかは気になる