3 Texto

Textos
Dentro de los textos, CSS3 ha incoporado nuevas e interesantes herramientas entre la que se destacan el poder utilizar fuentes externas, realizar una diagramacin con multicolumnas y el recorte de palabras. Aqu las nuevas especificaciones:

Recorte de palabras Multi-Columna Fuentes @font-face
Recorte de palabras
Un problema muy comn que suele suceder, es cuando tenemos un div o caja con texto, y una palabra suele ser mas larga que el ancho de la caja misma. Por lo general, cuando esto sucede, pueden pasar 2 cosas: Que el div se deforme (agrande) para contener la palabra larga, o que la palabra se muestra por fuera de los bordes de la caja. Para evitar esto, CSS3 hay incorporado una nueva propiedad llamada wordwrap que lo que hace , es recortar las palabras largas cuando estas superen el ancho del div que la contiene. El atributo word-wrap tiene dos posibles valores: normal o break-word.
? word-wrap: normal; word-wrap: break-word; Por defecto viene en
normal. Esto hace que las palabras largas no se corten. En el siguiente ejemplo, veremos un div de 300px de ancho con borde rojo, donde he colocado un texto que contiene una palabra mas larga que 300 px. Si la propiedad word-wrap: normal; estuviera en normal o no estuviera especificada, el resultado seria el siguiente:
Como vemos, la palabra larga excede el ancho del div contenedor.
Pero si aplicamos la el valor word-wrap: break-word; esta palabra larga se cortara de la siguiente forma:
Aqu el codigo completo del ejemplo:
? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Recorte de palabras</title> <style type="text/css"> #caja { width: 300px; word-wrap: break-word; border: medium dotted #F00; } </style> </head> <body> <div id="caja">Esta es una prueba del recorte de palabras. sdfsdfdsfdsfdsfsdfdsfsdfdsfdsfdsfdsdfsdfdsfsdfdsfdsfsdfsdfsdf Esta es una prueba del recorte de palabras. Esta es una prueba del recorte de palabras. Esta es una prueba del recorte de palabras. Esta es una prueba del recorte de palabras. Esta es una prueba del recorte de palabras. </div> </body> </html>
NOTA: esta funcionalidad es compatible con IE.
Multi-Columna
Una de las incorporaciones mas novedosas de CSS3 es la posibilidad de generar texto multicolumna, sin tener que crear una estructura especial para ello. Esta funcin es muy til para poner textos extensos y que se visualicen tipo peridico. Para crear una estructura multi-columna utilizaremos varios atributos, que servirn para crear y modelar las columnas:
colum-width: servir para definir la anchura de las distintas columnas a crear. column-gap: nos permitir definir el espacio en blanco entre columnas. column-rule: servir para crear un filete o lnea divisoria entre las columnas. Recordemos que para que sean compatible entre navegadores, podemos utilizar los prefijos, -moz- en el caso deFirefox y -webkit- para el navegador Safari o Chrome. En el siguiente ejemplo he creado 2 modelos de 5 columnas. La diferencia es que en el primero he definido los anchos de columnas en 200px, y no la cantidad de las mismas. En el segundo caso, no he definido el ancho pero si la cantidad de columnas, en este caso 5. Aqu el navegador dividir el ancho de la pantalla, y colocar la cantidad de columnas que le indiquemos. Para esto gener 2 DIVs identicos con texto extenso y dos clases de CSS que la cual aplique una a cada DIV. La primera clase llamada multicolumna defin un ancho de columna de 300px, una separacin entre columnas de 15px, y un filete separador de 1 px de ancho, solido y de color gris.
? .multicolumna{ -moz-column-width: 300px; -moz-column-gap: 15px; -webkit-column-width: 300px; -webkit-column-gap: 15px; -webkit-column-rule: 1px solid #ccf; -moz-column-rule: 1px solid #ccf; }
En la segunda clase multicolumna5columnas defin lo mismo, pero en lugar de indicarle el ancho de la columna, solo le especifiqu la cantidad de columnas que deseaba (4):
? .multicolumna5columnas{ -moz-column-count: 4; -moz-column-gap: 15px; -moz-column-rule: 1px solid #ccf; -webkit-column-count: 4; -webkit-column-gap: 15px; -webkit-column-rule: 1px solid #ccf; } * Ntese que utilice los prefijos de los diferentes navegadores,
para asegurar la
compatibilidad.
Especificar el nmero de columnas es quizs ms cmodo, pero en pginas fluidas puede funcionar peor, porque no se sepa con certeza qu anchura va a
tener el lugar donde se muestran los textos y por tanto unas veces queden columnas muy anchas y otras muy estrechas.
? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Texto Multi-columna CSS 3</title> <style type="text/css"> .multicolumna{ -moz-column-width: 300px; -moz-column-gap: 15px; -webkit-column-width: 300px; -webkit-column-gap: 15px; -webkit-column-rule: 1px solid #ccf; -moz-column-rule: 1px solid #ccf; } .multicolumna5columnas{ -moz-column-count: 4; -moz-column-gap: 15px; -moz-column-rule: 1px solid #ccf; -webkit-column-count: 4; -webkit-column-gap: 15px; -webkit-column-rule: 1px solid #ccf; } </style> </head> <body> <h2>Mulicolumna definiendo el tamaño de columna</h2> <div> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris posuere, quam nec pulvinar dignissim, tortor risus mattis nibh, vitae accumsan justo metus nec nisi. Vivamus nec enim ultrices leo placerat sodales in id metus. Ut fermentum nunc quis tortor bibendum lacinia. Sed bibendum sodales aliquet. Fusce a pretium magna. Donec lobortis purus ac nulla blandit fermentum. Nullam vitae magna ipsum. Sed ultricies dictum felis, sed vulputate lacus feugiat nec. Vivamus molestie erat id dui condimentum commodo. Duis congue lacus id eros hendrerit tempor. Nunc sagittis commodo consectetur. Quisque scelerisque facilisis dui, luctus ullamcorper diam faucibus sagittis. Quisque blandit sagittis nisi, nec volutpat tellus pretium eget. Phasellus porta dui quis mauris laoreet quis molestie ante tincidunt. Quisque convallis scelerisque lobortis. Proin eu lacus tortor, in venenatis turpis. Morbi diam quam, dignissim non laoreet eu, dapibus vitae est. Suspendisse condimentum, sem non gravida convallis, dui justo tincidunt urna, sed tincidunt lectus odio non purus. Aenean a commodo sapien.</p> <p>Suspendisse ut nulla sed sem faucibus ultrices. Etiam suscipit nisl non arcu lacinia vestibulum. Pellentesque commodo nisi posuere ipsum suscipit in scelerisque urna porta. Morbi faucibus dignissim augue ut euismod. Proin ut risus nunc. Donec purus enim, aliquam sit amet euismod facilisis, posuere eget quam. Fusce at elit sapien, in egestas lacus. In in leo eros, vel posuere mauris. Morbi ullamcorper convallis sapien, at suscipit mauris adipiscing molestie. Morbi magna urna, porttitor vitae iaculis ut, tincidunt at massa. Nunc purus urna,
El codigo XHTML + CSS final seria el siguiente:
blandit dapibus gravida quis, molestie eget eros. Curabitur varius, ligula nec fermentum adipiscing, dolor nisl rhoncus neque, eget accumsan mauris enim non purus. Vivamus lectus mi, ultrices vel mollis ac, posuere quis nisl. Nulla dictum ante vitae felis eleifend lobortis. Nunc elementum gravida viverra. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p> <p>Proin tortor dolor, tincidunt et facilisis sed, aliquet sit amet elit. Aenean lectus magna, euismod at vulputate at, sodales eu eros. Pellentesque volutpat convallis arcu, eget dapibus nibh pharetra in. Aliquam sapien libero, convallis quis facilisis eu, ullamcorper id nisl. Nunc congue ante non enim egestas non volutpat ligula dignissim. Vestibulum eleifend tempus purus, at vehicula lorem rutrum nec. Aenean volutpat magna et purus rutrum posuere. Etiam lobortis nisi vitae leo aliquet vestibulum. Vestibulum pharetra malesuada felis id blandit. Morbi sit amet facilisis augue. Etiam sapien elit, vehicula eu ornare in, interdum eget augue.</p> <p>Pellentesque et mi libero, et volutpat ligula. Sed bibendum velit vitae sapien posuere nec tempor nisl cursus. Donec orci leo, varius vel aliquet at, sodales sed risus. Phasellus sapien elit, pretium vel laoreet vel, tempus sit amet erat. Nulla metus tortor, ornare ut accumsan at, faucibus id sapien. Donec ultrices dolor at sapien venenatis non rutrum neque dictum. Quisque faucibus arcu non nisl sodales sagittis vitae vel dolor. Nam pretium consectetur convallis. Duis diam lectus, ultricies nec placerat placerat, posuere ac arcu. Aenean libero nisi, accumsan non dapibus vel, aliquam vel mi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p> </div> <h2>Mulicolumna definiendo la cantidad de columnas (4)</h2> <div> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris posuere, quam nec pulvinar dignissim, tortor risus mattis nibh, vitae accumsan justo metus nec nisi. Vivamus nec enim ultrices leo placerat sodales in id metus. Ut fermentum nunc quis tortor bibendum lacinia. Sed bibendum sodales aliquet. Fusce a pretium magna. Donec lobortis purus ac nulla blandit fermentum. Nullam vitae magna ipsum. Sed ultricies dictum felis, sed vulputate lacus feugiat nec. Vivamus molestie erat id dui condimentum commodo. Duis congue lacus id eros hendrerit tempor. Nunc sagittis commodo consectetur. Quisque scelerisque facilisis dui, luctus ullamcorper diam faucibus sagittis. Quisque blandit sagittis nisi, nec volutpat tellus pretium eget. Phasellus porta dui quis mauris laoreet quis molestie ante tincidunt. Quisque convallis scelerisque lobortis. Proin eu lacus tortor, in venenatis turpis. Morbi diam quam, dignissim non laoreet eu, dapibus vitae est. Suspendisse condimentum, sem non gravida convallis, dui justo tincidunt urna, sed tincidunt lectus odio non purus. Aenean a commodo sapien.</p> <p>Suspendisse ut nulla sed sem faucibus ultrices. Etiam suscipit nisl non arcu lacinia vestibulum. Pellentesque commodo nisi posuere ipsum suscipit in scelerisque urna porta. Morbi faucibus dignissim augue ut euismod. Proin ut risus nunc. Donec purus enim, aliquam sit amet euismod facilisis, posuere eget quam. Fusce at elit sapien, in egestas lacus. In in leo eros, vel posuere mauris. Morbi ullamcorper convallis sapien, at suscipit mauris adipiscing molestie. Morbi magna urna, porttitor vitae iaculis ut, tincidunt at massa. Nunc purus urna, blandit dapibus gravida quis, molestie eget eros. Curabitur varius, ligula nec fermentum adipiscing, dolor nisl rhoncus neque, eget accumsan mauris enim non purus. Vivamus lectus mi, ultrices vel mollis ac, posuere quis nisl. Nulla dictum ante vitae felis eleifend lobortis. Nunc elementum gravida viverra. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p>
<p>Proin tortor dolor, tincidunt et facilisis sed, aliquet sit amet elit. Aenean lectus magna, euismod at vulputate at, sodales eu eros. Pellentesque volutpat convallis arcu, eget dapibus nibh pharetra in. Aliquam sapien libero, convallis quis facilisis eu, ullamcorper id nisl. Nunc congue ante non enim egestas non volutpat ligula dignissim. Vestibulum eleifend tempus purus, at vehicula lorem rutrum nec. Aenean volutpat magna et purus rutrum posuere. Etiam lobortis nisi vitae leo aliquet vestibulum. Vestibulum pharetra malesuada felis id blandit. Morbi sit amet facilisis augue. Etiam sapien elit, vehicula eu ornare in, interdum eget augue.</p> <p>Pellentesque et mi libero, et volutpat ligula. Sed bibendum velit vitae sapien posuere nec tempor nisl cursus. Donec orci leo, varius vel aliquet at, sodales sed risus. Phasellus sapien elit, pretium vel laoreet vel, tempus sit amet erat. Nulla metus tortor, ornare ut accumsan at, faucibus id sapien. Donec ultrices dolor at sapien venenatis non rutrum neque dictum. Quisque faucibus arcu non nisl sodales sagittis vitae vel dolor. Nam pretium consectetur convallis. Duis diam lectus, ultricies nec placerat placerat, posuere ac arcu. Aenean libero nisi, accumsan non dapibus vel, aliquam vel mi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p> <p>Vivamus eleifend tempor est nec eleifend. Cras vestibulum congue faucibus. Fusce eleifend adipiscing posuere. Integer tempus tempor congue. Cras non orci sed ligula egestas mollis. Nullam eleifend malesuada nisi a tempus. Pellentesque sit amet risus augue. Integer nec nisi in ipsum lacinia auctor. Morbi eget ante felis, eget dignissim est. In gravida hendrerit enim, a euismod nisl faucibus non. Etiam vulputate mattis enim ac interdum. Ut sit amet diam a magna elementum lobortis ac nec neque. Nullam mauris dolor, hendrerit et dictum pellentesque, tincidunt auctor arcu. Ut vitae vestibulum dui. Aliquam erat volutpat.</p> <p>Donec sodales commodo purus, nec viverra turpis mollis ac. Etiam tristique tempus nisi, vel lacinia quam aliquet sed. Mauris vitae diam nibh. Donec lectus leo, fringilla vel fringilla eu, semper vehicula nulla. Vivamus vel quam sit amet metus cursus placerat sed eget magna. Praesent tellus enim, egestas in congue vitae, tincidunt et massa. Suspendisse id tortor lorem, sit amet lobortis purus. Ut sed hendrerit tellus. Aliquam erat volutpat. Morbi sit amet pretium massa. Sed egestas lacus eget lacus pulvinar sed tincidunt lectus tempor. Nam a augue ante. Suspendisse potenti. Morbi egestas, nisl sit amet elementum lacinia, nibh leo pretium nisl, eu dictum nisi felis ut ante. Donec laoreet est at lorem luctus suscipit. Quisque scelerisque, eros venenatis fermentum interdum, felis felis congue ante, at suscipit metus ligula quis massa. Duis eros urna, tristique in tincidunt fermentum, fermentum in nunc.</p> <p>Vestibulum vel ligula magna, vel tempus leo. Suspendisse potenti. Aenean ut consequat nisi. Quisque imperdiet turpis ut lacus mattis vel viverra eros ultricies. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus felis diam, fermentum nec consectetur eu, pretium viverra ipsum. Aliquam hendrerit vehicula porta. Sed tincidunt faucibus risus, commodo interdum nibh iaculis eu. Nullam iaculis sem vel odio aliquam vestibulum. Sed quis rutrum odio.</p> <p>Phasellus et vulputate metus. Donec eu diam augue. In porttitor felis in urna accumsan eleifend. In luctus tortor sed mauris scelerisque egestas. Vestibulum a mauris non urna egestas pharetra quis sit amet sapien. Pellentesque ultrices elementum libero sit amet rhoncus. Nullam posuere bibendum quam quis tempus. Fusce nunc turpis, rhoncus non placerat ut, elementum vel dui. Suspendisse potenti. Maecenas eu arcu mi, et fringilla ipsum. Morbi ultricies, diam vel luctus tristique, nisl dolor gravida odio, vitae ultricies dui enim
nec augue. Quisque sem lorem, sagittis sit amet luctus ut, lobortis non ligula. </p> </div> </body> </html> Aqu el ejemplo final:
Fuentes @font-face
Normalmente, la seleccin de la tipografas o fuentes a utilizar en una pgina web, se restringa a las fuentes estndar de sistema como Arial, Verdana, Times, Courrier, Tahoma, Trebuchet. Esto era porque estas fuentes estn en prcticamente en todos las computadoras de hoy en dia. Si nosotros, por medio de CSS le especificbamos una fuente diferente a las estndar, y el usuario que visualizaba la pagina, no tena la fuente instalada, el navegador la reemplazaba por alguna de las fuentes antes mencionadas. Gracias a una nueva caracterstica de CSS3, ahora podemos incluir cualquier fuente, ampliando generosamente las posibilidades de diseo de nuestro layout web. Esta solucin lleg de la mano de la regla @font-face y lo que nos permite sencillamente es definir otra fuente que queramos usar, con la nica condicin de que la misma est instalada en el servidor que alojar el sitio, o mejor dicho, que est dentro de los archivos del sitio mismo. Antiguamente admita solo formatos de fuentes tipo .eot, pero con el paso del tiempo se ampliaron la posibilidades se soporte, comenzando con Safari 3,1. En la actualidad admite otros tipos de formatos tipogrficos como son .ttf y .otf y funciona tambin con los navegadores Opera, Chrome y Firefox. Lo que hace bsicamente ela regla @font-face es definir nuevas familias tipogrficas dentro de nuestra hoja de estilos CSS. La sintaxis CSS es muy simple, aqu un ejemplo:
?
@font-face { font-family: 'Alkidenz';
font-style: normal; font-weight: normal; src: url('AkzidenzGrotesk-Cond.otf'); } H1{ font-family: 'Alkidenz'; }
Primero creamos una nueva familia llamada Alkidenz dentro de la propiedad Fontfamily. Luego le damos estilo y peso normales (font-style, font-weight) Y por ultimo con la propiedad src: url(); definimos el nombre del archivo de nuestra fuente, el cual en este caso est en la misma carpeta que el archivo HTML y CSS. Luego definimos que la etiqueta H1, usar la familia de fuente que acabamos de crear Alkidenz. Para que @font-face funcione en Internet Explorer debemos utilizar fuentes del tipo .eot. Entonces debemos hacer uso de los condicionales del tipo IF, que ejecutan un cdigo especfico si detecta que estamos usando IE. En ese caso, le indicaremos que use una fuente del tipo .eot. NOTA: Para convertir fuentes .ttf a .eot, por ejemplo, podemos usar Font Squirrel Generator. En este caso nuestro cdigo CSS quedara asi:
?
<style type="text/css"> h1{ font-family: 'Alkidenz'; } /* TODOS LOS NAVEGADORES MODERNOS*/ @font-face { font-family: 'Alkidenz'; font-style: normal; font-weight: normal; src: url('AkzidenzGrotesk-Cond.otf'); } </style> 
Aqu los ejemplos:

3 Texto

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

3 Texto

Uploaded by

Copyright:

Available Formats

Textos

Recorte de palabras Multi-Columna Fuentes @font-face

? word-wrap: normal; word-wrap: break-word; Por defecto viene en

Como vemos, la palabra larga excede el ancho del div contenedor.

Aqu el codigo completo del ejemplo:

NOTA: esta funcionalidad es compatible con IE.

El codigo XHTML + CSS final seria el siguiente:

font-style: normal; font-weight: normal; src: url('AkzidenzGrotesk-Cond.otf'); } H1{ font-family: 'Alkidenz'; }

Aqu los ejemplos:

You might also like