Текст в Marquee

Статьи о Marquee

Скроллирование текста в тэге marquee

Июль 2006 г.

Анимация текста и гиперссылки.

Текст в бегущей строке

Из множества методов создания скроллинга (анимации) на веб-страницах, самым известным является использование нестандартного парного тэга <marquee>, реализация тэга проста и поэтому не требует изучение сложного синтаксиса присущего большинству языков программирования.

В этом легко убедиться. Создадим самый простой пример: текстовый анимированный контент "Бегущая строка" поместим этот текст в <marquee>Бегущая строка</marquee> и вставим в исходный код разметки html - документа, выглядеть это будет вот так:

Шрифт которым отображается этот текст в бегущей строке задан по умолчанию. Изменение шрифта осуществляется стандартным методом html. Изменим цвет color=#ff0: красный, увеличим размер шрифта в 2 раза относительно заданного по умолчанию size=+2, установим наклон букв (пропись) тэгом <I>, а толщину тэгом <B>:

<marquee><font color="#ff0" size="+2"><b><i>Бегущая строка</i></b></font></marquee>

Более удобный и более правильный способ создание шрифтов, это каскадная таблица стилей CSS (cascading style sheet). Создадим стиль, и назовём его "beg": .beg {font-family: Verdana; font-size: 18px; color: #fc0; font-weight: 700; background-color: #09f} в этом стиле устанавливаем шрифт Verdana, размер 18 пикселей, цвет жёлтый, бэкграунд (фон) синий. Запишем этот стиль в (голову) head html-документа:
<style type="text/css" media="screen">
.beg {font-family: Verdana; font-size: 18px; color: #fc0; font-weight: 700; background-color: #09f}
</style>
(способов внедрения расширения css существует несколько, мы используем только один из них), указываем идентификатор этого стиля парным тэгом span:
<marquee><span class="beg">Бегущая строка</span></marquee>

Бэкграундом может быть не только цвет, но и картинка любого веб-формата, для примера возьмём маленькую картинку кленового листика . Создаём стиль:.beg2 {font-family: Arial ;font-size: 20px; font-weight: 700; color:#000; background-image:url(/img/klen.gif)} где background-image: url(/img/klen.gif) с указанием пути к картинке которая станет фоном.

Картинка замостила (реплицировала) весь фон, если взять картинку по высоте фона, и замощение фона будет слева направо.

То, что заполнение фона идёт от верхнего левого угла наглядно показывает картинка заведомо большего размера чем, поле фона: и создадим стиль в бэкграунде которого укажем путь к соответствующей картинке.Русская зимаТак как фоном служит любая картинка воспроизводимая браузерами, то можно установить и анимированную, желательно более лёгкую, в два три кадра
Бегущая строка

Изменение вида бегущей строки выполняется и из самого тэга <marquee bgcolor="#c3f" height="24" width="300" vspace="3" hspace="20" align="right" style="font-size:18px;font-family:Times;color:#0f0">, где bgcolor-фон поля пробега строки, height-высота поля пробега, width-длина пробега, vspace-вертикальное смещение строки, hspace-горизонтальное смещение, align-первоначальное положение строки, style-стиль шрифта. Этот стиль определит шрифт и его размер для слов: Б е г у щ а я, а для слова с т р о к а оставим стиль "beg" код получается таким:

Бегущая строка

Атрибутов бегущей строки достаточно много, но ожидаемой гибкости управления нет, например использование width позволяет вставить бегущую строку непосредственно в текст, с обтеканием, но это приемлемо, только в IE и его клонах. Параметры vspace, hspace не принимаются многими браузерами, тем более в нестандартном тэге <marquee>, параметр width может некорректно воспроизводиться некоторыми версиями браузеров например в Firefox´ах, заданная ширина в width будет выполнена как пробег на всю ширину HTML-контейнера в котором установлена бегущая строка. И если длина пробега важна для просмотра в разных версиях веб-браузерах, то анимированный контент правильнее установить в табличную ячейку определяя длину пробега шириной ячейки. Использование таблицы позволяет добавить еще один декоративный элемент "border"-рамку.
<table width="80%" border="1" align="center">
<tr> <td><marquee>Бегущая строка в таблице</marquee></td> </tr> </table>

Вид рамки можно изменять (цвет, толщину, форму) в зависимости от требований дизайна страницы. Можно не устанавливать рамку, обозначив поле пробега цветом фона таблицы. Для примера создадим подобие рекламного баннера, в котором предложим, что-то не существующее в природе

Кроме таблицы, бегущую строку можно поместить в контейнер, так называемого лежака (layer). Создадим такой контейнер: <div id="stroka"><marquee>Бегущая строка в layer ’e </marquee></div>, где div-контейнер лейера, а id-идентификатор ("якорь" или по-простому "имя" ). Создадим стиль для этого контейнера:#stroka
{width:600px;height:40px;background-color:#30f;font-family:Arial,Helvetica,
sans-serif;font-size:90%;font-weight:700;color:#ff0;
border:#000;border-style:double;border-width:medium}
и поместим его в таблицу стилей которая находиться в голове данной HTML-страницы, там же, где находиться ранее созданный стиль ".beg"
(прим: если вынести эту таблицу в отдельный файл с расширением .css, то параметры этих стилей можно передавать на другие страницы, указав в голове <head></head> линком (link rel=text/css href=<!--путь к этому файлу-->) или импортировать таблицу стилей @import url(путь к таблице);):

Следует обратить внимание на параметр шрифта font-family:Arial,Helvetica,sans-serif; указаны два шрифта основной Arial и альтернативный Helvetica, а также возможность моноширнного шрифта: sans-serif, вариантность (семейность) шрифтов требуется по спецификации CSS, если обратиться к примеру кода ".beg", то в фонт-фэмиле указан, только один веб-шрифт Verdana, сделано это с целью смотрибельности кода, в реальном коде фонт-фэмили установлен так:font-family:Verdana,Arial,Helvetica,sans-serif;. Если выполнять требования последних спецификаций, то создание наклона (прописи) шрифта делается не тэгом Italic <i>, а тэгом <em>, тег bold<b> не используется, а толщину букв в шрифте надо задавать атрибутом <strong>

Но, marquee не специфицированный тэг, (прим: автору не удалось найти RFC для marquee) установка его в html приведёт к нарушение валидности документа. Курьёзность однако в том, что разработчики всех популярных графических веб-браузеров (Opera, Mozilla, KDE) включают поддержку бегущей строки в младших версиях своих продуктов и даже Netscape Navigator-8 воспроизводит <marquee>, не говоря уже про Internet Explorer, родной браузер для этого тэга (поддерживается с третьей версии) так, что нарушением валидности можно пренебречь, если это работает и обогащает дизайн сайта.

Рассмотрим ещё несколько примеров, для удобства поместим их в таблицу, но чтобы не загружать текст страницы, в демонстрационном коде будем выводить только ячейки этой таблицы.
Создадим ещё один layer, в котором фоном станет изображение Эйфелевой башни, поэтому назовём его paris_div стиль будет таким:
#paris_div
{width:140px;height:170px;background-color:#0f9;background-image:url(/img/paris.gif); font-family:Arial,Helvetica,
sans-serif;font-size:20px;font-weight:700;color:#ffff66}
Картинку в фоне задаём background-image:url(/img/paris.gif);, где виден путь к Gif-картинке лежащей в папке img, фоном может быть картинка любого формата приемлемого в Web.( Обратите внимание, что в описании стиля есть ещё один фон: background-color:#09f; отсутствие этого фона не является серьёзным нарушением, спецификации CSS рекомендуют устанавливать цветовой фон в контейнерах и шрифтах, отличный от белого, кодировка цвета не имеет значения). Вставляем layer в ячейку:
<td width="140"><div id="paris_div"><marquee>Увидеть Париж!!!</marquee></div></td>
(Рисунок 1), и это является нарушением, в строгих разметках, лежак нельзя устанавливать в таблицу, наоборот таблицу помещают в лежак.

Для второй ячейки создадим шрифт, стиль которого совпадает со стилем paris_div для различия назовём его paris_font:
.paris_font{font-family:Arial,Helvetica,sans-serif;font-size:20px;font-weight:700;color:#ffff66}
теперь посмотрим код ячейки:
<td width="140" background="/img/paris.gif" bgcolor="#03f"><marquee><span class="paris_font">Увидеть Париж!!!</span></marquee></td>
(Рисунок 2) картинка в фоне ячейки, это серьёзное нарушение, некоторые правильные браузеры не загрузят эту картинку, только цветовой фон bgcolor="#03f", другие не менее правильные обозреватели при отсутствии указателя фона в стиле шрифта, как в стиле. paris_font, сами установят белый (реже серый) фон (Рисунок 3).

В популярных IE, Avant, Opera, с настройками по-умолчанию, отсутствие бэкграунда можно считать прозрачностью, но пользователь вправе сделать свои настройки, например настроить свои стили шрифтов, или отключить выгрузку графики (кстати это делают те, кто пользуется dial-up коннектом Интернета, для ускорения просмотра сайтов) и с этим стоит считаться. Жёлтый шрифт вполне уместен на тёмном фоне ночного Парижа, а чёрные буквы на такой картинке и мрачноваты и плохо просматриваются. Но на Рисунке 4 показан пример выключения картинки и белый фон в бэкграунде, жёлтый шрифт теряет визуализацию, так, что установка дополнительного фона под картинкой не помешает, необходимо искать компромисс.

Делать сюжет построенный из бегущей строки и фоновой картинки, не благодатное занятие, так как они являются наложением одного на другое, и клиент обрабатывает или не обрабатывает их по отдельности. Результат часто будет похож на Рисунок 4 т.е. бессмысленный контент.
Рисунки показывают ёще одну трудность: смещение строки по вертикали. Параметр vspace должен бы решать эту задачу, но как указывалось выше, свою обязанность он выполнять не желает. Spacing (пространственное размещение объектов в html), тема серьёзная, обширная и не лишена проблем. Использование padding´а (отступов в контейнерах) или вставка пустых строк может привести к искажениям. Наиболее правильное решение, естественно выполнять spacing из CSS, но и это не всегда даёт результат (не во всех браузерах расширение .css выполняется в полном объёме).

Иногда "топорные " методы дают более верный результат. Вернёмся к таблице с Эйфелевой башней, в ячейках задаётся только ширина width, высота height в таблицах не задаётся, так как ячейка увеличивается автоматически по высоте по мере наполнением контентом, поэтому height в таблице, невалидный параметр. Если ячеек несколько (как в нашем примере), то наполнение одной ячейки в ряду, приводит к расширению всех остальных. Layer´а в Рисунках 1 и 3, и являются тем контентом который установил высоту ячеек, в layer параметр высоты обязателен, они как бы распирают таблицу, это и позволило установить в Рисунке 2 картинку, если бы этих распорок не было, ячейка развернулась бы на высоту шрифта строки на фоне макушки архитектурного символа Парижа. Для получения изображения всей башни, при отсутствии распорки, например в одной ячейке, пришлось бы устанавливать height, а это не правильно, не валидно.
В лежаке контент заполняет контейнер сверху вниз, слева направо, что естественно. В таблице развёрнутой "принудительно" контент устанавливается в центре (Рисунки 2 и 4).
Воспользуемся этим, создадим ещё один layer в бэкграунд которого поместим анимированную картинку (вращающийся глобус), название напрашивается само, globus, в стиле установим только бэкграунд и размер (кстати размер устанавливаем в размер фоновой картинки, если размер сделать больше, то придется решать вопрос о репликации изображения [замощение] в фоне, если она уместна, оставляем, нет, убираем).

Вот этот стиль: #globus {width:39px;height:40px;background-image:url(/img/globus.gif)}
Теперь вставим в layer табличку (одна ячейка):
<div id="globus"><table width="39" height="40"> <tr> <td><marquee scrollamount="1" style="font-family:Arial,Helvetica,sans-serif;font-weight:700;color:#000">InterNet</marquee></td> </tr> </table> </div>
таблица как контент, по умолчанию установится в верху layra´a, устанавливаем ширину в размер внешнего контейнера т.е. 39 рх, и делаем нарушение, устанавливаем height="40", то же в размер высоты контейнера. В marquee создаем стиль шрифта для слова InterNet и добавим ещё один параметр scrollamount="1", это смещение (монтирование) в прокрутке (скроллинге). Переменная величина "1" указывает на то, что смещение контента в бегущей строке будет в 1рх, по умолчанию (во всех предыдущих примерах) эта величина равна 2-6рх (зависит от версии и типа браузера). Зрительно это, выглядит как замедление строки. "1" есть наименьшая величина, установка "0" запрещает показ контента в marquee.

как это задумано по сюжету (слово InterNet перемещается на фоне вращающегося глобуса). Замедление в данном случае оправдано тем, что длина пробега короткая и фон анимирован, в противном случае контент прочитывался бы, с большим трудом.

Если сюжет картинки требует установки бегущей строки в нижней части рисунка, то применение атрибута height в таблице, пусть и не правильное, но верное решение.

Сделаем таблицу из двух ячеек установленных в колонку с двойным нарушением; первое вставим height с параметром 170 в тэг таблицы и второе тоже самое но со значением 135 для верхней ячейки, разница между этими двумя высотами естественно будет высота нижней ячейки в которую и поместим бегущую строку (Рисунок 5). Фоновую картинку указываем внутри тэга таблицы (table), и она становиться единой для обеих ячеек (Рисунок 6).
<table width="140" height="170" background="/img/paris.gif" cellpadding="0" cellspacing="0" border="0"> <tr> <td height="135">&nbsp;</td> </tr> <tr> <td><marquee> &span class="paris_font">Увидеть Париж!!!</span> </marquee></td></tr> </table>
В верхней ячейке стоит код пустого поля &nbsp;, в данном случае он не обязателен, при использовании HTML-генерирующих программ он устанавливается автоматически, вариант пустой ячейки вида: <td></td> равнозначен <td>&nbsp;</td>. Итак получаем нужный нам вариант (Рисунок 7):

Атрибуты border, cellspacing и cellpadding со значением нуля, конечно можно не указывать, но для страховки, что бы не получить отрисовку подобную Рисунку 8 (border="2" cellspacing="5"). В Рисунке 1 и 2 cellspacing не задан, и можно наблюдать, как браузер отрисовывает spacing по своему "усмотрению" (в зависимости от версии браузера, количество пикселей в spacing´e будет разным от 0 до 4 рх.) Хотя возможен сюжет, в которых эти параметры будут вполне уместны.

Гиперссылка в бегущей строке

В тэге marquee анимируется и текст гиперссылок. Адрес ссылки не имеет значения, абсолютный (переход на документы и файлы в сети), относительный (внутри сайта), внутренний (внутри документа). Для примера используем внутреннюю ссылку:
<a href="#zagolovok">ЗАГОЛОВОК СТРАНИЦЫ</a>
где href="#zagolovok" есть указание ссылки (реферирование), на адрес внутри данной страницы, адресом является якорь: <a id="zagolovok"></a> установленный в самой верхней строчке кода этой страницы, перед заголовком: "Анимация текста и гиперссылки", так как в контейнер якоря ничего не помещено, он невидим.
Поместим ссылку в marquee: <marquee><a href="#zagolovok">ЗАГОЛОВОК СТРАНИЦЫ</a></marquee> ,
теперь, если удастся попасть курсором в бегущий ЗАГОЛОВОК СТРАНИЦЫ и успеть кликнуть по нему, то страница будет показана с заголовка, а для возврата обратно в этот абзац (что-бы не утруждать себя прокруткой) достаточно кликнуть в заголовке, слово "гиперссылки".

В якорь для возврата на этот абзац, вписаны слова заголовок страницы, отображающиеся тем же шрифтом, что и ссылка, но без подчеркивания, поэтому его местоположение отражается на странице, вот этот якорь: <a name="vernis">ЗАГОЛОВОК СТРАНИЦЫ</a>, то что вместо идентификатора: id стоит имя: name на работу ссылки не влияет; id и name равнозначны, но рекомендуется id (особенно в строгих разметках), однако все стараются писать name, так как опасаются, что id может не сработать в старых веб-браузерах. Mы же интересуемся бегущей строкой и из любопытства посмотрим как поведёт себя якорь в комбинации с marquee.
Сделаем два варианта кода: первый вариант якорь внутри тэга <marquee> и вариант второй в бегущей строке находится только контент якоря.

Варианты якорей

Варианты получились одинаковыми, и не только визуально, но и функционально, т.е. это тот случай когда перестановка не влияет на результат, кстати перемена ID и NAME тоже не влияет. Это относится и к гиперссылке посмотрим ещё один вариант с гиперссылкой:

В работоспособности ссылки можно убедиться, а вот вид её может отличаться от той которая была создана ранее; например отсутствие подчёркивания, изменение шрифта или цвета, может измениться и поведение курсора, всё в зависимости от типа используемого веб-браузера.
Опуская разговор о том, что использование бегущей строки в HTML неправильно, поставим вопрос, какой вариант установки marquee правильный? На него сможет ответить, только высококвалифицированный программист. Для стандартных тэгов существуют спецификации о порядке вложения тэгов. Но marquee рекомендовано не размещать в html, и более менее внятных рекомендаций о вложениях с этим тэгом почти нет. Для проверки работоспособности бегущей строки в тэгах остаётся, метод пробы
Возможно, анимация ссылок, лишена практического смысла, ну может только, для старинной вебовской забаве "Кликни с первого раза и получишь офигительный б о н у с". Но поэкспериментировать можно.
В ссылке с со словом "гиперссылки" в заголовке страницы шрифт изменён с помощью CSS. Рассматриваемый заголовок помещён в тэг селектора выбора шрифта заголовков <h2></h2> (всего их шесть H1...H6). Во внешней таблице стилей h2 задан так:
h2 {font-family:Arial;font-weight:700;font-size:100%;color:#039}
и это распространяется на все страницы импортирующие этот стиль, в том числе и эта, основной контент которой размещён в тэге <div id="content"></div>. Для гиперссылки в заголовке, только для этой страницы, созданы стили шрифтов:
#content h2 a:link
{font-family:Arial;font-weight:700;font-size:100%; color:#039;text-decoration:none}
#content h2 a:visited
{font-family:Arial;font-weight:700;font-size:100%;color:#039;text-decoration:none}
#content h2 a:hover
{font-family: Arial; font-weight:700;font-size:100%;color:#039;text-decoration:none}
где a:link шрифт ссылки, a:visited шрифт уже посещённой ссылки, a:hover шрифт ссылки на которую наведён курсор. (Ещё один вариант a:active активированная ссылка, т.е. сразу после клика, используется крайне редко).
Стили всех трёх шрифтов совпадают, в этом случае можно сэкономить и записать таким образом:
#content h2 a:link,a:visited,a:hover
{font-family:Arial;font-weight:700;font-size:100%;color:#039;text-decoration:none}, но лучше и надёжнее расписать все линки отдельно. Параметр text-decoration:none; указывает, что никаких дополнительных (декоративных) изменений шрифта нет.

Теперь создадим стиль для новой ссылки, используем селектор h3:
#content h3 a:link
{font-family:Arial;font-size:18px;font-weight:700;color:blue;text-decoration:none}
#content h3 a:hover
{font-family:Arial;font-size:26px;font-weight:700;color:green;text-decoration:underline;cursor:help}
#content h3 a:visited
{font-family:Aria;font-size:20px;font-weight:700;color:red;text-decoration:blink}
в этом примере шрифты линков разные; неактивированная ссылка синего цвета размер 18рх, при наведении курсора, цвет должен поменяться на зелёный, размер увеличиться до 26рх, декорироваться подчёркиванием text-decoration:underline; и курсор дополняется знаком вопроса cursor:help;, посещённая ссылка красного цвета 20рх и мигает (блинкует) text-decoration:blink (в браузере от Microsoft этот эффект не работает, но Opera и Firefox его воспроизводят), итак ставим ссылку на ЯКОРЬ-1 и проверяем его работоспособность в marquee:
<marquee><h3><a href="#anker_1">Ссылка на ЯКОРЬ-1</a></h3></marquee>
В такую ссылку попасть курсором гораздо легче и забавнее.

Но и такую ссылку трудно кликнуть с первого раза, уползает зараза. Но программисты не зря кушают свой хлеб. Они давно создали скрипты (сценарии) интерактивности на веб-страницах. Правда такие активные элементы, это возможность вредоносного воздействия на компьютер, поэтому в целях безопасности, действия подобных скриптов либо не поддерживаются некоторыми браузерами, либо в браузерах имеется опция их блокирования. Но многие пользователи разрешают работу скриптов в своих браузерах, так как современные веб-ресурсы предполагают интерактивность в своей работе.
Возьмём предыдущий пример и добавим эти скрипты:
<marquee onmouseover="this.stop()" onmouseout="this.start()"><h3><a href="#anker_2" id="ostanov">Ссылка на ЯКОРЬ-2</a></h3></marquee>
onmouseover="this.stop()" скрипт останова строки при наведении курсора, onmouseout="this.start()" скрипт пуска строки при удаления курсора с неё. В гиперссылке добавлен индификатор "ostanov", теперь это якорь и ссылка в одном флаконе, вызов на этого якоря в словах Варианты якорей, и если браузер поддерживает указанные скрипты, то бегущая строка будет останавливаться наведением курсора.

Возможные проблемы бегущей строки

При использовании такого эффекта как бегущая строка надо учитывать, и такой момент, как невоспроизведение её в браузерах. До 2004 года можно было говорить о том, что в Netscape бегущая строка не работает, но графических браузеров не понимающих тэг marquee в пользовании почти не осталось, но есть небольшое количество пользователей предпочитающие текстовые браузеры (например легендарный Lynx), по определению не понимающие, ни скриптов, ни CSS и прочих украшательств Веб-страниц, или пользователи современных браузеров отключающие в них функции активных элементов (а бегущая строка, относиться к таким элементам). И так как подобные варианты просмотра не исключены, то при размещении контента в marquee стоит проверить, как он будет выглядеть при отключении бегущей строки.

В современных обозревателях при отключении marquee, контент чаще всего не выгружается на страницу, в старых NN или Opera(до 6 версии), а также в текстовых (Lynx, Links, Dillo) весь текст будет отображаться в статичном виде, учитывая тот факт, что объем контента устанавливаемого в контейнер бегущей строки теоретически не ограничен, "вываливание" его на страницу может задавить основной контент документа.

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

в начало статьи
Поведение Marquee Направление Marquee Невалидность Marquee Ускорение и замедление в Marquee Индексация Marquee Marquee в текстовых браузерах Скорость Marquee