Размер шрифта «наилучшее соответствие» - как измерить ширину предложения? - PullRequest
Новая
       47

Размер шрифта «наилучшее соответствие» - как измерить ширину предложения?

14 голосов
/ 26 мая 2011

Я сталкиваюсь с общей проблемой, связанной с индивидуальным дизайном системы управления контентом.

Я управляю небольшой компанией, занимающейся веб-дизайном, и мне часто приходится делать определенную область веб-сайта редактируемой для клиента.Например, в верхней части страницы может быть панель с рекламой последних новостей или предложений, которые клиент хочет редактировать самостоятельно.

Проблема, с которой я сталкиваюсь, заключается в том, что они часто пишут слишком многои текст переполняется.Может быть, я слишком обороняюсь, но в таких ситуациях я обычно в частном порядке обвиняю клиента - наверняка они проверяют после обновления текста, понимают, что он не подходит, и изменяют его так, чтобы он подходил?

В любом случае, я думаю, что это моя ответственность, чтобы сайт выглядел красиво, поэтому я пытался найти способ подогнать текст в поле фиксированного размера.Одним из способов является присвоение прямоугольнику (обычно div) этого свойства css: 

overflow: auto;

, но иногда это не подходит, например, в примере, описанном выше, где столбец имеет высоту только одну строку.

Мой вопрос (да, я наконец-то дошел до этого): как я могу автоматически изменить размер шрифта, чтобы он помещался в поле?

В некоторых приложениях (Powerpoint - одиннапример), вы можете выбрать вариант «наилучшего соответствия» для размера шрифта, и приложение выбирает размер, который позволяет точно соответствовать тексту.Я в основном ищу эту версию на CSS, JavaScript или PHP.

Заранее спасибо!

РЕДАКТИРОВАТЬ: Вот решение - http://jsfiddle.net/Cnkfn/1/

Ответы [ 3 ]

3 голосов
/ 27 мая 2011

Я чувствую твою боль!У нас также есть клиенты, которые дают нам тезисы, которые слишком длинны для выделенной области;для некоторых клиентов, очевидно, даже не приходит в голову, что их текст может быть слишком длинным.: -)

Что бы я сделал в вашем случае, это что-то вроде того, что делает stackoverflow: покажите поле под областью ввода, которое показывает их текстовое обновление onkeyup.С окном с фиксированной высотой им будет сразу видно, когда их текст слишком длинный.Вместо этого вы можете попробовать что-то вроде следующего: 

<style>
#outer {
  width:100px;
  height:40px;
  overflow-x:hidden;
  overflow-y:auto; /* To make it obvious the text is too long. */
  border:1px solid red;
}
#inner {
  width:100px;
}
</style>

<div id="outer">
  <div id="inner" style="font-size:16px">
    Lorem ipsum dolor sit amet, dui orci interdum sagittis,
    proin metus dui, justo in suspendisse dolor.
  </div>
</div>
<button onclick="checkFontSize()">Check font size</button>

<script>
function checkFontSize() {
  var o = document.getElementById('outer');
  var i = document.getElementById('inner');
  var fs = parseInt(i.style.fontSize);
  while(i.offsetHeight > o.offsetHeight) {
    fs--;
    i.style.fontSize = fs + 'px';
  }
}
</script>

Он проверяет, больше ли высота внутреннего блока больше, чем высота внешнего блока;он работает в предположении, что внутренний div не имеет отступов (вы можете настроить его при необходимости).Это уменьшает размер шрифта внутреннего div на 1px до тех пор, пока высота внутреннего div больше не будет больше, чем внешняя div.

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

0 голосов
/ 27 мая 2011 
Public Function GetStringSize(ByVal Str As String, _
                                         ByVal FName As String, _
                                         ByVal FSize As Integer, _
                                         ByVal FStyle As System.Drawing.FontStyle) As System.Drawing.SizeF

 Using graphics As System.Drawing.Graphics = System.Drawing.Graphics.FromImage(New System.Drawing.Bitmap(1, 1))
     Dim size As System.Drawing.SizeF = graphics.MeasureString(Str, New System.Drawing.Font(FName, FSize, FStyle, System.Drawing.GraphicsUnit.Pixel))
     Return size
 End Using

End Function
0 голосов
/ 26 мая 2011

Не пробовали это в HTML, но вы можете зациклить и проверить свойство scrollHeight и посмотреть, больше ли оно, чем вы ожидаете, и, если это так, установить шрифт на одну точку меньше, и повторять до тех пор, пока scrollHeight не станет вашим ожидать.

https://developer.mozilla.org/en/DOM/element.scrollHeight

...