HTML的注音排版和其它

曹至梧 2019-07-22 11:33 更新
  1. ruby 标签
  2. VIM 中如何快速生成上面的代码
  3. 使用 LaTeX 排版注音

1. ruby 标签

记得很多年前,我用 CSS 折腾了一个注音的排版格式,与别人交流时,别人问我,“为什么你不直接使用 ruby 标签呢?” 那时我才知道 HTML 中有一个叫 ruby 的标签是专门用来处理注音场景的。

  <p>
    <ruby>你好<rt style="color: red;">ni hao</rt></ruby>
  </p>
  <p>
    <ruby>你好<rt style="color: red;">ni hao</rt></ruby>
  </p>

结果会显示成:

你好ni hao

你好ni hao

当时,只是这样,其实你没有办法控制注音与正文之间的间距,我尝试了一些方式,发现这样处理可以:

  <p>
    <ruby style="display: inline-block;"><rt style="color: red; line-height: 10px;">nihao</rt>你好</ruby>
  </p>

显示出来就是(移动端可能不支持):

nihao你好

图片:

比如下面的代码:

<style>
.ruby { font-size: 20px; }
.ruby p { margin: 10px 0; }
.ruby ruby { display: inline-block; }
.ruby rt { line-height: 12px; font-size: 12px; color: #00a905; }
</style>
<div class="ruby">
<p><ruby><rt>ことし</rt>今年</ruby>もひとつ<ruby><rt>きせつ</rt>季节</ruby>が<ruby><rt>めく</rt>巡</ruby>って</p>
<p><ruby><rt>おも</rt>思</ruby>い<ruby><rt>で</rt>出</ruby>はまた<ruby><rt>とう</rt>远</ruby>くなった</p>
<p><ruby><rt>あいまい</rt>暧昧</ruby>だった<ruby><rt>ゆめ</rt>梦</ruby>と<ruby><rt>げんじつ</rt>现実</ruby>の</p>
<p><ruby><rt>きょうかいせん</rt>境界线</ruby>は<ruby><rt>こ</rt>浓</ruby>くなった</p>
<p>それでもいつか<ruby><rt>きみ</rt>君</ruby>に<ruby><rt>はな</rt>话</ruby>した</p>
<p><ruby><rt>ゆめ</rt>梦</ruby>に<ruby><rt>うそ</rt>嘘</ruby>はひとつもなかった</p>
<p>...</p>
</div>

显示出来是(移动端可能不支持):

ことし今年もひとつきせつ季节めくって

おもはまたとうくなった

あいまい暧昧だったゆめげんじつ现実

きょうかいせん境界线くなった

それでもいつかきみはなした

ゆめうそはひとつもなかった

...

图片:

2. VIM 中如何快速生成上面的代码

先说“宏”的方式吧,很多时候,我觉得用宏比正则直观。(这里最开始我也是随手用宏处理的,后面才去试了正则表达式的方式)

首先,很容易在网上找到这样的原始的文本:

今年(ことし)もひとつ季节(きせつ)が巡(めく)って
思(おも)い出(で)はまた远(とう)くなった
暧昧(あいまい)だった梦(ゆめ)と现実(げんじつ)の
境界线(きょうかいせん)は浓(こ)くなった
それでもいつか君(きみ)に话(はな)した
梦(ゆめ)に嘘(うそ)はひとつもなかった
...

相应的注音会写在括号里,我们要把它们变成带 <ruby> 标签的片段,可以很快速地这样处理。

首先,把中文的括号,换成英文的括号,这是为了后面在“宏”中方便输入。这步简单的查找替换就好了, :%s/(/(/g ,不细说。

然后,手工把注音对应的汉字标记一下(“宏”不太好判断假名与汉字)。

|今年(ことし)もひとつ|季节(きせつ)が|巡(めく)って
|思(おも)い|出(で)はまた|远(とう)くなった
|暧昧(あいまい)だった|梦(ゆめ)と|现実(げんじつ)の
|境界线(きょうかいせん)は|浓(こ)くなった
それでもいつか|君(きみ)に|话(はな)した
|梦(ゆめ)に|嘘(うそ)はひとつもなかった

接首,我们先查找一下 | ,即 /| 。做这一步的目的,是使 vim 查找并且高亮出所有的 | 字符,之后,我们通过 n 就可以直接移动到下一个 | 的位置了,这对我们执行宏非常方便。

接着输入 @a 开始录制一个把汉字部分写成 <ruby> 标签形式的宏,最后的具体操作是:

(针对单组 |今年(ことし) 我们来看)

完整的放一起,就是:

na<80>kb<ruby>^[f)a</ruby>^[F(vf)dF>pF(a<80>kb<rt>^[f)a<80>kb</rt>^[

这些看起来很多,但是因为是录制,完全是记录每一步键盘的操作而已。

录完之后,按一下 q (普通模式下),把这个宏保存到 a 这个缓冲区了。接着,输入 999@a 执行 999 次,就可以了。

用正则表达式就简单了,不过,你先要去 Unicode 的码表,查出日文假名的范围,是 3040 ~ 31FF

对于:

今年(ことし)もひとつ季节(きせつ)が巡(めく)って
思(おも)い出(で)はまた远(とう)くなった
暧昧(あいまい)だった梦(ゆめ)と现実(げんじつ)の
境界线(きょうかいせん)は浓(こ)くなった
それでもいつか君(きみ)に话(はな)した
梦(ゆめ)に嘘(うそ)はひとつもなかった
...

直接正则表达式查找替换:

:%s/\([^\u3040-\u31ff]\{-}\)(\(.\{-}\))/<ruby><rt>\2<\/rt>\1<\/ruby>/g

现实情况中,先不说查 Unicode 码表(或者使用搜索引擎)的事,这个很简单的正则表达式也很难一次就写对,比如,忘了括号要转义,忘了 vim 中的非贪婪匹配是用 \{-} 等等。“宏”就没些问题,单纯记录键盘上的操作,然后重复执行就好了。

3. 使用 LaTeX 排版注音

如果你需要纸制输出,那么更好的选择自然是 LaTeX 。当你有各种“非正常”的输出需求时,总可以在 LaTeX 上找到超高质量的方案。( ruby 宏包可以处理注音)

\documentclass[12pt]{article}
\usepackage{geometry}
\geometry{a4paper,left=1cm,right=1cm,top=3cm,bottom=3cm}
\usepackage{xeCJK}
\setCJKmainfont{微软雅黑}
\setmainfont{微软雅黑}
\usepackage{ruby}
\renewcommand\rubysep{-0.6em}
\linespread{1.7}
\pagestyle{empty}
\usepackage{multicol}
\begin{document}

{\LARGE\textbf{SEASONS}}


\begin{multicols}{2}

\ruby{今年}{ことし}もひとつ\ruby{季节}{きせつ}が\ruby{}{めく}って

\ruby{}{おも}い\ruby{}{}はまた\ruby{}{とう}くなった

\ruby{暧昧}{あいまい}だった\ruby{}{ゆめ}と\ruby{现実}{げんじつ}の

\ruby{境界线}{きょうかいせん}は\ruby{}{}くなった

それでもいつか\ruby{}{きみ}に\ruby{}{はな}した

\ruby{}{ゆめ}に\ruby{}{うそ}はひとつもなかった

La La-i

\ruby{今日}{きょう}がとても\ruby{}{たの}しいと

\ruby{明日}{あす}もきっと\ruby{}{たの}しくて

そんな\ruby{}{}々が\ruby{}{つづ}いてく

そう\ruby{}{おも}っていたあの\ruby{}{ころ}

\ruby{}{}り\ruby{}{かえ}してく\ruby{毎日}{まいにち}に\ruby{}{すこ}し

\ruby{物足}{ものた}りなさを\ruby{}{かん}じながら

\ruby{不自然}{ふしぜん}な\ruby{时代}{じだい}のせいだよと

\ruby{先回}{さきまわ}りして\ruby{}{あきら}めていた

La La-i

\ruby{今日}{きょう}がとても\ruby{}{かな}しくて

\ruby{明日}{あす}もしも\ruby{}{}いていても

そんな\ruby{}{}々もあったねと

\ruby{}{わら}える\ruby{}{}が\ruby{}{}るだろう

\ruby{几度}{いくど}\ruby{}{めぐ}り\ruby{}{めぐ}りゆく

\ruby{}{かぎ}りある\ruby{季节}{とき}の\ruby{}{なか}に

\ruby{}{ぼく}らは\ruby{}{いま}\ruby{}{}きていて

そして\ruby{}{なに}を\ruby{}{}つけるだろう

\end{multicols}
\end{document}

评论
粤ICP备18106170号-1