» Обходимо помилку із плаваючими елементами
у нас доставка пиццы и суши уже сейчасСмотрите также: http://bmw-city.ru
Як можна прочитати на сторінці “Відомі помилки” на сайті “A List Apart” або на сторінці Bugzilla entry #104040, броузеры сімейства Gecko, такі як Netscape 6.x або Mozilla, мають проблему з печаткою довгих “плаваючих” блоків (long floated elements). Якщо плаваючий елемент вийшов за межі друкованої сторінки, то частина, що залишилася, повністю пропадає, так і не з’явившись на наступній сторінці.
Якщо ваш сайт схожий на “A List Apart”, тобто статті в ньому полягають в один великий плаваючий блок, то це значить, що читачі при роздруківці одержать лише першу сторінку статті.
Рішення, як і слід було сподіватися, полягає в скасуванні властивості “плаваючий” у блоку з текстом перед печаткою. Якщо коротенько, для всіх плаваючих елементів установлюється стильове правило “float: none”. Зробивши це, ви повернете всі плаваючі елементи до звичайного виду, і документ буде надрукований так, як і передбачалося - сторінка за сторінкою аж до самого кінця.
Отже, саме це я й запропонував зробити Зельдману для ALA, і, як тільки він це зробив, проблема з печаткою зникла. У броузеров сімейства Gecko ця помилка як і раніше не виправлена (на момент написання статті), але все-таки її можна легко обійти запропонованим вище способом.
У шлях
Нижче представлена “друкована” таблиця стилів, за допомогою якої “A List Apart” вирішив проблему печатки плаваючих елементів:
#menu {
display: none;
}
#wrapper, #content {
width: auto;
border: 0;
margin: 0 5%;
padding: 0;
float: none !important;
}
Гарний початок. Таблиця стилів повністю забирає праве меню так, що воно не виводиться на печатку, і задає границі й відступи для вмісту статті таким чином, щоб текст на будь-якій сторінці розташовувався рівномірно від одного краю області печатки до іншого.
Проблема, як мені бачилося, полягала в тім, що занадто багато стилів, розроблених для екрана, попадали в друкований процес.
Якщо подивитися на вміст тегу <head> нових статей на сайті ALA, ми виявимо (у гущавині начинки) наступні рядки:
<style type=”text/css” media=”all”>
@import “nucss2.css”;
</style>
<link rel=”stylesheet”
type=”text/css”
media=”print” href=”print.css” />
У нас є файл таблиці стилів, print.css, застосування якого для друкованих пристроїв “print” було обговорено значенням атрибута “media”. Файл таблиці стилів nucss2.css, що імпортується за допомогою конструкції @import щоб сховати його від Navigator 4.x, буде використаний при відображенні сторінки на будь-якому пристрої висновку (атрибут media=”all”). Це може бути дисплей, принтер, проектор, синтезатор мови й так далі. Розійшовшись, ми могли б записати в таблицю стилів для печатки директиви для фонових кольорів сторінки й указати шрифти в пикселях.
Чи буде це великим лихом? Ні, але більшість броузеров за замовчуванням не друкують тло сторінки, а зазначені в пикселях розміри шрифтів, що настільки підходять для екранного відображення, не так вуж і корисні при печатці.
Тому давайте небагато поліпшимо нашу таблицю стилів для печатки й вирішимо кілька інших проблем з розташуванням її компонентів.
Відбілювання фонів
Для елементів бічного правого меню використаються безліч квітів. Але тому що ми сховали меню при печатці, нам нічого не прийде міняти. Це відразу рятує нас від можливого головного болю.
Тому що принтери не друкують білими кольорами, зробимо тло сторінки білим. Також потрібно видалити всі фонові зображення, які використалися при висновку сторінки на екран.
Якщо ми викличемо на допомогу властивість background, ми одним махом вирішимо обидві проблеми. Щоб зробити рішення більше гнучким, задамо для елемента “body” біле тло, а елементи “wrapper” й “content” нехай мають прозоре тло (і тим самим через них буде проступати білі кольори “body”):
body {
background: white;
}
#menu {
display: none;
}
#wrapper, #content {
width: auto;
margin: 0 5%;
padding: 0;
border: 0;
float: none !important;
color: black;
background: transparent;
}
Завдання кольорів переднього плану (кольори шрифту) не було абсолютно необхідним, але краще не забувати про це. Отже, зараз у нас є два “неплаваючих” елементи (#wrapper, #content) із прозорим тлом, і сторінка - з білим тлом.
Вас може схвилювати те, як Navigator 4.x обходиться зі значенням “transparent”, але вище ніс: NN4.x звертає увагу лише на таблиці стилів, у яких атрибут “media” має значення “screen”. Так само як й у випадку з директивою @import, наші таблиці стилів для печатки завжди приховані від підсліпуватих очей Navigator 4. Так що, тут не про що турбуватися.
Розмір шрифту для печатки
Загальна таблиця стилів задає розмір шрифту рівний 11 пикселям. Досить невдалий вибір при печатці. Саме сімейство шрифтів - спочатку Georgia , а потім serif - відмінно підходить для печатки, тому що шрифти із зарубками звичайно краще виглядають на папері. Необхідно змінити лише розмір шрифту. От так:
body {
background: white;
font-size: 12pt;
}
“Постійте!”, - імовірно, викликнете ви. - “Єретик! Всім відомо - пункти - це зло! Тодд Фарнер сказав так!”
Що ж, так, так він і сказав, і був повністю прав - для екрана не можна задавати розміри шрифту в пунктах. При печатці ж застосування пунктів має такий же зміст, як і багато десятиліть назад. Раз вуж ми готовимо таблицю стилів для печатки, то визначити розміру шрифту для “body” в 12 пунктів буде правильним і природним.
Ви, звичайно, можете задати будь-який розмір, який побажаєте, однак шрифт в 12 пунктів найбільш уживаний. І тому що в загальній таблиці стилів розміри всіх інших елементів сторінки дані щодо розміру в елементі “body”, наша робота закінчена.
Marginalia
Існуючі стильові правила задають для лівих і правих границь (margins) елементів wrap й content розмір в 5%. Це значить, що по обидва боки статті буде “порожнє місце”, і кожне таке “порожнє місце” буде становити 10% ширини області печатки. Це наслідок того, що блок з текстом статті “content” лежить усередині блоку, що обрамляє, “wrapper”, і кожен їх їх має поля по 5% з лівої й правої сторін.
Вихідна загальна таблиця стилів задає 15%-ный правий відступ (padding) для блоку “content”. Границі вже дали нам 10%, так що нам треба додати ще 5%. Це досить просто зробити:
div#content {
margin-left: 10%;
}
В іншому варіанті рішення можна б бути залишити границі (margin) у спокої й додати 5% до лівого відступу (padding). Тому що блок “content” не має видимого тла, ми одержали б такий же результат.
На жаль, деякі броузеры мають проблеми з адекватною обробкою відступів (padding), так що переміщати елементи по сторінці краще за допомогою границь (margin).