Cufon и Typeface.js – это две javascript библиотеки для использования на сайте любых(!) шрифтов (аналоги sIFR), использующих для отображения canvas и VML. В чем же между ними отличия? И какая из них лучше?

Принципы работы

Cufon и Typeface.js конвертируют нестандартный шрифт в свой внутренний формат и потом отображают его с помощью canvas в современных браузерах и VML в Internet Explorer’е. Плюсы такого подхода в том, что нет нужды в плагине для отображения флеш! По сравнению с sIFR, мы получаем большую скорость и гарантию работоспособности на всех компьютерах.

ТТХ

Генерирование шрифтов

Обе библиотеки имеют удобные онлайн-конвертеры шрифтов:
* конвертер для Cufon
* конвертер для Typeface.js
Загружаете свой шрифт, выбираете необходимые группы символов (верхний\нижний регистр, цифры, спецсимволы и т.п.), а на выходе получаете готовый .js файл. Typeface.js поддерживает только TrueType (.ttf) шрифты. Cufón – OpenType (.otf), Printer Font Binary и postscript. Жаль, что конвертер Typeface.js имеет встроенную проверку лицензии и откажется конвертировать запрещённый к распространению шрифт.
Вопрос о выборе групп символов Typeface.js задаст только посе загрузки шрифта. Cufon же позволяет задать все опции сразу на одной страничке, плюс имеет возможность включить полужирный и курсивный варианты в конечный файл. Кроме того(!), позволяет ограничить использование на определённых доменах и указать качество шрифта.

Вставка на сайт

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

<script type="text/javascript">
  Cufon.replace('h1');
</script>

Typeface.js работат немного по-другому. Он автоматически заменяет все заголовки, в стилях которых указано имя нашего шрифта (например “optimer”):

h1,  h2 {
  font-family:optimer;
}

Остальным же элементам необходимо дополнительно установить класс typeface-js:

<div class="myclass typeface-js">
...
</div>

Internet Explorer 7

В данном браузере есть проблема. Из-за задержки в пару миллисекунд происходит мерцание текста. Прекратить это безобразие легко. Необходимо перед закрывающем тегом добавить код:
Cufon:

<script type="text/javascript"> Cufon.now(); </script>

Typeface.js

<script type="text/javascript"> _typeface_js.renderDocument(); </script>

Лицом к лицу

Перейдём к демо страничке и посмотрим две библиотеки в работе. Как Вы можете заметить – есть отличия в отступах, особенно при изменении размера шрифта. На этом фоне Cufón в более выгодной позиции.

Вердикт

Что же лучше? Cufón или Typeface.js? По функционалу разница небольшая: Cufon поддерживает больше типов шрифтов, Typeface.js – больше CSS свойств. Typeface.js проще в использовании, Cufon меньше и имеет правильные отступы.
Итак, использование Cufon’a предпочтительней, но конечного победителя нет. Это означает, что будет лучшим тот, кто первым реализует поддержку выделения текста! :)

Оригинал статьи: Cufon vs. Typeface.js, which one is better?

Похожие статьи:

1. 8 CSS групп шрифтов для вебдизайна

С пылу с жару! Как я рад, что пофиксил немного “Facebox” (особенно учитывая мои слабые познания js)!!!
Суть проблемы проста – .png рамки непрозрачны в ИЕ :(
Для этого перепробовал кучу решений и остановился на Ifixpng, плагине для jQuery, который фиксит прозрачность. Качаем, подключаем скрипт и инициализируем его на страничке:

1
2
3
4

jQuery().ready(function(){
        $('a[rel*=facebox]').facebox();
        $('#facebox td').ifixpng();   < ------
});

Ура, уголки стали прозрачными! Но у нас появилась новая проблема – ifixpng не поддерживает CSS свойство “background-repeat”, из-за чего некорректно ображаются рамки. Так что напильничком подрихтовываем стили facebox’а (facebox.css):

1
2
3
4
5

#facebox .b {
  background: #555;
  opacity: .70;
  filter: alpha(opacity=70); /* for IE6 support */
}

Теперь нам совсем не нужен файл "b.png" и с моего полупинка фейсбокс работает как и задумывал автор (которому, кстати, огромный респект)! Удачи!

Похожие статьи:

1. Facebox
2. PNG-прозрачность в IE 5.5-6-7
3. 10 CSS фишек, которые станут доступны после исчезновния IE6

Привет всем! Извините, что давно не пишу – сейчас мало времени :(
Но думаю компенсировать в скором чем-нибудь новеньким. А пока…

Если вам вдруг интересен jQuery, и чисто случайно есть желание почитать о нём, но совсем нет времени искать ресурсы, то вам к Потапову Геннадию! Он собрал просто громадную коллекцию ссылок (Влад, было приятно увидеть там ссылку и на твой блог!) :

jQuery – The best JavaScript framework

Так что страничку в закладки, а “TermiT’s Blog” в подписку! :)
Удачи!

Похожие статьи:

