Tag Archives: html

Convertir caracteres especiales a entidades de HTML en PHP

Posted on by
Reply

El lenguaje HTML, dependiendo la codificación que usemos, no permite usar caracteres látinos como los que se muestran en esta tabla.

Carácter Entidad HTML Carácter Entidad HTML
á á Á Á
é é É É
í í Í Í
ó ó Ó Ó
ú ú Ú Ú
ü ü Ü Ü
ñ ñ Ñ Ñ
¡ ¡ ¿ ¿

En ocasiones no podemos asegurar que codificación se va a usar donde esté contenido el texto como en algunos CMS o al maquetar emails, por lo que se decide convertir estos caracteres a las entidades especiales que les corresponde.

Para hacerlo de forma automática en PHP usaremos la función htmlentities, esta función convierte a entidades especiales HTML los caracteres latinos. Si lo que queremos es crear un formulario para copiar este texto transformado sin mirar el código fuente podemos hacer una doble llamada a la función:

Ver código sin formato
PHP:
  1. $text = 'El veloz murciélago hindú comía feliz cardillo y kiwi';
  2. $result = htmlentities(htmlentities($text));
  3.  
  4. // $result = 'El veloz murciélago hindú comía feliz cardillo y kiwi';

Media types en CSS

Posted on by
2

Algo interesante para utilizar con los CSS es determinar los media types, algo que no se suele usar normalmente. Los media types determinan el medio (en pantalla, impreso, braille, auditivo, tv, etc [si, todos esos medios, y más, se pueden definir con los media types :) ]) en donde se utilizarán las entidades de CSS, por ejemplo: quiero que el texto en pantalla aparezca rojo, pero al imprimir le quiero negro o quiero cambiar el tamaño del texto.

Por defecto cuando incluimos un archivo CSS a nuestro HTML si no especificamos que media type debe utilizar se utilizará el mismo archivo para todos los medios. Pero nosotros podemos definirle que media va a utilizar qué entidades de CSS:

Ver código sin formato
CSS:
  1. @media print {
  2. /* cuando imprimamos este documento el tamaño de la fuente será de 10pt */
  3. body{ font-size: 10pt }
  4. }
  5. @media screen {
  6. /* cuando visualicemos este documento en pantalla el tamaño de la fuente
  7. será de 12pt */
  8. body{ font-size: 12pt }
  9. }
  10. @media screen, print {
  11. /* pero en ambos emdios el interlineado será de 1.2 */
  12. body{ line-height: 1.2 }
  13. }

Todo el código que pongamos dentro de las llaves se utilizará en el medio que determina @media, es decir cuándo decimos: @media screen, todas las propiedades que determinemos dentro de las llaves se utilizarán en pantalla.

Para lo que he utilizado los media types ha sido para dar otro estilo a la página impresa de la página web, la que veremos por pantalla. Puedes cambiar tamaños, dejar de mostrar elementos, etc. Una de las clases que creo son estas:

Ver código sin formato
CSS:
  1. @media print {
  2. /* al imprimir el documento los elementos con esta clase
  3. no podrán verse y a menos que digamos lo contrario si se verán en pantalla */
  4. .SiPantallaNoImprime{display:none}
  5. }
  6. @media screen {
  7. /* los elementos con esta clase NO podrán verse y, a menos que digamos
  8. lo contrario, si se verán al imprimir */
  9. .NoPantallaSiImprime{display:none}
  10. }

Puedes encontrar información más precisa en la web de la W3C.