三自排版运动(三):CSSXSLT

缘起

在《〈恶补记〉流水帐》当中说过了,《真・流水账》(或曰「日记」)的「Microsoft™©® Word™©® 2010」版所使用的主题,是在内置样式当中选了一套看上去简洁清爽的格式和配色。而在Markdown版当中,则依赖Typora的内置主题,惦记着要换成差不多的样式。说虽然自己对CSS很熟悉,但是对「设计工作者」擅长的领域不熟悉,于是(当时)决定「多一事不如少一事」。

不过呢,最近大张旗鼓开展「三自运动」,已经涉及到这个暂时挂起的革命任务了。所以,不忘初心牢记使命,把相关进程从后台切换到前台,自力更生艰苦奋斗,自己动手丰衣足食,当然必须依赖自由民主进步和谐的境外赛博朋克英特纳雄耐尔主义者的无私奉献。

因为老迈年高,在与时俱进的童年才俊以我听都没听说过的新鲜名词嘲笑之下,只能绞尽脑汁回忆已经被扫入历史垃圾堆的过时伎俩,先用网页形式试验一阵,感觉差不多了,再删繁就简配合Typora主题的CSS,搞定。

没啥大不了的

随便找个什么「图形图像处理」工具,使用「ColorPicker」之类道具,从「Microsoft™©® Word™©® 2010」版日记的编辑界面当中窃取配色。炮制的CSS文件如下:

@import 'han.css';
h1 {
    padding: 0.5rem 1rem;
    background-color: #DBE5F1;
}
h2, h3, h4, h5, h6 {
    margin: 0.5rem 0;
    padding: 0.5rem 1rem;
    border-color: #4F81BD;
}
h2 { border-style: solid none none solid; }
h3 { border-style: double none none double; }
h4 { border-style: dashed none none dashed; }
h5 { border-style: dotted none none dotted; }
h6 { border-style: none none dotted none; }

另存为「fanhan-inside.css」,注意要用不带BOMUTF-8编码或者干脆就是「系统默认」,反正没出现ASCII以外的字符。并且文件名必须是小写字母,中间只能用单独的横线相连,这涉及到Typora「识别」主题文件的方式。

然后把这个文件放在Typora主题目录之内,不知道在哪里的可以通过Typora设置界面上的按钮打开。当然,提前要到Typora主页上下载那个专门为了汉字排版而设计的「han.css」文件,这也是我画蛇添足或狗尾续貂所用的原型。

启动Typora,用菜单选择「Fanhan Inside」主题,效果如下:

Typora效果
Typora效果

看上去似乎有点像了吧,也就是对标题的位置、颜色、边框略作调整并根据html特点即兴发挥,别的样式没敢覆盖,毕竟咱又不是专业的,已经配好的码字样式还是保留原样吧。

有啥大不了的

但是这点内容太少了,不够一篇随笔,接下来准备加入XSLT的内容。

说过了最近「极力避免」编程,尽量通过「设置」和「数据」实现,但是有些内容必须「编程」。哎呀食言了出尔反尔了自抽耳光了前倨后恭了……这可咋办呢?

这时候,老迈年高的的不入流码农想起了十几年前的往事。在那上世纪末的19991116日,W3C推出了「XSLT/XPath 1.0」版。那时候咱老汉21岁整,比前几年央视公益广告当中铺天盖地以「我23岁,年轻不可看轻」造势的那位新时代中国特色社会主义接班人钦定主角龙傲天还要年轻。

虽然XSLT已经出到了3.0版,并且一大堆开源的第三方实现也已经与时俱进,但是迄今为止主流浏览器只支持1.0版。在2002年,咱老汉买了一本书唤作《XSLT程序员参考手册(原书第二版)》,讲的就是1.0版,虽然有些工具和环境变了,但是讲解的内容迄今为止仍未过时。

所以,折衷方案就是XSLT,作为伪装成「数据」的「程序设计语言」,还是「图灵完备」的,可以以XML为输入输出实现任何「计算机」程序。并且,就我目前所面对的需求而言,运行环境只需要浏览器就够了。即便是不超过34岁的童年才俊,想要与时俱进还得单独下载各种第三方库,而不是对任何普通用户来说都「免费」且「唾手可得」的浏览器。

先测试浏览器,就用最简单的例子,一个字符一个字符的从书上抄下来的:

«hello.xml»

<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet type="text/xsl" href="hello.xsl"?>
<greeting>Hello, World!</greeting>

«hello.xsl»

