首页 编程语言 css

CSS PDF 开发快速启动- PDF 页面效果参考

对于引入 HTML 编写或 DITA 结构化编写用户，对于段落图片位置编排有各种各样的需求。本文披露了满足肩并肩的图片和段落 的CSS PDF 实现方法，供您参考。

设计内容

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE concept PUBLIC "-//OASIS//DTD DITA Concept//EN" "concept.dtd">


<concept outputclass="" xml:lang="zh-CN" id="A743F69C-4153622-1481551E11B4917-BFCA51"> 
  <title>登录系统</title>  
   <conbody outputclass="side-by-side"> 
    
    
    
    
    
    
    <p>段落句子与图片肩并肩呈现</p> 
    <fig id="fig_bvl_wpl_cwb">
      <image href="967392893.jpg" id="image_eqy_3sl_cwb"/>
    </fig>
    
    
    
    
  </conbody> 
</concept>



样式设计

定义 custom.css 后写入下列代码片段：

 @charset "UTF-8";  
  


/*


CUSTOM CSS for zh-CN    


*/
*[outputclass ~= "side-by-side"] > *[class ~= "topic/p"] {
  display:inline-block;
  width: 45%;
}  


*[outputclass ~= "side-by-side"] > *[class ~= "topic/fig"] {
  display:inline-block;
  width: 45%;
}

Oxygen CSS PDF 发布

利用 Oxygen 编辑器，选择 CSS PDF 发布，结果如下图所示：



如果顶端对齐，引入代码片段

*[outputclass ~= "side-by-side"] > *[class ~= "topic/p"] {
vertical-align:top;
}
*[outputclass ~= "side-by-side"] > *[class ~= "topic/fig"] {
vertical-align:top;
font-size:0pt;
}


说明：在 ARG.CSS 参数设置页面，开发者用户要指向定制化的 custom.css 来实现上述结果。

如果采用我们公司写管用平台，系统会默认提供上述功能，此外，还会提供包括下列 PDF 能力：

  1. 自动分页（消除孤行）
  2. 表格标题可以自动竖向编排
  3. 按照正文的布局需求，如长表格规格，自动引入横向布局
  4. 按照正文的布局需求，如图纸，自动引入 A3, B3 等布局图纸
  5. imagemap 热点跳转链接

相关推荐