TeXのロゴは、真ん中の“E”の文字が下に下がっていて、2次元的になっている。プレーンテキストではこういうのが表現できないので“TeX”のように小文字で代用するわけだが、HTML文書でそんなことをするのは甘えである。

そこで、HTML+CSSでTeXのロゴを再現してみよう。（TeXのロゴよりもLaTeXの方が見た目を調整する要素が多いので、ここでは、LaTeXのロゴで行う）

案1

愚直に、AとEの位置をCSSのvertical-alignプロパティーでずらした。

表示例： LATEX

コード例（見やすいように改行とか空白とか使ってインデントしている）
[code lang=”html”]
<span style="font-family: serif;">
L
<span style="vertical-align: super;">
A
</span>
T
<span style="vertical-align: sub;">
E
</span>
X
</span>
[/code]

案2

なんか本物はAの文字が小さい気がする。font-size: smallerを指定しよう。

表示例：LATEX

[code lang=”html”]
<span style="font-family: serif;">
L
<span style="vertical-align: top; font-size: smaller;">
A
</span>
T
<span style="vertical-align: sub;">
E
</span>
X
</span>
[/code]

案3

本物は文字の間隔が詰まっている気がする。letter-spacingを指定しよう。letter-spacingの値は、検討の余地があるだろう。

表示例：LATEX

[code lang=”html”]
<span style="font-family: serif; letter-spacing: -0.1em;">
L
<span style="vertical-align: top; font-size: smaller;">
A
</span>
T
<span style="vertical-align: sub;">
E
</span>
X
</span>
[/code]

案4

最近のSafari、そして直近のFirefoxにはリーディングモードだかリーダーモードが搭載されている。このモードではサイト側で指定したCSSがだいたい無効になる。そうすると、案1〜案3で書いたLaTeXはすべて大文字の“LATEX”になってしまう。これは好ましくない。CSS無効の場合は“LaTeX”になってほしい。

そこで、HTMLとしてはAとEを小文字で書いておき、CSSのtext-transform: uppercaseで見た目を大文字にする。

表示例：LaTeX

[code lang=”html”]
<span style="font-family: serif; letter-spacing: -0.1em;">
L
<span style="vertical-align: top; font-size: smaller; text-transform: uppercase;">
a
</span>
T
<span style="vertical-align: sub; text-transform: uppercase;">
e
</span>
X
</span>
[/code]

ちなみに、この方式で書いた“LaTeX”ロゴをブラウザからコピペした場合、Safariだとすべて大文字で、FirefoxだとAとEが小文字でコピーされた。

おまけ：XeTeX

XeTeXとかいうやつは2文字目のEが反転している。最新のCSS技術を使えば、特定の文字を反転させるのもお手の物である。

表示例：XeTeX

[code lang=”html”]
<span style="font-family: serif; letter-spacing: -0.05em;">
X
<span style="vertical-align: sub; text-transform: uppercase; transform: scale(-1,1); -webkit-transform: scale(-1,1); display: inline-block;">
e
</span>
T
<span style="vertical-align: sub; text-transform: uppercase;">
e
</span>
X
</span>
[/code]

おまけ：WordPressで

このブログはWordPressで動かしているわけだが、LaTeXに言及するたびに長ったらしいHTMLを書き込むのはだるい。また、「以前はこういう書き方してたけどやっぱりこの書き方の方がいいな」となったときにいちいちLaTeXロゴを使っている記事を探して置換するのはだるい。

そこで、WordPressのテーマをいじって、本文中に [LaTeX-logo] と書けばそれがLaTeXロゴを表すHTMLに化けてくれるようにしよう。（こういう風に “[” “]” で囲むやつを、WordPress用語でshortcodeと言うらしい）

テーマのfunctions.phpに以下を書き込む。何をやっているかは、雰囲気でわかるだろう。

• 参考：WordPress › Basic Shortcodes | Plugin Developer Handbook | WordPress Developer Resources

[code lang=”php”]
function tex_logo_shortcode() {
return "<span style=\"font-family: serif; letter-spacing: -0.1em;\">T<span style=\"vertical-align: sub; text-transform: uppercase;\">e</span>X</span>";
}
add_shortcode( ‘TeX-logo’, ‘tex_logo_shortcode’ );

function latex_logo_shortcode() {
return "<span style=\"font-family: serif; letter-spacing: -0.1em;\">L<span style=\"vertical-align: top; font-size: smaller; text-transform: uppercase;\">a</span>T<span style=\"vertical-align: sub; text-transform: uppercase;\">e</span>X</span>";
}
add_shortcode( ‘LaTeX-logo’, ‘latex_logo_shortcode’ );

function XeTeX_logo_shortcode() {
return "<span style=\"font-family:serif;letter-spacing:-0.05em;\">X<span style=\"vertical-align:sub;text-transform: uppercase;transform:scale(-1,1);-webkit-transform:scale(-1,1);display:inline-block;\">e</span>T<span style=\"vertical-align:sub;text-transform: uppercase;\">e</span>X</span>";
}
add_shortcode( ‘XeTeX-logo’, ‘XeTeX_logo_shortcode’ );

function xypic_logo_shortcode() {
return "<span style=\"font-family: serif;\"><span style=\"letter-spacing: -0.2em;\">X<span style=\"vertical-align: sub; text-transform: uppercase;\">y</span></span>-pic</span>";
}
add_shortcode( ‘xypic-logo’, ‘xypic_logo_shortcode’ );
[/code]

真面目にやるなら

この記事ではなんとな〜くノリでロゴの見た目を調整したが、真面目にやるならTeXでの \TeX コマンドの定義を見て文字の大きさとか位置を調整するべきだろう。

ググったらそういうことをやっている人がいたのでリンクを貼っておく。

• TeX and LaTeX logo POSHlets — Edward O’Connor
• Is there CSS for typesetting the LaTeX logo in HTML? – Stack Overflow