最新消息:20210816 当前crifan.com域名已被污染,为防止失联,请关注(页面右下角的)公众号

【已解决】给Docbook的HTML的等式添加背景色

Docbook crifan 2239浏览 0评论

【问题】

Docbook所生成的HTML的等式Equation,没有特殊处理,比如没有一定的背景色。

而之前已经给PDF中的等式添加了背景色了:

【已解决】给docbook的pdf中的等式(equation)设置背景色

现在想要给HTML中的等式添加类似的背景色。

【解决过程】

1.等式Equation,是属于formal一类的,之前的配置是在:

docbook-xsl-ns-1.76.1\html\formal.xsl

中,然后拷贝出相关代码,再添加相应设置:

<!--============================================================================
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>

结果出错:

runtime error: file /home/develop/docbook/config_root/docbook-xsl-ns-1.76.1/html/common_html.xsl line 72 element attribute
xsl:attribute: Cannot add attributes to an element if children have been already added to the element.

2.然后又去试了:

<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的配置:

<!-- 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源码到底是什么,然后发现是这样的:

<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的表格的输出效果的控制,其实也就是类似于之前所看到的:

Styling displays with CSS

中对于programlisting,也是通过对应的css来控制的,即用pre.programlisting,然后加上配置参数,就可以了。

所以,打算自己参考其配置,去写equation对应的css配置。

新建一个equation.css,然后里面写上:

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,然后添加相应的配置:

<xsl:param name="html.stylesheet.type">text/css</xsl:param>
<xsl:param name="html.stylesheet">equation.css</xsl:param>

然后生成的HTML中,打开了一下,发现还是没有效果,但是却看到其HTML源码中,已经有了对应的css引用了:

<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有背景色了:

HTML中等式有了背景色了

【总结】

想要给Docbook生成的HTML的等式equation添加背景色

其实现的方式,和fo(PDF)所用的xsl:attribute-set不同,其是用另外的CSS去格式化HTML 的显示效果的。

1.需要另外去写css文件,比如,equation.css:

pre.programlisting {
  background-color: #FFFF99 ;
  border: 1px solid #006600 ;
}

div.equation {
  background-color: #FFFFBB ;
  border: 1px solid #006600 ;
}

2. 然后再去添加HTML的css参数

<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的等式添加背景色

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
82 queries in 0.195 seconds, using 22.10MB memory