作者nosignal90 (NoSignal)
看板Web_Design
標題[問題] 如何判斷頁面的右邊界
時間Sat Feb 20 02:30:05 2016
各位好,
我目前在做的計劃是要比對PDF的格式
在google看了很久以後
發現jpedal的pdf->html5轉換的格式讓我很好處理
所以目前打算用這個方法來實作看看
(如果有更好的方法也麻煩告訴我!)
總之,jpedal轉換之後的html裡面包含了css的配置
轉換後的範例如下:
#t5_1{left:124px;top:236px;letter-spacing:-0.1px;word-spacing:0.1px;}
#t6_1{left:124px;top:251px;letter-spacing:-0.1px;word-spacing:0.3px;}
#t7_1{left:124px;top:295px;}
#t5_1這個同時也是一行文字的id
<div id="t5_1" class="t s4_1">90089-0781, U.S.A</div>
然後有文字的格式內容
.s4_1{
FONT-SIZE: 54.8px;
FONT-FAMILY: 'Times New Roman', Times, serif;
color: rgb(0,0,0);
FONT-STYLE: italic;
}
所以整個頁面是以一行一行的文字為單位去做轉換
老闆那邊對於pdf的格式有規定的要求(不然找我來做格式系統幹嘛XD)
例如邊界,上下左右各2 inch
上下左這3個邊界處理起來沒有問題
拿個標準檔案來轉換inch px很容易判斷
但是右邊界我想了很久都不知道怎麼算
有想過的方法是用letter-spacing, word-spacing去算
一行的最後一個文字的位置應該可以用這個推出來?
不過我其實對css只有超級粗淺的概念
不懂為什麼letter spacing 怎麼會是-0.1px?
(word spacing也是有正有負)
如果用spacing去計算的話,怎麼會是負值@@?
然後還有個要求是要看文字是否置中
我是想說這個基本是只要知道右邊界就可以知道了吧~
去算該行文字的左邊界有沒有等於右邊界就好了
(或者各位有更好的方法也歡迎給我點建議)
怕大家不知道我在說什麼,在這邊附上圖片
http://imgur.com/SCfqoM6
謝謝各位了~(鞠躬)
--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 97.93.122.75
※ 文章網址: https://www.ptt.cc/bbs/Web_Design/M.1455906607.A.C43.html
推 b35894814: 自己算一下,全頁-left-內文=right,不就可以了嗎?0.0 02/20 02:49
嗯...
內文好像可以用word or letter spacing 去計算?
目前只有一行的起始位置,也就是left是已知
計算的話,我的想法是起始位置+一行幾個字*字距 = 一行的最後一個字的位置
知道最後一個字的位置的話,就可以和頁面比較得出右邊界是否合於標準
不懂的地方是為什麼字距值可以是負的@@?
推 mmis1000: 如果是不知道文字實際寬度,canvas有一個method可以算, 02/20 03:16
→ mmis1000: 叫measureText 02/20 03:16
→ mmis1000: 但算出來的結果不完全準確 02/20 03:19
→ mmis1000: 一切還是以瀏覽器實際執行為準 02/20 03:19
→ mmis1000: 像是 To 這種組合的寬度,並不等於 T + o 的寬度,因為 02/20 03:20
→ mmis1000: 排版上可能會把o往內移進T裡面,算出來當然是錯的 02/20 03:21
好的 來查查看這個用法 看適不適合
另外...我是沒有考慮過瀏覽器的問題(其實是覺得不用考慮?)
大致的流程是:
使用者送出pdf檔案
->系統轉換成html5+css
->有標準的html5+css的格式值和轉換過來的檔案比對
所以,我想瀏覽器執行應該不是我需要考慮的部份?
如果以上想法有誤麻煩告訴我~~~ 感激不盡>_<
※ 編輯: nosignal90 (66.215.98.249), 02/21/2016 12:48:51
※ 編輯: nosignal90 (66.215.98.249), 02/21/2016 12:52:39