Gestionar textos facilmente con Plugines de Tipografía de jQuery
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.
***
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.
***
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>
|
***
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.
***
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.
***
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.
***
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.
***
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| { '&' => '&', '>' => '>', '<' => '<' }[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!(/--/, '—')
str.gsub!(/(\w|;|,)\s+(—|–|-)\s*(&#|\w)/, '\1 — \3')
str.gsub!(/\s+—/, ' —')
#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.
***
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 " },
em_dashes: { invalid: /\ - \ /mgi, valid: " — "},
en_dashes: { invalid: /([a-zA-Z ]{1})(-)([a-zA-Z ]{1})/mgi, valid: "$1–$3"},
double_spaces: { invalid: /[ ]{2,}/mgi, valid: " " },
// Quoting
single_quotes: { invalid: /\'([a-zA-Z0-9 ]+)\'/mgi, valid: "‘$1’" },
double_quotes: { invalid: /\"([a-zA-Z0-9 ]+)\"/mgi, valid: "“$1”" },
angle_quotes: { invalid: /<<([a-zA-Z0-9 ]+)>>/mgi, valid: "«$1»" },
apostrophes: { invalid: /([a-zA-Z0-9]+)\'([a-zA-Z ]+)/mgi, valid: "$1’$2 " },
// Replacing
copyright: { invalid: /\(c\)/mgi, valid: "©" },
ellipsis: { invalid: "...", valid: "…" },
}
|
¿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:
- una sola letraal fin de la línea, mientras que debería ser trasladada a la siguiente línea,
- un hypen entre dos palabras que deben ser escritos sin hypen,
- guión entre las palabras que no se debe dejar al final de la línea o escribir en el primer lugar en la línea siguiente.
***
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.
***
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 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.
Diane trabja como una redactora del blog MonsterPost España desde hace muchos años. No imagina su vida sin escribir, aprender algo nuevo cada día, desarollarse personalmente y profesionalmente, y compartir sus conocimientos y experiencia con los lectores del blog. ¡Síguela en Facebook!