Format de text

El format de text és el procés d'estructuració i decoració gràfica que fa que un text pur adequat per a la impressió de llibres , revistes o diaris , o per a la seva visualització en els mitjans digitals com ara paraula documents de processador, llocs web o llibres electrònics .

Descripció

El format sol consistir en diversos nivells. L’estructuració consisteix en la subdivisió del text en unitats lògiques, com ara capítols , paràgrafs , paràgrafs o llistes, amb vinyetes o numerats o notes a peu de pàgina . La decoració assigna un estil de presentació als elements del text, decidint per exemple la sagnia dels paràgrafs, la divisió en pàgines i les característiques dels caràcters: tipus , mides, negreta , cursiva , lletra inicial , superíndexs i subíndexs , etc. En el cas particular dels hipertextos, hi ha un tercer nivell de format, a més d'aquests dos primers: el dels enllaços que són referències a altres hipertextos.

A l’ era de la informació , al començament de la difusió d’ Internet , algunes convencions de format eren d’ús comú per a l’ús d’eines de comunicació com el correu electrònic , LISTSERV , Usenet , etc.: ^{[1] [2]}

• entre asteriscs per posar èmfasi: La nuova stampante si era *bloccata* un'altra volta.
• entre subratllats per subratllar: La nuova stampante si era _bloccata_ un'altra volta.
• entre subratllats per citar el títol d'un llibre: Per avere un'idea del Software Libero si può iniziare leggendo il libro _Codice_Libero_.
• en majúscules per als títols: CAPITOLO 1: PER VOLONTA' DI UNA STAMPANTE
• amb majúscules per cridar: La nuova stampante si era BLOCCATA un'altra volta.
• amb espais per ressaltar La nuova stampante si era bloccata un'altra volta. ^{[3] [4] [5]}

Hi ha moltes aplicacions disponibles avui per llegir, escriure i editar text formatat (vegeu Infra ).

Ús d’un llenguatge de marques

El mateix tema en detall: llenguatge de marques .

Si no és possible formatar el text amb eines de suport visual incloses en molts processadors de text que també ofereixen una previsualització de com apareixerà el text al suport (vídeo, material en paper), és possible utilitzar un llenguatge de marques (el el més conegut d'ells és l' HTML ^[6] ) que produeix els mateixos resultats encara que tingui l'inconvenient d'una complexitat d'escriptura generalment més alta. La pròpia Viquipèdia , quan edita pàgines amb l' editor de text , utilitza un llenguatge de marques molt simplificat interpretat pel programari MediaWiki .

Un ésser humà pot trobar un text formatat més o menys comprensible en funció de la complexitat del llenguatge de marques en què s’escrigui el text. Hi ha llenguatges de marcatge lleugers que us permeten escriure text formatat que és extremadament fàcil d’entendre perquè difereix poc del text pur . En altres casos (SGML, XHTML, DocBook, ...) la complexitat és tan elevada que una persona ha d’estudiar primer el propi llenguatge per poder entendre el significat del seu text formatat.

CSS

El mateix tema en detall: CSS .

CSS té diverses opcions per formatar tipus de lletra ^{[7] [8]} :

Definició de tipus de lletra

p {font-family: arial;}

Tipus de lletra segurs a la web

Només hi ha un nombre limitat de tipus de lletra disponibles a tots els sistemes: per tant, es poden utilitzar sense preocupacions. En anglès s'anomenen fonts segures per al web:

Tipus de lletra predefinits a CSS

Piles de tipus de lletra

Com que no podem garantir la disponibilitat dels tipus de lletra que voleu utilitzar a les pàgines web (fins i tot pot ser que un tipus de lletra web no funcioni per algun motiu), podeu definir "piles de tipus de lletra" perquè el vostre navegador tingui més tipus de lletra per triar. Això implica un valor de font-family que consisteix en diversos noms de caràcters separats per comes, per exemple:

 p { font-family: "Trebuchet MS", Verdana, sans-serif; }
p { font-family: "Trebuchet MS", Verdana, sans-serif; }

Si és així, el navegador comença a la part superior de la llista i comprova si aquest tipus de lletra està disponible a la màquina. Si és així, apliqueu aquest caràcter als elements seleccionats. En cas contrari, passa al personatge següent, etc.

Incorporar tipus de lletra no estàndard

 @ font-face { font-family : 'MyWebFont' ; src : format url ( 'myfont.woff2' ) ( 'woff2' ), format url ( 'myfont.woff' ) ( 'woff' ); }

Tipus de tipus de lletra

• WOFF / WOFF2

