让 Prawn 像绝对定位的 HTML 段落一样布局文本答案

【问题标题】：Getting Prawn to layout text like an absolutely positioned HTML paragraph让 Prawn 像绝对定位的 HTML 段落一样布局文本
【发布时间】：2013-11-20 04:29:56
【问题描述】：

我试图让 Prawn 文本像 HTML 中绝对定位的段落一样，因为该段落的宽度与其包含的文本一样宽。

这是最好的例子：

在 HTML 中，如下：

<p class="left-align">Here's some left-aligned text,<br/>bla bla bla</p>
<p class="center-align">Here's some center-aligned text,<br/>bla bla bla</p>
<p class="right-align">Here's some right-aligned text,<br/>bla bla bla</p>
<style>
p {
    background:yellow;
    border:solid 1px black;
    position:absolute;
}
.left-align {
    text-align:left;
    left:20px; top:0;
}
.center-align {
    text-align:center;
    left:20px; top:50px;
}
.right-align {
    text-align:right;
    left:20px; top:100px;
}
</style>

将导致：

如您所见，段落的宽度与其内容一样宽（完整示例请参见 fiddle）。

布局方面，这是我想在 Prawn 中实现的，但是当我尝试以下操作时：

pdf.text_box "Here's some left text,\nbla bla bla", :at => [20, page_height], :align => :left
pdf.text_box "Here's some center text,\nbla bla bla", :at => [20, page_height-50], :align => :center
pdf.text_box "Here's some right text,\nbla bla bla", :at => [20, page_height-100], :align => :right

我最终得到类似 this：

这类似于将width:100% 添加到 p 元素。

【问题讨论】：

标签： ruby prawn

【解决方案1】：

您必须提供文本框的宽度，否则text_box 将使用页面宽度减去起始位置。

为了计算字符串宽度，你应该使用Prawn库提供的width_of方法，但是由于某种原因，Prawn不能识别width_of方法中的\nchar，那么你必须必须手动拆分，分别计算线宽，这并不难：

def text_width(pdf, text)
  # slip by new line char and find maximum text width
  text.split("\n").map {|s| pdf.width_of(s)}.max
end

在您的代码中插入text_width：

pdf.text_box s = "Here's some left text,\nbla bla bla", 
  :at     => [20, page_height], 
  :align  => :left,
  :width  => text_width(pdf, s)

pdf.text_box s = "Here's some center text,\nbla bla bla", 
  :at     => [20, page_height-50], 
  :align  => :center,
  :width  => text_width(pdf, s)

pdf.text_box s = "Here's some right text,\nbla bla bla", 
  :at     => [20, page_height-100], 
  :align  => :right,
  :width  => text_width(pdf, s)

【讨论】：