Увеличить уменьшить размер шрифта текста

Браузеры позволяют изменить масштаб страницы, нажав на клавиши CTRL+ или CTRL-.

Скрипт увеличить уменьшить текст.

Здесь я буду делать акцент на Blogger, но данный скрипт, увеличивающий уменьшающий размер шрифта текста на странице, можно с успехом применить и на других ресурсах. Пользователи blogspot переходят в "Дизайн"-"Изменить HTML" и, нажав "Расширить шаблоны виджета", выполняют следующие действия:

Добавляем скрипт.

Перед </head> пишем:

<script type="text/javascript">
var tgs=new Array('div','p','td','pre');
var szs=new Array('xx-small','x-small','small','medium','large','x-large','xx-large');
var startSz=2;
function ts(trgt,inc) {
  if (!document.getElementById) return
  var d=document,
  cEl=null,sz=startSz,i,j,cTags;
  sz += inc;
  if (sz &lt; 0) sz=0;
  if (sz &gt; 6) sz=6;
  startSz=sz;
  if ( !(cEl=d.getElementById(trgt))) cEl=d.getElementsByTagName(trgt)[0];
  cEl.style.fontSize=szs[sz];
  for (i=0 ; i &lt; tgs.length; i++) {
    cTags=cEl.getElementsByTagName(tgs[i]);
    for (j=0; j &lt; cTags.length ; j++) cTags[j].style.fontSize=szs[sz];
  }
}
</script>

Скрипт очень гибкий. Те теги, которые мы хотим учитывать, указываем в

var tgs=new Array('div','p','td','pre');

Размер мы также можем писать в процентах

var szs=new Array('70%','80%','90%','100%','110%','120%','130%');

Определяем область увеличивания шрифта.

Для того, чтобы учитывался только текст сообщения без захвата гаджетов, в фрагмент

<div class='post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

добавляем выделенное жирным

<div class='post-body entry-content'>
<div id="textIzmenit">
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
</div>

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

Вставляем элементы, нажав на которые будет изменяться текст.

В то место, где мы хотим увидеть кнопки пишем:

<a href="javascript:ts('textIzmenit',1)"> A+ </a>
<a href="javascript:ts('textIzmenit',-1)"> А- </a>

Вместо букв А мы можем добавить изображение. Либо сделать для текста тень с помощью CSS. Если заменить textIzmenit на body, то преобразование будет происходить по всей странице. Пример, Увеличить/Уменьшить.

Для Blogger мне понравился вариант рядом с датой, которую мы расположим справа. Код:

<h2 class='date-header'><span><data:post.dateHeader/></span></h2>

заменим на:

<h2 class='date-header'><b:if cond='data:blog.pageType == &quot;item&quot;'>&lt;a href=&quot;javascript:ts(&#39;textIzmenit&#39;,1)&quot; style=&quot;font-size: x-large;&quot; title=&quot;Увеличить шрифт&quot;&gt;А&lt;/a&gt;
&lt;a href=&quot;javascript:ts(&#39;textIzmenit&#39;,-1)&quot; title=&quot;Уменьшить шрифт&quot;&gt;А&lt;/a&gt;&lt;/b:if&gt;<span style='float: right;'><data:post.dateHeader/></span><b:else/><span><data:post.dateHeader/></span></b:if></h2>

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

в f t