Blog de TemplateMonster

Gestionar textos facilmente con Plugines de Tipografía de jQuery

Diane Parks

La elección de tipo de letra es uno de los pasos principales en el diseño de página web o cualquier otra interfaz de usuario. Una de las desventajas de la tipografía es el número reducido de grupos de tipos de letra. Por desgracia, hay sólo cuatro de ellos Serif, Sans Serif, Script y Decorative. Pero cada uno de estos cuatro grupos incluye una gran cantidad tipos de letra y a veces es bastante difícil elegir el más adecuado.

Finalmente, al utilizar un tipo de letra en su diseño no siempre obtendrá  el resultado satisfactorio. En este caso, Usted puede usar varios plugines de tipografía de jQuery que, sin duda, le darán algunas características útiles y permitirán manipular textos web sin problemas. Ahora queremos presentar 12 plugines de tipografía más singulares que le permiten personalizar su tipo, así como crear algunos efectos interesantes.

***

Type Butter

TypeButter le permite ajustar el kerning óptico para cualquier tipo de letra en su sitio web. Si Usted necesita un texto hermosamente diseñado que los navegadores populares simplemente no ofrecen, este es el plugin para Usted! Además, no se olvíde de revisar el texto curvado utilizando jQuery Bacon.

***

Hatchshow

El plugin de jQuery equilibra la balanza. Dependiendo de la cantidad de texto en columnas,  ellas serán mostradas contraídas o expandidas.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  <script type="text/javascript" charset="utf-8">
    $(window).load(function(){
      $().hatchShow();
    });		
    jQuery.fn.hatchShow = function(){
      $('.hsjs').css('display','inner-block').css('white-space','pre').each(function(){
        var t = $(this);
        t.wrap("<span class='hatchshow_temp' style='display:block'>");
        var pw = t.parent().width();
        while( t.width() < pw ){t.css('font-size', (t.fontSize()+1)+"px"),
          function(){while( t.width() > pw ){t.css('font-size', (t.fontSize()-.1)+"px")}};
        };
      }).css('visibility','visible');
    };
    jQuery.fn.fontSize = function(){return parseInt($(this).css('font-size').replace('px',''));};
   </script>

***

JQISOTEXT

Con este plugin vamos a cambiar el tamaño de las letras en el texto. En la forma mostrada tratamos de conseguir algo similar a la proyección isométrica. Se puede hacerlo para un bloque de texto o para cada palabra en un texto.

***

Responsive Measure

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<script src="jquery.js"></script>
<script src="jquery.rm.js"></script>
<script type="text/javascript">

$('section').responsiveMeasure({
    // Variables you can pass in:
    idealLineLength: (defaults to 66),
    minimumFontSize: (defaults to 16),
    maximumFontSize: (defaults to 300),
    ratio: (defaults to 4/3)
});

  </script>

El plugin de jQuery que puede generar medidas responsivas ideales.

***

Style-my-tooltips jQuery Plugin

Un plugin sencillo para mejorar el aspecto de información sobre herramientas del navegador web. El script de tamaño pequeño (4kb) funciona como información sobre herramientas de su navegador web con pocas opciones y  estilo por medio de CSS.

***

Textilate.js

Textillate.js combina algunas bibliotecas impresionantes para facilitar el proceso de uso  de plug-in para la aplicación de las animaciones CSS3 a cualquier texto.

***

Shuffle Letters Effect

Este plugin jQuery baraja el contenido de texto de cualquier elemento DOM - un efecto interesante que se puede utilizar en cabeceras, logos y presentaciones de diapositivas.

***

