Webエンジンなしで数式を高速に描画する方法

moteには一つの絶対的なルールがあります。Webエンジンに依存しないことです。

プロトタイプを作りながら気づきました。このようなアプリでは、内蔵ブラウザエンジンがコストの大部分を占めるということに。そこで、最初から外すことにしました。

問題は数式でした。通常はKaTeXやMathJaxをブラウザ上で動かして数式を描画します。moteでは使えない方法でした。

ほかの方法も合いませんでした。独自のフォントレンダラーを使うと、文字の形がシステム上のほかのアプリと異なってしまいます。moteでは、すべての文字をプラットフォームのテキストエンジンで描画することにしていたからです。

結局、最も難しい道を選びました。

配置はmoteが、文字はプラットフォームが

数式の構文は、馴染みのある方式に従いました。文章内ではドル記号一組で、独立させるときは二組で囲みます。

開始記号の直後と終了記号の直前には、空白を置けません。$5や$6のような金額を数式として誤認識しないためです。人が直接書くMarkdownでは、このような小さな区別が重要です。

数式を描画する作業は二つに分けました。

moteのコアが文字と線の位置を計算します。実際の文字は、各プラットフォームのテキストエンジンが描画します。

コアにはTeXの組版規則を簡略化して組み込みました。四つのサイズ段階、記号を八つの種類に分けて間隔を決める表、添字・分数・根号の位置、内容に合わせて大きくなる括弧などです。

ただし、文字の実際の大きさはコアが決めるわけではありません。同じ文字でも、フォントやプラットフォームによって大きさが異なるためです。コアが「この文字をこのサイズで描画すると、どれくらいの大きさになりますか？」と尋ねると、プラットフォームが答えます。コアはその値をもとに配置を完成させ、プラットフォームは決められた位置に文字と線を描画します。

そのおかげで、プラットフォームが増えても管理するレイアウトは一つだけで済みます。

エディターでも原文はそのまま残ります。ライブモードで数式が表示されても、ソースのバイト列は行の中にあります。その場所に、数式の大きさに相当する空間だけを確保します。

そのため、キャレットが正確な位置に立ち、クリックした文字を正確に見つけられます。画面は装飾してもファイルは変更しないという原則を守ったのです。閲覧モードとPDFでも同じレイアウトを使用します。

イタリック体も無理に傾けません。Unicodeの数学用文字を使用し、フォントに収録されている実際の数学用グリフを描画します。

未知の数式を隠しません

数式は、ひっそりと間違っていると発見しにくいものです。

サポートしていないコマンドを空欄で表示すると、ユーザーは入力ミスなのか、アプリの限界なのか判断できません。そこでmoteは、未知のコマンドを名前のまま赤色で表示します。

括弧が対応していなくても、アプリは停止しません。このような入力はテストとして残し、同じ問題が繰り返されないようにしました。

パフォーマンスの原則も守りました。数式と文字サイズごとに、計算結果を最大512個まで保存します。入力中に同じ数式を繰り返し計算せず、ユーザーが何もしていないときには、いかなる処理も実行しません。

HTMLへ書き出す際にはMathMLを使用します。ブラウザが数式を直接描画するため、スクリプトは必要ありません。インターネットがなくても、数式はそのまま表示されます。

まだできないこともあります

moteがTeXのすべてをサポートしているわけではありません。

ユーザー定義コマンド、色指定、数式番号、複数行の添字、文字の上に置く記号、矢印の上の文字には、まだ対応していません。

幅に合わせて伸びるアクセント記号もありません。幅の広いハットも、幅の狭いハットのように表示されます。大きな総和記号と積分記号は、専用グリフの代わりに1.45倍へ拡大して描画します。縦方向にだけ伸びるべき括弧も、横と縦が一緒に大きくなります。

インライン分数はTeXと同じように小さく表示されます。より大きく表示するには、別途コマンドで指定する必要があります。

これらの機能が、すでにあるかのようには言いません。必要だという要望が届けば、一つずつ追加していきます。

数式一つのために、アプリ全体のコスト構造を変えることはしませんでした。その代わりに、数式を描画する方法を変えました。

より難しい道でしたが、長く歩み続けられる道だと信じています。