<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0"
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
    <xsl:template match="/">
        <html>
            <head>
                <title>Today's greeting.</title>
            </head>
            <body>
                <p>
                    <xsl:value-of select="greeting"/>
                </p>
            </body>
        </html>
    </xsl:template>
</xsl:stylesheet>

保存好,双击,启动IE,显示正常;拖进FireFox,也显示正常:

对XSLT的支持
XSLT的支持

唯独Chrome不正常,上网乱搜解决方案,通常都提示去下载个插件,但是「谷歌商店」的链接在防火长城之外,访问不了。于是作罢,顺便联想起最近惹是生非当中提到的,为啥「专门提供IT解决方案」的皮包公司会在「香港」,而996工作制撸起袖子加油干的「实业」多放在「改革开放排头兵の深圳」。

至于为啥招聘的「苦哔码农」多来自「九省通衢の武汉」,那是因为武汉高校那「磕头认爹拿学位」的优良传统。这种膝盖生根头顶绿得发黑贱到骨子里去了的奴才,不狠狠压榨一番岂不是对不住这个河清海晏歌舞升平的百善の新时代?

可以参考九省通衢の活跃色目帐号应景发表的政策解读:

粤港澳大湾区与九省通衢
粤港澳大湾区与九省通衢

言归正传

因为XSLT可以使用JavaScript™编写扩展函数,所以借鉴MathJaxKaTeX这种当前既存的开源成果,可以实现「不编程」而在XSLT处理「文本」时转换其中「嵌入」的数学公式的目标。与此同时,转换Markdown的过程也有开源成果,可以通过替换作为标签的字符实现我在《〈恶补记〉流水帐》当中吹过的牛哔。

整个过程「自力更生艰苦奋斗」「自己动手丰衣足食」,但是不要忘了「自由民主进步和谐」,没有境外赛博朋克英特纳雄耐尔主义者的无私奉献,前面俩「自」就是真・吹牛哔「厉害了谁的国」「为谁或啥点赞」这种。

下载了KaTeXMathJax简单看了看,发现有个更简单的AsciiMath直接输出MathML,对于XML应用来说「嵌入」更方便。作为试验,很轻松就能实现,然后再根据情况分析源码拆出相应功能渲染成SVG之类。顺便,之前提到过在VS Code上所用插件的「KaTeX」不支持一些Unicode符号,看官方发布的消息是「字体」原因,所以之前《三自造字运动》那篇时机刚好。

为了保持兼容性和照顾多方面用户需求,境外赛博朋克英特纳雄耐尔主义者做了很多工作,最起码MathJax的速度不如KaTeX的主要原因,就是支持了多种输入方式,包括「TeX」「MathML」「AsciiMath」。由于在我的当前目标中MathML是输出,那么只需要试验「TeX」和「AsciiMath」即可。

先使用「LaTeXMathML.js」,页面文件如下:

<!DOCTYPE html>
<html>
<head>
    <script src="LaTeXMathML.js"></script>
    <style>
        span.math {
            font-size: 1.5rem;
            padding-left: 0.5rem;
            padding-right: 0.5rem;
        }
        div.math {
            font-size: 1.5rem;
        }
    </style>
    <title>LaTeX to MathML Test</title>
