【问题】
Docbook所生成的HTML的等式Equation，没有特殊处理，比如没有一定的背景色。
而之前已经给PDF中的等式添加了背景色了：
【已解决】给docbook的pdf中的等式(equation)设置背景色
现在想要给HTML中的等式添加类似的背景色。
【解决过程】
1.等式Equation，是属于formal一类的，之前的配置是在：
docbook-xsl-ns-1.76.1\html\formal.xsl
中，然后拷贝出相关代码，再添加相应设置：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | <!--============================================================================equation setting=============================================================================--><xsl:template match="d:equation"> <xsl:attribute name="border-style">solid</xsl:attribute> <!-- <xsl:attribute name="border-width">.1mm</xsl:attribute> --> <xsl:attribute name="border-width">0.5pt</xsl:attribute> <xsl:attribute name="background-color">silver</xsl:attribute> <xsl:variable name="param.placement" select="substring-after(normalize-space($formal.title.placement), concat(local-name(.), ' '))"/> <xsl:variable name="placement"> <xsl:choose> <xsl:when test="contains($param.placement, ' ')"> <xsl:value-of select="substring-before($param.placement, ' ')"/> </xsl:when> <xsl:when test="$param.placement = ''">before</xsl:when> <xsl:otherwise> <xsl:value-of select="$param.placement"/> </xsl:otherwise> </xsl:choose> </xsl:variable> <xsl:call-template name="formal.object"> <xsl:with-param name="placement" select="$placement"/> </xsl:call-template></xsl:template> |
结果出错：
1 2 | runtime error: file /home/develop/docbook/config_root/docbook-xsl-ns-1.76.1/html/common_html.xsl line 72 element attributexsl:attribute: Cannot add attributes to an element if children have been already added to the element. |
2.然后又去试了：
1 2 3 4 5 6 7 | <xsl:attribute-set name="equation.properties"> <xsl:attribute name="border-color">#000000</xsl:attribute> <xsl:attribute name="border-style">solid</xsl:attribute> <xsl:attribute name="border-width">1px</xsl:attribute> <xsl:attribute name="padding">1em</xsl:attribute> <xsl:attribute name="background-color">#dddddd</xsl:attribute></xsl:attribute-set> |
结果输出的HTML中的等式，也没有任何背景色等效果。
3.后来发现，其实上述equation所引用的设置是formal.object的配置：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 | <!-- copy from docbook-xsl-ns-1.76.1\html\formal.xsl --><xsl:template name="formal.object"> <xsl:param name="placement" select="'before'"/> <xsl:param name="class"> <xsl:apply-templates select="." mode="class.value"/> </xsl:param> <xsl:call-template name="id.warning"/> <xsl:variable name="content"> <div class="{$class}"> <xsl:call-template name="anchor"> <xsl:with-param name="conditional" select="0"/> </xsl:call-template> <xsl:choose> <xsl:when test="$placement = 'before'"> <xsl:call-template name="formal.object.heading"/> <div class="{$class}-contents"> <xsl:apply-templates/> </div> <!-- HACK: This doesn't belong inside formal.object; it should be done by the table template, but I want the link to be inside the DIV, so... --> <xsl:if test="local-name(.) = 'table'"> <xsl:call-template name="table.longdesc"/> </xsl:if> <xsl:if test="$spacing.paras != 0"><p/></xsl:if> </xsl:when> <xsl:otherwise> <xsl:if test="$spacing.paras != 0"><p/></xsl:if> <div class="{$class}-contents"><xsl:apply-templates/></div> <!-- HACK: This doesn't belong inside formal.object; it should be done by the table template, but I want the link to be inside the DIV, so... --> <xsl:if test="local-name(.) = 'table'"> <xsl:call-template name="table.longdesc"/> </xsl:if> <xsl:call-template name="formal.object.heading"/> </xsl:otherwise> </xsl:choose> </div> <xsl:if test="not($formal.object.break.after = '0')"> <br class="{$class}-break"/> </xsl:if> </xsl:variable> <xsl:variable name="floatstyle"> <xsl:call-template name="floatstyle"/> </xsl:variable> <xsl:choose> <xsl:when test="$floatstyle != ''"> <xsl:call-template name="floater"> <xsl:with-param name="class"><xsl:value-of select="$class"/>-float</xsl:with-param> <xsl:with-param name="floatstyle" select="$floatstyle"/> <xsl:with-param name="content" select="$content"/> </xsl:call-template> </xsl:when> <xsl:otherwise> <xsl:copy-of select="$content"/> </xsl:otherwise> </xsl:choose></xsl:template> |
所以打算在其基础上自己改，然后发发现，里面对于content所应用的设置，不是fo的那种xsl:attribute-set，而是通过div和class来匹配，配置html的输出的结果的。
所以就去去看看当前所生成的HTML的equation部分的HTML源码到底是什么，然后发现是这样的：
1 2 3 4 5 6 7 8 9 10 11 | <div class="equation"><a name="eq.frame.data.size"></a><p class="title"><b>公式 3.1. Frame Data Size</b></p><div class="equation-contents"><span class="mathphrase"> <p>Frame_Data_Size</p> <p>= Audo_Data_Size + Frame_Padding_Size</p> <p>= Frame_Time * Frame_Bitrate + Frame_Padding_Size</p> <p>= (Sample_Number * Time_per_Sample) * Frame_Bitrate + Frame_Padding_Size</p> <p>= (Sample_Number * (1/Sample_Rate)) * Frame_Bitrate + Frame_Padding_Size</p> </span></div></div><br class="equation-break"> |
然后才明白，对于HTML的表格的输出效果的控制，其实也就是类似于之前所看到的：
中对于programlisting，也是通过对应的css来控制的，即用pre.programlisting，然后加上配置参数，就可以了。
所以，打算自己参考其配置，去写equation对应的css配置。
新建一个equation.css，然后里面写上：
1 2 3 4 5 6 7 8 9 | pre.programlisting { background-color: #FFFF99 ; border: 1px solid #006600 ;}div.equation { background-color: #FFFFBB ; border: 1px solid #006600 ;} |
接着再参考：Using CSS to style HTML，找到HTML的如何使用css文件的的那个参数html.stylesheet，以及相关的html.stylesheet.type，然后添加相应的配置：
1 2 | <xsl:param name="html.stylesheet.type">text/css</xsl:param><xsl:param name="html.stylesheet">equation.css</xsl:param> |
然后生成的HTML中，打开了一下，发现还是没有效果，但是却看到其HTML源码中，已经有了对应的css引用了：
1 2 3 4 | <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>MPEG简介 + 如何计算CBR和VBR的MP3的播放时间</title><link rel="stylesheet" type="text/css" href="equation.css"><meta name="generator" content="DocBook XSL-NS Stylesheets V1.76.1"> |
然后猜测估计是没有把css文件拷贝到输出文件中，所以，就又去手动拷贝equation.css到输出的HTML文件夹中，然后刷新一下页面，HTML中就可以最终达到所需要的效果了，即equation有背景色了：
【总结】
想要给Docbook生成的HTML的等式equation添加背景色，
其实现的方式，和fo（PDF）所用的xsl:attribute-set不同，其是用另外的CSS去格式化HTML 的显示效果的。
即
1.需要另外去写css文件，比如，equation.css：
1 2 3 4 5 6 7 8 9 | pre.programlisting { background-color: #FFFF99 ; border: 1px solid #006600 ;}div.equation { background-color: #FFFFBB ; border: 1px solid #006600 ;} |
2. 然后再去添加HTML的css参数：
1 2 | <xsl:param name="html.stylesheet.type">text/css</xsl:param><xsl:param name="html.stylesheet">equation.css</xsl:param> |
3. 生成HTML后，记得把该css文件拷贝到HTML的输出目录，此时，生成的HTML中的等式，才可以显示出对应的颜色。
提示：
1.注意css文件，相对于当前HTML的路径，不要弄错了。
2.此配置HTML中的等式的背景色的办法，其实也适用于其他类型，比如程序代码programlisting等等（上述例子已经包含对应配置了）。
转载请注明：在路上 » 【已解决】给Docbook的HTML的等式添加背景色