search

fontuni / boon

Boon font
https://fontuni.com/boon/
SIL Open Font License 1.1
63 stars 3 forks source link

Text wrap the last word to the new line when adding float: right; in CSS on iPad. #5

Closed paustria closed 9 years ago

paustria commented 9 years ago

For example

<p class="pull-right">ตัวอย่างคำ</p>

On iPad device, it will show

ตัวอย่าง
คำ

So far I can reproduce on iPad 2, air and mini version. (I assume that this will happen on Safari on all iPad models.) As of now, here is what I did for workaround.

.pull-right {
   word-spacing: -1px;
}
mennwebs commented 9 years ago

If you need this to un-wrap (whole text), you can also use

.pull-right {
   white-space: nowrap;
}

I think the browser treats this as "many words" then breaks it.

paustria commented 9 years ago

@MennStudio Thank you for another workaround. However, my point is there shouldn't be any additional CSS to make the fonts fit in its element.

<p class="pull-right">ตัวอย่างคำ</p>

Should fit in its own 'p' element under the default behavior of top browsers. (I would say Chrome, Safari, Firefox, and IE.)

At first, I thought it's the text-rendering issue. However, I switched to other fonts and this issue resolved right away. That's why I think it is because of the fonts itself.

sungsit commented 9 years ago

Boon-v1.0-beta2 เจอปัญหาเดียวกันไหมครับ?