</head>
<body>
    <p>行内公式可以正确显示,比如<span class="math">$\mathfrak{M}(z)=\frac{az+b}{cz+d}$</span>这「默比乌斯变换」。</p>
    <p>行间公式也可以正确显示,比如「非我族类其心必异」范数:</p>
    <div class="math">$
        \parallel\bullet\parallel_✡=
        \parallel\bullet\parallel_☪=
        \parallel\bullet\parallel_✠=
        \parallel\bullet\parallel_☭=
        \delta(x, y)=
        \left\{
            \begin{array}{rcl}
                0, x=y \\
                1, x \neq y
            \end{array}
        \right.
    $</div>
    <p>由于使用MathML,Unicode字符相关处理看来不用操心了也。</p>
</body>
</html>

同样,Chrome显示不出来,而IE需要启动ActiveX插件「MPlayer」,所以,工作环境以FireFox为准。测试效果如下:

LaTeXMathML测试
LaTeXMathML测试

由于是在脚本内部通过字面常量替换的方式生成MathML,很多内容暂且不支持,比方说「\color」操作。不过由于是脚本,源代码就在那里摆着,需要扩展什么内容,都可以自力更生艰苦奋斗自己动手丰衣足食。

接下来是「ASCIIMathML.js」,注意这个脚本可以配置的内容较多,除了字体颜色之外,最起码默认「分隔符」是反撇号,在Markdown当中用来标记代码。所以,为了便利起见,建议替换为平时正常码字绝不会用到的字符,注意只能有一个字符。

于是挑了一个已经被当代日语弃用的平假名,即便是「华语第一精日论坛」等地的娱乐至死の逗哔颠倒是非混淆黑白、胡说八道胡搅蛮缠、倒打一耙贼喊捉贼、造谣污蔑栽赃陷害、撒泼耍赖满地打滚、插科打诨嬉皮笑脸、睁大眼睛额头亮晶晶的装蒜兼贵人多忘事……也不会用到。而哪里有压迫哪里就有反抗的我以「杠精」身份与之对喷,当然也用不到。

AsciiMath的语法和LaTeX不一样,细节请参考其主页「http://asciimath.org」,支持的功能也不一样。比方说上面「范数」中间占位符用的不是「圆点」(\cdot)而是「子弹」(\bullet),在AsciiMath中就不支持;而设定具体颜色反而可以获得支持。

测试文件内容如下:

<!DOCTYPE html>
<html>
<head>
    <script src="ASCIIMathML.js"></script>
    <style>
        span.math {
            font-size: 1.2rem;
            padding-left: 0.5rem;
            padding-right: 0.5rem;
        }
        div.math {
            font-size: 1.5rem;
        }
    </style>
    <title>ASCII Math Test</title>
</head>
<body>
    <p>行内公式可以正确显示,比如<span class="math">ゑcolor(blue)(fr"M")(color(red)(z))=(a color(red)(z)+b)/(c color(red)(z)+d)ゑ</span>这「默比乌斯变换」。</p>
    <p>行间公式也可以正确显示,比如「非我族类其心必异」范数:</p>
    <div class="math">ゑnorm(*)_✡=norm(*)_☪=norm(*)_✠=norm(*)_☭=delta(x,y)={(0",",x=y),(1",",x!=y):}ゑ</div>
    <p>由于使用MathML,Unicode字符相关处理看来不用操心了也。</p>
</body>
</html>

显示效果如下:

AsciiMath测试
AsciiMath测试

如何?对「数学渣」来说,这些功能差不多够用了吧?如果不够用,可以临时转职「不入流码农」,使用编辑器打开JavaScript™脚本往里面夹私货。

后记

先写这么多吧。本篇的主题,也算是对于活跃色目帐号的回应。

在那2018222日我发表了《〈恶补记〉流水账〔四十〕》之后,就再没有更新,到现在近四个月了。于是乎,新时代中国特色社会主义大好形势下繁荣的中文互联网上,应景涌现出一批娱乐至死の逗哔转职的钦定学霸,字眼不外乎「半途而废」「知难而退」什么的,措辞贫乏得好像语文只学到初一。

我说,我现在的身份是「在野的职业政治家兼职业神棍」,本职工作是「政治和意识形态斗争」,「不入流码农」才是兼职,而「数学渣」是信仰的表现。说过多少遍了,总有党国栋梁青年才俊以君子之心度我这「言必信行必果硁硁然」的小人之腹。

并且,不会休息就不会工作,工作已经很卖力了嘛,就连「谈笑风生」都二百多篇了,单独「惹是生非」也已经三篇了。我又不是钦定主角龙傲天,数学学到初一就够了,没有初中文凭也没听说磕头认爹,就能拿个博士学位,只要凑够三千混蛋,就能全票冻蒜连升三级。

即便是业余兴趣爱好,也没有放下嘛,在恶补记流水帐「最近」这几篇当中提到的,适合掺杂公式的码字方式,选择Markdown格式,寻找开源至少免费的软件,对有待商榷的功能缺陷自行定制……吹过的牛哔正在壹壹变为现实。

顺便,恶补记流水帐里面还提到了从「复分析」角度重新审视计算机图形处理,还强调了注定是「二维」的「字体」领域……这不,三自运动已经从「贴图」「修图」「绘图」扩展到「排版」了也,后面恐怕还有「改版」「翻版」「出版」什么的。

总之,不忘初心牢记使命,或曰「言必信行必果硁硁然」,就是「小人」的特征;而艰苦朴素接地气,或曰「箪食瓢饮居陋巷」,则是铺天盖地的主旋律正能量;毕竟「远人不服则修『文德』以来之」,包括但不限于『武德』充沛的内亚外宾,以及「弱势群体」黑皮绿皮难民,「既来之则安之」,兲朝地大物博人口众多,有得是money,有得是easy girl,欢迎万国来朝(读作「(cào)」)。

2018-06-20