Varezhka Typography Plugin

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
#html_escape
    str.gsub!(/[&><]/) { |special| { '&' => '&amp;', '>' => '&gt;', '<' => '&lt;' }[special] } if options[:escape_html]

    #apostrophe
    str.gsub!(/(\w)'(\w)/, '\1’\2')

    #russian quotes
    str.replace_quotes! '«', '»', '„', '“', 'а-яА-Я'

    #english quotes
    str.replace_quotes! '“', '”', '‘', '’', 'a-zA-Z'

    #mdash
    str.gsub!(/--/, '&mdash;')
    str.gsub!(/(\w|;|,)\s+(—|–|-)\s*(&#|\w)/, '\1&nbsp;&mdash; \3')
    str.gsub!(/\s+&mdash;/, '&nbsp;&mdash;')

    #nobr
    #around dash-separated words (что-то)
    str.gsub!(/(^|\s)((\w|0-9){1,3})-((\w|0-9){1,3})($|\s)/, '\1<span>\2-\4</span>\6')
    #1980-x почему-то
    str.gsub!(/(^|\s)((\w|0-9)+)-((\w|0-9){1,3})($|\s)/, '\1<span>\2-\4</span>\6')

Plugin simple para hacer el texto más legible mediante la aplicación de algunas normas tipográficas a string.

***

Cubitoo Typography Plugin

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
(function($) {
  $.fn.fixTypography = function(selected_replacements) {

    // Replacements for bad web typography
    var replacements = {
      // Line rhythm
      bastards:      { invalid: /\ ([a-z]{1})\ /mgi, valid: " $1&nbsp;" },
      em_dashes:     { invalid: /\ - \ /mgi, valid: "&nbsp;&mdash;&nbsp;"},
      en_dashes:     { invalid: /([a-zA-Z ]{1})(-)([a-zA-Z ]{1})/mgi, valid: "$1&ndash;$3"},
      double_spaces: { invalid: /[ ]{2,}/mgi, valid: " " },

      // Quoting
      single_quotes: { invalid: /\'([a-zA-Z0-9 ]+)\'/mgi, valid: "&lsquo;$1&rsquo;" },
      double_quotes: { invalid: /\"([a-zA-Z0-9 ]+)\"/mgi, valid: "&ldquo;$1&rdquo;" },
      angle_quotes:  { invalid: /<<([a-zA-Z0-9 ]+)>>/mgi, valid: "&laquo;$1&raquo;" },
      apostrophes:   { invalid: /([a-zA-Z0-9]+)\'([a-zA-Z ]+)/mgi, valid: "$1&rsquo;$2 " },

      // Replacing
      copyright:     { invalid: /\(c\)/mgi, valid: "&copy;" },
      ellipsis:      { invalid: "...", valid: "&hellip;" },
    }

¿No le gusta la tipografía predeterminada en su sitio web? No es problema. La tipografía Cubitoo  es un conjunto de pequeñas correcciones para solucionar problemas habituales de la tipografía sin romper su sintaxis optimizado, por ejemplo:

***

Line-In-Typography

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
(function($) {
	"use strict";
	// Create the control panel. This should only be fired once.
	$.fn.LineInTypography = function(options) {
		// Extend our default options with those provided.
		// Note that the first arg to extend is an empty object -
		// this is to keep from overriding our "defaults" object.
		var opts = $.extend({}, $.fn.LineInTypography.defaults, options);
		opts.selector = $(this).selector;
		opts.lineHeightContainerHeight = $(opts.lineHeightContainer).height();
		if ( opts.defaultLineHeight !== false ) {
			opts.lineHeight = parseInt( opts.defaultLineHeight );
		} else {
			opts.lineHeight = Math.round(
				parseFloat(
					$(opts.lineHeightContainer).css('line-height')
				)
			);

		}

Este plugin permite mostrar las líneas basadas ​​en la altura de la línea de su tema para que Usted pueda establecer correctamente su ritmo vertical y alinear su tipografía.

***

jQuery Typography Troll

1
2
3
 
jQuery(document).ready(function() {
  jQuery('body').typographyTroll();
});

Typography Troll ofrece una manera fácil de confundir a los lectores que tratan de distinguir cuál de las diversos tipos de letra similares Usted usa (como Helvetica y Arial) y asigna una familia de tipos de letra al azar a cada carácter del texto seleccionado.

***

Paperback jQuery Plugin

Paperback es un tema para Wintersmith que fue inspirado por la tipografía de novelas e informado por entradas de blog sobre la experiencia de lectura digital escrito por los arquitectos de la información, entre otros.