Размер шрифта "Наилучший размер" - как измерить ширину предложения?

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

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

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

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

overflow: auto;

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

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

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

Спасибо заранее!

EDIT: Здесь решение - http://jsfiddle.net/Cnkfn/1/

Ответ 1

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

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

<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; он работает в предположении, что внутренний div не имеет прокладки (вы можете настроить по мере необходимости). Он уменьшает внутренний размер шрифта div на 1px до тех пор, пока внутренняя высота div больше не будет больше, чем внешние div.

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

Ответ 2

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

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

Ответ 3

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