{"id":339,"date":"2013-04-03T10:11:29","date_gmt":"2013-04-03T10:11:29","guid":{"rendered":"https:\/\/www.templatemonster.com\/es\/blog\/?p=339"},"modified":"2020-05-08T08:49:44","modified_gmt":"2020-05-08T08:49:44","slug":"gestionar-textos-facilmente-con-plugines-de-tipografia-de-jquery","status":"publish","type":"post","link":"https:\/\/monsterspost.com\/es\/gestionar-textos-facilmente-con-plugines-de-tipografia-de-jquery\/","title":{"rendered":"Gestionar textos facilmente con Plugines de Tipograf\u00eda de jQuery"},"content":{"rendered":"

La elecci\u00f3n de tipo de letra es uno de los pasos principales en el dise\u00f1o de p\u00e1gina web o cualquier otra interfaz de usuario. Una de las desventajas de la tipograf\u00eda es el n\u00famero reducido de grupos de tipos de letra. Por desgracia, hay s\u00f3lo cuatro de ellos Serif, Sans Serif, Script y Decorative<\/strong>. Pero cada uno de estos cuatro grupos incluye una gran cantidad tipos de letra y a veces es bastante dif\u00edcil elegir el m\u00e1s adecuado.<\/p>\n

<\/p>\n

Finalmente, al utilizar un tipo de letra en su dise\u00f1o no siempre obtendr\u00e1 \u00a0el resultado satisfactorio. En este caso, Usted puede usar varios plugines de tipograf\u00eda de jQuery<\/strong> que, sin duda, le dar\u00e1n algunas caracter\u00edsticas \u00fatiles y permitir\u00e1n manipular textos web sin problemas. Ahora queremos presentar 12 plugines de tipograf\u00eda m\u00e1s singulares que le permiten personalizar su tipo, as\u00ed como crear algunos efectos interesantes.<\/p>\n

***<\/p>\n

Type Butter<\/a><\/p>\n

\"Manage<\/a><\/p>\n

TypeButter le permite ajustar el kerning \u00f3ptico para cualquier tipo de letra en su sitio web. Si Usted necesita un texto hermosamente dise\u00f1ado que los navegadores populares simplemente no ofrecen, este es el plugin para Usted! Adem\u00e1s, no se olv\u00edde de revisar el texto curvado utilizando jQuery Bacon.<\/p>\n

***<\/p>\n

Hatchshow<\/a><\/p>\n

\"Manage<\/a><\/p>\n

El plugin de jQuery equilibra la balanza. Dependiendo de la cantidad de texto en columnas,\u00a0 ellas ser\u00e1n mostradas contra\u00eddas o expandidas.<\/p>\n

\n\n\n\n
\n
1\r\n2\r\n3\r\n4\r\n5\r\n6\r\n7\r\n8\r\n9\r\n10\r\n11\r\n12\r\n13\r\n14\r\n15\r\n16\r\n17<\/pre>\n<\/td>\n
\n
<script type=\"text\/javascript\" src=\"http:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1\/jquery.min.js\"><\/script>\r\n  <script type=\"text\/javascript\" charset=\"utf-8\">\r\n    $(window).load(function(){\r\n      $().hatchShow();\r\n    });\t\t\r\n    jQuery.fn.hatchShow = function(){\r\n      $('.hsjs').css('display','inner-block').css('white-space','pre').each(function(){\r\n        var t = $(this);\r\n        t.wrap(\"<span class='hatchshow_temp' style='display:block'>\");\r\n        var pw = t.parent().width();\r\n        while( t.width() < pw ){t.css('font-size', (t.fontSize()+1)+\"px\"),\r\n          function(){while( t.width() > pw ){t.css('font-size', (t.fontSize()-.1)+\"px\")}};\r\n        };\r\n      }).css('visibility','visible');\r\n    };\r\n    jQuery.fn.fontSize = function(){return parseInt($(this).css('font-size').replace('px',''));};\r\n   <\/script><\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
***<\/p>\n
JQISOTEXT<\/a><\/p>\n
\"Manage<\/a><\/p>\n
Con este plugin vamos a cambiar el tama\u00f1o de las letras en el texto. En la forma mostrada tratamos de conseguir algo similar a la proyecci\u00f3n isom\u00e9trica. Se puede hacerlo para un bloque de texto o para cada palabra en un texto.<\/p>\n
***<\/p>\n
Responsive Measure<\/a><\/p>\n
\n\n\n\n
\n
1\r\n2\r\n3\r\n4\r\n5\r\n6\r\n7\r\n8\r\n9\r\n10\r\n11\r\n12\r\n13<\/pre>\n<\/td>\n
\n
<script src=\"jquery.js\"><\/script>\r\n<script src=\"jquery<\/a>.rm.js\"><\/script>\r\n<script type=\"text\/javascript\">\r\n\r\n$('section').responsiveMeasure({\r\n    \/\/ Variables you can pass in:\r\n    idealLineLength: (defaults to 66),\r\n    minimumFontSize: (defaults to 16),\r\n    maximumFontSize: (defaults to 300),\r\n    ratio: (defaults to 4\/3)\r\n});\r\n\r\n  <\/script><\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
El plugin de jQuery que puede generar medidas responsivas ideales.<\/p>\n
***<\/p>\n
Style-my-tooltips jQuery Plugin<\/a><\/p>\n
Un plugin sencillo para mejorar el aspecto de informaci\u00f3n sobre herramientas del navegador web. El script de tama\u00f1o peque\u00f1o (4kb) funciona como informaci\u00f3n sobre herramientas de su navegador web con pocas opciones y\u00a0 estilo por medio de CSS.<\/p>\n
\"Manage<\/a><\/p>\n
***<\/p>\n
Textilate.js<\/a><\/p>\n
Textillate.js combina algunas bibliotecas impresionantes para facilitar el proceso de uso\u00a0 de plug-in para la aplicaci\u00f3n de las animaciones CSS3<\/a> a cualquier texto.<\/p>\n
\"Manage<\/a><\/p>\n
***<\/p>\n
Shuffle Letters Effect<\/a><\/p>\n
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.<\/p>\n
\"Manage<\/a><\/p>\n
***<\/p>\n
Varezhka Typography Plugin<\/a><\/p>\n
\n\n\n\n
\n
1\r\n2\r\n3\r\n4\r\n5\r\n6\r\n7\r\n8\r\n9\r\n10\r\n11\r\n12\r\n13\r\n14\r\n15\r\n16\r\n17\r\n18\r\n19\r\n20\r\n21\r\n22<\/pre>\n<\/td>\n
\n
#html_escape\r\n    str.gsub!(\/[&><]\/) { |special| { '&' => '&amp;', '>' => '&gt;', '<' => '&lt;' }[special] } if options[:escape_html]\r\n\r\n    #apostrophe\r\n    str.gsub!(\/(\\w)'(\\w)\/, '\\1’\\2')\r\n\r\n    #russian quotes\r\n    str.replace_quotes! '«', '»', '„', '“', '\u0430-\u044f\u0410-\u042f'\r\n\r\n    #english quotes\r\n    str.replace_quotes! '“', '”', '‘', '’', 'a-zA-Z'\r\n\r\n    #mdash\r\n    str.gsub!(\/--\/, '&mdash;')\r\n    str.gsub!(\/(\\w|;|,)\\s+(\u2014|\u2013|-)\\s*(&#|\\w)\/, '\\1&nbsp;&mdash; \\3')\r\n    str.gsub!(\/\\s+&mdash;\/, '&nbsp;&mdash;')\r\n\r\n    #nobr\r\n    #around dash-separated words (\u0447\u0442\u043e-\u0442\u043e)\r\n    str.gsub!(\/(^|\\s)((\\w|0-9){1,3})-((\\w|0-9){1,3})($|\\s)\/, '\\1<span>\\2-\\4<\/span>\\6')\r\n    #1980-x \u043f\u043e\u0447\u0435\u043c\u0443-\u0442\u043e\r\n    str.gsub!(\/(^|\\s)((\\w|0-9)+)-((\\w|0-9){1,3})($|\\s)\/, '\\1<span>\\2-\\4<\/span>\\6')<\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
Plugin simple para hacer el texto m\u00e1s legible mediante la aplicaci\u00f3n de algunas normas tipogr\u00e1ficas a string.<\/p>\n
***<\/p>\n
Cubitoo Typography Plugin<\/a><\/p>\n
\n\n\n\n
\n
1\r\n2\r\n3\r\n4\r\n5\r\n6\r\n7\r\n8\r\n9\r\n10\r\n11\r\n12\r\n13\r\n14\r\n15\r\n16\r\n17\r\n18\r\n19\r\n20\r\n21<\/pre>\n<\/td>\n
\n
(function($) {\r\n  $.fn.fixTypography = function(selected_replacements) {\r\n\r\n    \/\/ Replacements for bad web typography\r\n    var replacements = {\r\n      \/\/ Line rhythm\r\n      bastards:      { invalid: \/\\ ([a-z]{1})\\ \/mgi, valid: \" $1&nbsp;\" },\r\n      em_dashes:     { invalid: \/\\ - \\ \/mgi, valid: \"&nbsp;&mdash;&nbsp;\"},\r\n      en_dashes:     { invalid: \/([a-zA-Z ]{1})(-)([a-zA-Z ]{1})\/mgi, valid: \"$1&ndash;$3\"},\r\n      double_spaces: { invalid: \/[ ]{2,}\/mgi, valid: \" \" },\r\n\r\n      \/\/ Quoting\r\n      single_quotes: { invalid: \/\\'([a-zA-Z0-9 ]+)\\'\/mgi, valid: \"&lsquo;$1&rsquo;\" },\r\n      double_quotes: { invalid: \/\\\"([a-zA-Z0-9 ]+)\\\"\/mgi, valid: \"&ldquo;$1&rdquo;\" },\r\n      angle_quotes:  { invalid: \/<<([a-zA-Z0-9 ]+)>>\/mgi, valid: \"&laquo;$1&raquo;\" },\r\n      apostrophes:   { invalid: \/([a-zA-Z0-9]+)\\'([a-zA-Z ]+)\/mgi, valid: \"$1&rsquo;$2 \" },\r\n\r\n      \/\/ Replacing\r\n      copyright:     { invalid: \/\\(c\\)\/mgi, valid: \"&copy;\" },\r\n      ellipsis:      { invalid: \"...\", valid: \"&hellip;\" },\r\n    }<\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
\u00bfNo le gusta la tipograf\u00eda predeterminada en su sitio web? No es problema. La tipograf\u00eda Cubitoo\u00a0 es un conjunto de peque\u00f1as correcciones para solucionar problemas habituales de la tipograf\u00eda sin romper su sintaxis optimizado, por ejemplo:<\/p>\n