2013-11-20 1 views
2

Я пытаюсь заставить текст креветки действовать как абсолютно позиционированные абзацы в HTML, поскольку абзац будет только шириной, чем текст, который он содержит.Получение креветки для текста макета, как абсолютно позиционированный 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> 

Будет ли результат в этом:

enter image description here

Как вы можете видеть, в пунктах будут только такими же широкими, как их содержание (см. fiddle для полного примера).

Layout-накрест, это то, что я хочу достичь в 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:

enter image description here

, который сродни добавлению width:100% к элементам p.

ответ

6

Вы должны указать ширину текстового поля, иначе text_box будет использовать ширину страницы минус стартовая позиция.

Чтобы вычислить ширину строки, вы должны использовать width_of метод, предоставленный библиотекой Креветки, но по какой-то причине, креветка не признает \n полукокса в width_of методы, то вы должны разделить его рука и рассчитать ширину линии отдельно, что не так уж сложно:

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) 
+0

Это работало великорусского СПАСИБО !! – Yarin