2010-10-19 58 views
5

我正在使用JavaScript來擴展左對齊文本的範圍,直到它填充其容器,或者直到達到可變高度或寬度閾值。該過程導致廣泛變化的font-size像素精確的文本對齊

我的問題是,對於某些字符,左側有少量填充...而通常不會引人注意,非常大的字體大小可以達到10個像素或更多。

我颳起了頁面展示上各種人物的影響: http://jsfiddle.net/kBu7S/

的文本範圍存在在所有其他元素下去的頁面對齊像素像素的左邊緣設計,所以它的非常明顯地分散了較大的文字大小。

任何人都可以想出一種方法來計算填充量,這樣我可以碰到跨度的相對位置?或者甚至有一個CSS解決方案? (letter-spacingword-spacing沒有效果。)

我承認,即使是一個骯髒的解決方案似乎不太可能...感謝您的考慮。

回答

3

填充通常被稱爲該類型的「肩」,它是字體設計的內在。有沒有簡單的方法來反擊它,因爲它出於光學原因,給這種類型適當的間距。畢竟,如果你輸入IIIIIII,你需要在大寫字母I之間有一定的間距,而這只是來自這個填充。其他字符,如WWWWWW,不需要。

最好的辦法是用你的字體做一個實驗,並測量每個字符的實際填充,然後建立一個將字符映射到其填充的表格。然後你可以調整角色的位置。這是很多工作,但我不知道你還能做什麼。

+0

肩膀!這就是所謂的。我甚至不能告訴你有多少種不同的方法來嘗試Google填充該名稱。我剛從工作中回家,但你想知道繪製不同的肩膀(也許是百分比?)是早上好的起點...... – JKS 2010-10-19 00:58:56

+0

這不僅僅適用於本地嗎? – Ben 2010-10-19 01:19:27

+0

「本地」?我不確定你是什麼意思。 – 2010-10-19 02:50:00

0

那麼,你可以建立一個腳本來使用相同大小的相同字體(白色背景上的黑色)生成圖像,並讀取位圖來計算從左邊緣到第一個黑色像素的距離。

這是一種矯枉過正,但它是我能想到的唯一的東西。

+0

這整個問題是一種矯枉過正的:)謝謝你的想法。 – JKS 2010-10-19 22:51:55

1

這製作的小提琴:

#text:first-letter { margin-left:-3px}

你可以展開一類...

.fontCorrection:first-letter { margin-left:-3px }

...並酌情加以執行。

+0

沒有爲我工作。只是將這些字母向左移動,但如果您增加了它們的尺寸,則仍然存在不同程度的差距。 – davr 2010-10-19 00:33:57

+0

然後使用Javascript來改變增加功能中的CSS規則。你的解決方案在哪裏? – Ben 2010-10-19 00:36:16

+0

其實'#text:第一個字母{margin-left:-0.05em; ''不是一個不好的近似值 - 但仍然不夠接近。謝謝你的想法... – JKS 2010-10-19 21:01:19