1. Настраиваем Thickbox
2. Facebox
3. Facebox IE6 png transparency fix!

После того, как Microsoft объявила (опять же), что они изменили способ обработки плагинов в Internet Explorer у веб-разработчиков добавилось проблем. Заключается она в том, что при вставке applet, object, или embed в HTML документ плагин не допустит взаимодействия с пользователем до тех пор, пока пользователь не нажмёт на него :(.

В случае с флеш плагином, это означает, что ваш ролик не будет проигрываться до тех пор, пока пользователь его не активизирует, кликнув на нём. К счастью, Micosoft предлагает довольно простой способ обойти это проблему – вставлять флеш, используя Javascript.

Итак…

SWFObject это небольшой Javascript файл, используемый для максимально лёгкой и валидной вставки флеш. Он помогает обойти дурацкую “защиту” в IE, работает во всех основных браузерах, дружит с поисковиками, вобщем мастхэв! Взгляните на демо-страничку скрипта.

В использовании предельно прост – подключаем файл swfobject.js и добавляем в код странички примерно такое:

<script type="text/javascript" src="swfobject.js"></script>
 
<div id="flashcontent">
  This text is replaced by the Flash movie.
</div>
 
<script type="text/javascript">
   var so = new SWFObject("movie.swf", "mymovie", "400", "200", "8", "#336699");
   so.write("flashcontent");
</script>

Рассмотрим подробней каждую строчку кода:

Именно этот блок, будет заменён на ваш флеш контент, а текстовое содердимое ([...]) увидят поисковики(!!!).

Создаём флеш обьект:

var so = new SWFObject(swf, id, width, height, version, 
background-color [, quality, xiRedirectUrl, redirectUrl, detectKey]);

Где параметры:

• swf – путь к вашему swf файлу.
• id – ID тега object или embed
• width -ширина.
• height – высота.
• version – необходимая для проигрывания установленная версия флеш плагина.
• background-color – шестнадцатиричное значение цвета фона.
• quality – качество ролика, по умолчанию “high”.

Непосредственно сама вставка флеш контента:
so.write("flashcontent");

Рассмотрим пример с дополнительными параметрами и использованием переменных:

<script type="text/javascript">
   var so = new SWFObject("movie.swf", "mymovie", "400", "100%", "8", "#336699");
   so.addParam("quality", "low");
   so.addParam("wmode", "transparent");
   so.addVariable("variable1", "value1");
   so.addVariable("variable2", "value2");
   so.addVariable("variable3", getQueryParamValue("variable3"));
   so.addVariable("variable4", getQueryParamValue("variable4"));
   so.write("flashcontent");
</script>

Указываем “низкое” качество проигрывания:

so.addParam("quality", "low");

Обязательно используйте для избежания проблем при наложении флеш поверх выпадающего меню:

so.addParam("wmode", "transparent");


Указываем значения нужных переменных:

so.addVariable("variable1", "value1");
so.addVariable("variable2", "value2");

Передаём переменные из строки запроса (http://www.example.com/page.html?variable3=value3&variable4=value4):

so.addVariable("variable3", getQueryParamValue("variable3"));
so.addVariable("variable4", getQueryParamValue("variable4"));

Вот и всё! Пользуйтесь на здоровье!

Похожие статьи:

1. Вставляем простой flash mp3 плеер на сайт
2. Отношения заказчик-исполнитель в виде бытовых сценок
3. Форум фрилансеров “Tools for freedom”

Для пользователей WordPress есть замечательный плагин Audio Player (там же рассказано о его разукрашивании). А что же делать если понадобилось вставить плеер на обычном сайте?

Для начала скачать архив с плагином последней версии и распаковать из него 2 файла: player.swf и audio-player.js. Затем создаём на сервере папку “audio“, куда и заливаем файлы плеера и нужнуые mp3шки (например music.mp3).

Вставляем в <head>

<script language="JavaScript" src="/audio/audio-player.js"></script>

А в нужном месте код плеера и готово!

<object type="application/x-shockwave-flash" data="/audio/player.swf" id="audioplayer1" height="24" width="290">
<param name="movie" value="/audio/player.swf">
</param><param name="FlashVars" value="playerID=1&amp;soundFile=/audio/music.mp3">
</param><param name="quality" value="high">
</param><param name="menu" value="false">
</param><param name="wmode" value="transparent">
</param></object>

И не забудьте поменять пути к файлам на свои! Если же понадобилось вставить несколько плееров, то доолнительно поменяйте в новом коде id=”audioplayer1″ и value=”playerID=1 на 2, 3, 4…

Эта заметка мой вольный перевод с аглицкого.

Похожие статьи:

1. Выбирал я себе flash mp3-плеер

Ковырялся недавно с PNG в менюшке и пришлось перепробовать несколько решений. Приведу те, которые понравились.

• Хорошее решение, с пошаговой инструкцией. Кроме этого рассказано о проблеме с темноватым изображением и не работающими ссылками при использовании PNG в качестве фона в IE. Из “минусов” – нужно использовать дополнительный класс у картинки.
• На известном 24ways.org похожее решение, но без дополнительных классов CSS. Использую его.
• Вариант для любителей jQuery тоже не мог обойти стороной.
• И на закуску полезная статья по работе с PNG в Fireworks от SitePoint.

Похожие статьи:

1. Facebox IE6 png transparency fix!
2. Как Internet Explorer поддерживает CSS?
3. На заметку: кроссбраузерный CSS display: inline-block

В былые времена, когда ещё не было возможности открывать страницу в новой закладке, клик по ссылке уводил пользователя с целевого сайта. Естественно это не нравилось шефу или клиенту и они хотели использовать открытие внутренних или внешних ссылок в новых окнах.

В наши дни вместо того, чтобы пользователям самим позволять выбирать поведение – открыть ссылку в отдельном окне или нет – до сих пор хотят данного функционала. Всё бы хорошо, но в XHTML strict использование атрибута ‘target=”_blank”‘ не является валидным :(

Употребление кода типа href="javascript:" или href="#" onclick= для всплывающих окон нам не подходит изначально – т.к. протокола javascript: нет, а # вообще никуда не ведёт – в любом случае при отключенном javascript пользователь окажется в неприятном положении :(

Итак, усовершенствуем ссылки…

XHTML Всплывающие окна (popups)

<a href="popup.html" rel="popup|400|200">Всплывающее окно</a>

где указываем нужные размеры – (‘popup|высота|ширина’)

Внешние ссылки (в новом окне)

<a href="http://en.wikipedia.org/wiki/City_Road" rel="external">Внешняя ссылка</a>

Ну вот – так немного красивее! Мы получили реальные ссылки, вот только появился незнакомый атрибут “rel” – сокращение от ‘relationship’, который определяет отношения документа в ссылке с текущей страницей (W3C). Его-то мы и можем применить с пользой для себя.

Конечно же браузер не знает что делать с атрибутом, поэтому нам потребуется JavaScript. Он будет представлять собой вариант из двух отдельных скриптов (Kevin’s XHTML Compliant Target, Mike Rainey’s Dynamic Popups) с добавлением иконок.

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

Что же делает скрипт?

1. Функция — windowLinks() — помещает все ссылки на странице в рабочий массив
2. Начинает искать в массиве ссылки с атрибутом rel
3. Если находит rel со значением ‘external’, то используя DOM меняет значение атрибута target на ‘_blank’ (зачем? а затем, что в отличие от XHTML – в спецификации DOM он не запрещён!).
4. Добавляется всплывающая подсказка, информирующая пользователя о поведении ссылки
5. Также добавляется CSS класс (.external), который позволяет визуально определить по иконке внешнюю ссылку

1. Если же скрипт находит ‘|’ внутри rel, он использует разделитель для разбиения строки на три части – ‘popup‘, ширина и высота нашего всплывающего окна.
2. …помещает эти данные в стандартную функцию acpopup();
3. Добавляется всплывающая подсказка
4. Также добавляется CSS класс .popup, который позволяет визуально определить по иконке внешнюю ссылку
5. и сам запуск функции windowLinks().

CSS:

.external {
	font-weight:bold;
	background :transparent url(ext.gif) no-repeat right center;
	padding-right:12px;
}
.popup {
	font-weight:bold;
	background :transparent url(pop.gif) no-repeat right center;
	padding-right:12px;
}

В итоге получим:

Пример »

Скачать »

(перевод статьи New Windows and Usability: the Theory of ‘REL-ativity’)

Похожие статьи:

1. Facebox IE6 png transparency fix!
2. Непростое CSS меню с использованием спрайтов
3. Флеш против IE. Побеждает SWFObject!

Искал давеча способ, позволяющий при нажатии кнопки “Submit” в форме, открыть её в новом окне. Нашёл, универсальный, т.к можно для popup окна задать все нужные параметры. Для начала в < head > надо вставить код:

1
2
3
4
5
6
7
8
9
10
11

<script type="text/javascript">
/*
Form2Pop Script- By Peter Bailey (http://www.peterbailey.net)
Featured on JavaScriptKit.com
Visit http://www.javascriptkit.com for this script and more
*/
function createTarget(t){
window.open("", t, "width=600,height=550");
return true;
}
</script>

А после подправить код в самой форме:

1
2
3
4

<form name="sampleform" method="POST"
action="/cgi-bin/formsubmit.pl" 
onsubmit="return createTarget(this.target)"
target="formtarget"></form>

Похожие статьи:

1. Вставляем простой flash mp3 плеер на сайт
2. Флеш против IE. Побеждает SWFObject!
3. Открытие ссылок в новом или всплывающём окне

Ура! Dave Child продолжил серию полезных шпаргалок (уже есть по CSS, PHP, MySQL). Теперь список пополнился шпаргалкой JavaScript Cheat Sheet. Статью про CSS-шпаргалку на русском можно глянуть на webmascon’e.

Нет похожих статей.