Significa: Web Open Font Format.

Creat per utilitzar-lo al web i desenvolupat per Mozilla juntament amb altres organitzacions, els tipus de lletra WOFF sovint es carreguen més ràpidament que altres formats perquè utilitzen una versió comprimida de l’estructura utilitzada pels tipus de lletra OpenType (OTF) i TrueType (TTF). Aquest format també pot incloure informació sobre llicències i metadades al fitxer de tipus de lletra.

WOFF2 és la propera generació de WOFF i compta amb una compressió millor que l’original.

• SVG / SVGZ

El mateix tema en detall: gràfics vectorials escalables .

Significa: gràfics vectorials escalables (tipus de lletra)

SVG és una recreació vectorial de la font, que la fa molt més lleugera en mida de fitxer i la fa ideal també per a ús mòbil.

SVGZ és la versió comprimida de SVG.

• EOT

Significa: Tipus obert incrustat.

Aquest format ha estat creat per Microsoft i és un fitxer estàndard propietari.

• OTF / TTF

Significa: Font OpenType i Font TrueType.

El format WOFF es va crear inicialment com a reacció a OTF i TTF, en part perquè aquests formats es podien copiar fàcilment (i il·legalment), però, OpenType té característiques que poden interessar-se a molts dissenyadors (lligadures i similars).

Mida de la font

La mida de la font (definida amb la font-size ) pot prendre valors mesurats en la majoria d’aquestes unitats (i d’altres, com ara percentatges), tot i que les unitats més habituals per a l’escala de text són:

