Практика разработки Web-страниц
Текст размещается неправильно
При создании страницы с текстом заманчиво разбить текст на строки так, как вам надо – но, увы, страницы не всегда будут выглядеть именно так. Броузеры пользователей могут отображать текст по-разному: либо потому, что шрифт недоступен, либо потому, что пользователь изменил размер шрифта или окна, так что текст перестанет помещаться в отведенное ему место. Понятно, что для текста лучше оставлять побольше места. Однако бывают случаи, когда дополнительное пространство не решает проблему, например, текст должен выравниваться относительно изображения, помещаться внутри узкого ряда или колонки или строки не должны разрываться.
Есть много способов разместить текст в определенном месте
Управлять текстом на странице можно несколькими способами. Если текст не помещается там, где вы хотите, сделайте следующее.
-
Когда вы используете размер шрифта по умолчанию, текст может не поместиться там, где нужно. Самый простой путь – это изменить размер шрифта. В старых броузерах единственный путь – использовать тэг <FONT>:
<font size=2>I hate quotations.</font>
-
Устанавливая размер шрифта в тэге <FONT>, вы не будете знать наверняка его размер в разных броузерах. Броузеры интерпретируют размер шрифта по-разному, а пользователи могут изменить размер шрифта. Если вы хотите точно указать размер шрифта, используйте стиль. В свойстве font-size можно указать размер шрифта в пикселях, свойство line-height позволяет указать расстояние между строками. Этот HTML создает абзац с текстом высотой точно 14 пикселей и с минимумом дополнительного места сверху и снизу:
<p style="font-size:14px;line-height:16px"> * Это примечание к вызывающему сомнение значению, но приятно, что он занимает так мало места. </p>
Даже при установке точного размера шрифта и Netscape, и Internet Explorer позволяют пользователям увеличивать или уменьшать размер шрифта, а последний позволяет аннулировать шрифты, установленные на вашей странице.
-
Если текст переходит на новую строку, когда вы не хотите этого, вы можете добавить разрыв строки в тэге <BR>. (Если вы используете FrontPage, вставьте символ разрыва строки, нажав (Shift)+(Enter)).
She ’s up in the attic,<br> I ’m down with the spiders,<br>
Если вы хотите, чтобы броузер сохранял строку нетронутой и не переносил текст на новую строку, укажите это в тэгах <NOBR> и </NOBR>:
<nobr>Ode to the text displayed on one line</nobr>
Если текст не помещается в ячейку таблицы, сделайте столбцы шире, устанавливая атрибут width тэга <TD>:
<td width=300>She and I on an uneventful Sunday</td>
Если вы хотите, чтобы таблица вытягивалась по размеру текста, когда пользователи изменяют размер шрифта, не включайте атрибут width в тэги <TABLE> и <TD>. (Если вы используете FrontPage, вы можете удалить установки высоты, щелкнув на таблице и затем щелкнув на AutoFit (Автоподбор) в меню Table (Таблица).
Последние версии броузеров – Internet Explorer 5 и более поздние – позволяют вам указывать точный размер абзаца, закреплять его содержимое или прокручивать его для просмотра, используя CSS свойства width, height и overflow. Например, этот абзац будет точно 120х80 пикселов и покажет полосу прокрутки справа, если места для текста недостаточно:
<p style="width:120;height:80;overflow:auto;border:1 solid;"> Мне не нравится сжиматься, но я могу и подвинуться.</p>
Другой способ, гарантирующий, что текст определенного размера не будет изменяться – создать изображение с этим текстом. В графической программе, такой как Photoshop или Fireworks, создайте изображение такого размера, какое ваш текст должен занимать на странице. (Установите цвет изображения таким же, как цвет фона страницы). Инструментом "текст" добавьте текст нужного размера и шрифта.
Чтобы гарантировать, что текст появится в любом броузере одного и того же размера, создайте изображение
Затем экспортируйте изображение как GIF-файл и поместите его на страницу, используя тэг <IMG>:
<img src="quotes.gif "width=115 height=17 border=0 alt="Quotations">