• px (píxels): el nombre de píxels d'alçada que voleu que tingui el text.
• em és igual a la mida de la font definida a l'element pare de l'element actual que estem modelant (més concretament, l'amplada d'una lletra majúscula M continguda a l'element pare).
• rem : funciona exactament com em , excepte que 1 rem és igual a la mida de la font definida a l'element arrel del document (és a dir, <html> ), no a l'element pare.

Pes visual

CSS proporciona quatre propietats comunes per canviar el pes visual i l’èmfasi del text:

• font-style : s’utilitza per activar i desactivar el text en cursiva. Els valors possibles són els següents:
  • normal : estableix el text a tipus de lletra normal (desactiva la cursiva existent).
  • italic : definiu el text per utilitzar la versió en cursiva del tipus de lletra, si està disponible; si no està disponible, simularà la cursiva amb obliqua.
  • oblique : estableix el text per utilitzar una versió simulada d'un tipus de lletra cursiva, creada oblique la versió normal.
• font-weight : permet establir el nivell d’atreviment del text. Això té molts valors disponibles en cas que tingui moltes variacions de fonts disponibles (com lleuger, el -Normal, -Bold, -extrabold, -Nero, etc.).
  • normal , bold : gruix de lletra normal i negreta
  • lighter , bolder : estableix que la negreta de l'element actual sigui més clara o un pas més que la negreta de l'element pare.
  • 100 - 900 : valors numèrics en negreta que proporcionen un control granular més fi que les paraules clau anteriors si cal.
• text-transform : permet establir la transformació del personatge. Els valors inclouen:
  • none : impedeix qualsevol transformació.
  • uppercase : gireu TOT EL TEXT A MAJÚS.
  • lowercase : fes que tot el text sigui minúscula.
  • capitalize : transformeu totes les paraules de manera que la primera lletra sigui capitalize .
  • full-width : transforma tots els glifs que s'escriuen dins d'un quadrat d'amplada fixa, similar a un caràcter monoespacial, permetent l'alineació, per exemple, de caràcters llatins amb glifos d'idioma asiàtic (com ara el xinès, el japonès, el coreà).
• text-decoration : defineix / desselecciona les decoracions de text dels personatges.
• none : desactiveu les decoracions de text ja presents.
  • underline : subratlla el text.
  • overline : dóna una línia de text al text.
  • line-through directa : col·loqueu un ratllat al text .

Ombrejat de text

Ombra única:

text-shadow: 4px 4px 5px red;

Ombra múltiple:

text-shadow: 1px 1px 1px red,2px 2px 1px red;

Alineació de text

La text-align s'utilitza per controlar com s'alinea el text dins del quadre de contingut. Els valors disponibles són els següents (funcionen de la mateixa manera que qualsevol programa de processament de textos):

• left : justifica left text left .
• right : justifica el text de la dreta.
• center : center el text.
• justify : amplieu el text, variant els espais entre paraules de manera que totes les línies de text tinguin la mateixa amplada.

Alçada de la línia

La line-height alçada de línia defineix l'alçada de cada línia de text. Exemple:

line-height: 1.6;

Espai entre lletres i paraules

p::first-line {letter-spacing: 4px;word-spacing: 4px;}

Estils de caràcters

• font-variant : us permet canviar entre majúscules i alternatives normals.
• font-kerning : activa i desactiva les opcions de font-kerning .
• font-feature-settings : us permet activar i desactivar diverses funcions de tipus de lletra OpenType.
• font-variant-alternates : controla l'ús de glifos alternatius per a una font determinada.
• font-variant-caps : controla l’ús de glifos majúscules alternatius.
• font-variant-east-asian : controla l'ús de glifos alternatius per als scripts d'Àsia Oriental, com ara el japonès i el xinès.
• font-variant-ligatures : controla quines lligadures i formes contextuals s’utilitzen al text.
• font-variant-numeric : controla l’ús de glifos alternatius per a nombres, fraccions i indicadors ordinaris.
• font-variant-position : controla l’ús de glifos alternatius més petits posicionats com a superíndex o subíndex.
• font-size-adjust : us permet ajustar la mida de la font visual independentment de la mida de la font real.
• font-stretch : canvia entre les possibles versions esteses alternatives d'un caràcter determinat.
• text-underline-position : especifiqueu el conjunt de posicions de subratllat mitjançant el valor de la underline propietat text-decoration-line .
• text-rendering : intenteu fer una optimització de renderització de text.

Estils de disposició de text

• text-indent : especifiqueu la quantitat d’espai horitzontal que s’ha de deixar abans de l’inici de la primera línia del contingut del text.
• text-overflow : definiu com notificar als usuaris el contingut desbordat que no es mostra.
• white-space : defineix com es gestionen l'espai en blanc i els salts de línia associats dins de l'element.
• word-break : especifiqueu si voleu trencar línies dins de les paraules.
• direction : defineix la direcció del text (depèn de l'idioma i normalment és millor deixar que HTML manegi aquesta part ja que està relacionat amb el contingut del text).
• hyphens : activeu i desactiveu la separació per als idiomes compatibles.
• line-break : relaxa o reforça el salt de línia per a les llengües asiàtiques.
• text-align-last : defineix com text-align-last l’última línia d’un bloc o línia, just abans d’un salt de línia dura.
• text-orientation : us permet definir l'orientació del text en una línia.
• overflow-wrap : especifiqueu si el navegador pot trencar línies dins de les paraules per evitar el desbordament.
• writing-mode : defineix si les línies de text estan disposades horitzontalment o verticalment i la direcció en què flueixen les línies següents.

Emplenar i esbossar

Emplenar i esbossar

Com en els fitxers vectorials per imprimir ^[9] , els tipus de lletra web també tenen ompliment i traç ^[10] .

.module { stroke: black; }

Exemple. Tipus d’ictus:

• fill
• stroke-dasharray
• stroke-dashoffset
• stroke-linecap
• stroke-width

Ús en programari

Per escriure text formatat, podeu utilitzar editors de text pur , com ara Bloc de notes o gedit , i afegir informació d’estil mitjançant un llenguatge de marques concret, on hi ha un marcador ( etiqueta ) específic per a cada informació. Un programari de visualització, capaç de comprendre el llenguatge de marques, no mostrarà les etiquetes , sinó que mostrarà el text pur que el presentarà a l’estil que indiquen les etiquetes .

Aquest enfocament per ocultar la complexitat també és seguit pels editors WYSIWYG . Alguns d'ells, però, no li permeten guardar el text en un arxiu de text pur o en un format obert , però li permeten guardar el text (que s'assembla a text pur) només en un arxiu binari o codificades d'una altra manera en una propietat format . En aquest darrer cas, per tant, el text formatat no està disponible directament per a un ésser humà, sinó que es pot llegir i editar només a condició que tingueu aquest editor WYSIWYG concret.

Exemples de format creatiu

Els següents exemples de format creatiu ^[11] es poden obtenir amb diferents tècniques: gràfics amb programari com Illustrator, Gimp, Photoshop o Inkscape o amb codi HTML5 i CSS3 o amb programari 3D com Blender :

Nota

Bibliografia

• Ivana Tubaro, De les lletres. Manual de cal·ligrafia i tipografia: de la teoria al disseny , Milà, Hoepli, 2008, ISBN978-8820340339 .

Articles relacionats

• Fitxer de text
• Format obert
• Format propietari
• Llenguatge de marques
• Text pur
• WYSIWYG

Portal de publicacions

Portal informàtic