Formatarea textului

Formatarea textului este procesul de structurare și prezentare grafică , care face un text pur adecvat pentru imprimarea pe cărți , periodice sau ziare sau pentru vizualizarea pe suporturi digitale , cum ar fi cuvânt documente procesor, site - uri sau cărți electronice .

Descriere

Formatarea constă de obicei în mai multe niveluri. Structurarea constă în subdivizarea textului în unități logice, cum ar fi capitole , paragrafe , paragrafe sau liste, marcate sau numerotate sau note de subsol . Decorul atribuie un stil de prezentare a elementelor textului, de exemplu , de a decide indentarea paragrafelor, împărțirea în pagini și caracteristicile caracterelor: tipuri , dimensiuni, Bolds , cursive , de conducere, exponenți și subscriptul etc. În cazul particular al hipertextelor există un al treilea nivel de formatare, în plus față de primele două: cel al legăturilor care sunt referințe la alte hipertexte.

În era informațională , la începutul răspândirii Internetului , unele convenții de formatare erau folosite în mod obișnuit pentru utilizarea instrumentelor de comunicare precum e-mail , LISTSERV , Usenet etc.: ^{[1] [2]}

• între asteriscuri pentru accentuare: La nuova stampante si era *bloccata* un'altra volta.
• între subliniere pentru a sublinia: La nuova stampante si era _bloccata_ un'altra volta.
• între subliniere pentru a cita un titlu de carte: Per avere un'idea del Software Libero si può iniziare leggendo il libro _Codice_Libero_.
• cu majuscule pentru titluri: CAPITOLO 1: PER VOLONTA' DI UNA STAMPANTE
• cu majuscule pentru a țipa: La nuova stampante si era BLOCCATA un'altra volta.
• cu spații pentru evidențiat La nuova stampante si era bloccata un'altra volta. ^{[3] [4] [5]}

Numeroase aplicații sunt disponibile astăzi pentru citirea, scrierea și editarea textului formatat (consultați Infra ).

Folosirea unui limbaj de marcare

Același subiect în detaliu: limbaj de markup .

Dacă nu este posibil să formatați textul cu instrumente de suport vizual incluse în multe procesoare de text care oferă, de asemenea, o previzualizare a modului în care textul va apărea pe suportul țintă (video, material hârtie), este posibil să utilizați un limbaj de marcare ( cel mai cunoscut dintre acestea este HTML ^[6] ) care produce aceleași rezultate chiar dacă are dezavantajul unei complexități de scriere în general mai mari. Wikipedia însăși, când editează pagini folosind editorul de text , folosește un limbaj de markup foarte simplificat interpretat de software-ul MediaWiki .

Un om ar putea găsi un anumit text formatat mai mult sau mai puțin de înțeles în funcție de complexitatea limbajului de marcare în care este scris textul. Există limbaje de marcare ușoare care vă permit să scrieți text formatat, care este extrem de ușor de înțeles, deoarece diferă puțin de textul său pur . În alte cazuri (SGML, XHTML, DocBook, ...) complexitatea este atât de mare încât o persoană trebuie să studieze mai întâi limbajul în sine pentru a putea înțelege semnificația textului formatat al acestuia.

CSS

Același subiect în detaliu: CSS .

CSS are mai multe opțiuni pentru formatarea fonturilor ^{[7] [8]} :

Definirea fontului

p {font-family: arial;}

Fonturi sigure pentru web

Există doar un număr limitat de fonturi disponibile pe toate sistemele: de aceea pot fi utilizate fără griji mari. În limba engleză se numesc fonturi sigure pentru web:

Fonturi predefinite în CSS

Stive de fonturi

Deoarece nu putem garanta disponibilitatea fonturilor pe care doriți să le utilizați pe paginile web (chiar și un font web poate să nu funcționeze din anumite motive), puteți defini „stive de fonturi”, astfel încât browserul dvs. să aibă mai multe fonturi din care să aleagă. Aceasta implică o valoare a font-family constând din mai multe nume de caractere separate prin virgulă, de exemplu:

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

Dacă da, browserul pornește în partea de sus a listei și verifică dacă fontul respectiv este disponibil pe aparat. Dacă da, aplicați acel caracter elementelor selectate. În caz contrar, trece la următorul personaj și așa mai departe.

Incorporează fonturi non-standard

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

Tipuri de fonturi

• WOFF / WOFF2

Acesta înseamnă: Web Open Font Format.

Creat pentru utilizare pe web și dezvoltat de Mozilla împreună cu alte organizații, fonturile WOFF se încarcă adesea mai repede decât alte formate, deoarece utilizează o versiune comprimată a structurii utilizate de fonturile OpenType (OTF) și TrueType (TTF). Acest format poate include metadate și informații despre licență în fișierul de fonturi.

WOFF2 este următoarea generație de WOFF și are o compresie mai bună decât originalul.

• SVG / SVGZ

Același subiect în detaliu: Grafică vectorială scalabilă .

Stabilește pentru: Grafică vectorială scalabilă (font)

SVG este o recreere vectorială a fontului, făcându-l mult mai ușor în dimensiunea fișierului și făcându-l ideal și pentru utilizarea pe mobil.

SVGZ este versiunea zip a SVG.

• EOT

Înseamnă: tip deschis deschis.

Acest format a fost creat de Microsoft și este un standard de fișier proprietar.

• OTF / TTF

Reprezintă: Font OpenType și Font TrueType.

Formatul WOFF a fost inițial creat ca o reacție la OTF și TTF, în parte deoarece aceste formate ar putea fi copiate cu ușurință (și ilegal), cu toate acestea, OpenType are caracteristici de care mulți designeri ar putea fi interesați (ligaturi și altele asemenea).

Marimea fontului

Dimensiunea fontului (setată cu proprietatea font-size ) poate lua valori măsurate în majoritatea acestor unități (și altele, cum ar fi procentele), cu toate acestea, cele mai comune unități pentru scalarea textului sunt:

• px (pixeli): numărul de pixeli în înălțime pe care doriți să fie textul.
• em este egală cu dimensiunea fontului setată pe elementul părinte al elementului curent pe care îl modelăm (mai exact, lățimea unei litere majuscule M conținută în elementul părinte.)
• rem : funcționează exact ca em , cu excepția faptului că 1 rem este egal cu dimensiunea fontului setată pe elementul rădăcină al documentului (adică <html> ), nu pe elementul părinte.

Greutatea vizuală

CSS oferă patru proprietăți comune pentru schimbarea greutății vizuale și a accentului textului:

• font-style : folosit pentru a activa și dezactiva textul cursiv. Valorile posibile sunt după cum urmează:
  • normal : setați textul la font normal (dezactivați cursivele existente).
  • italic : setați textul pentru a utiliza versiunea italic a fontului, dacă este disponibil; dacă nu este disponibil, va simula cursiv cu oblic în schimb.
  • oblique : Setează textul pentru a utiliza o versiune simulată a unui font italic, creat prin oblique versiunii normale.
• font-weight : Vă permite să setați nivelul de îndrăzneală al textului. Acest lucru are multe valori disponibile în cazul în care aveți mai multe variante de font disponibile (cum ar fi -lumina, -Normal, -bold, -extrabold, -nero, etc).
  • normal , bold : grosimea fontului normal și bold
  • lighter , bolder : setează boldul elementului curent să fie mai ușor sau cu un pas mai greu decât boldul elementului părinte.
  • 100 - 900 : valori numerice îndrăznețe care oferă un control granular mai fin decât cuvintele cheie de mai sus, dacă este necesar.
• text-transform : Vă permite să setați transformarea personajului. Valorile includ:
  • none : Previne orice transformare.
  • uppercase : Transformați TOATE TEXTULUI ÎN MAJUSCU.
  • lowercase : faceți ca toate textele să fie minuscule.
  • capitalize : transformați toate cuvintele astfel încât prima literă să fie cu capitalize .
  • full-width : transformă toate glifele pentru a fi scrise într-un pătrat cu lățime fixă, similar cu un caracter monospațial, permițând alinierea, de exemplu, a caracterelor latine cu glifele în limba asiatică (cum ar fi chineza, japoneza, coreeana).
• text-decoration : setați / deselectați decorațiuni text pe caractere.
• none : dezactivați orice decorațiuni text deja prezente.
  • underline : subliniați textul.
  • overline : oferă textului o linie de început.
  • line-through : puneți o linie pe text .

Umbrirea textului

Single Shadow:

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

Umbra multiplă:

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

Aliniere text

Proprietatea text-align este utilizată pentru a controla modul în care textul este aliniat în caseta de conținut. Valorile disponibile sunt după cum urmează (funcționează în același mod ca orice program de procesare de text):

• left : justifică textul din left .
• right : justifică textul din dreapta.
• center : centrează textul.
• justify : măriți textul, variind spațiile dintre cuvinte, astfel încât toate liniile de text să aibă aceeași lățime.

Inaltimea liniei

Proprietatea line-height setează înălțimea fiecărei linii de text. Exemplu:

line-height: 1.6;

Spațiere între litere și cuvinte

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

Stiluri de caractere

• font-variant : Vă permite să comutați între alternativele majuscule și cele normale.
• font-kerning : activează și dezactivează opțiunile de font-kerning .
• font-feature-settings : Vă permite să activați și să dezactivați diverse caracteristici de font OpenType.
• font-variant-alternates : controlează utilizarea glifelor alternative pentru un anumit font.
• font-variant-caps : controlează utilizarea glifelor majuscule alternative.
• font-variant-east-asian : controlează utilizarea glifelor alternative pentru scripturile din Asia de Est, cum ar fi japoneza și chineza.
• font-variant-ligatures : controlează ce ligaturi și forme contextuale sunt utilizate în text.
• font-variant-numeric : controlează utilizarea glifelor alternative pentru numere, fracții și indicatori ordinali.
• font-variant-position : controlează utilizarea glifelor alternative mai mici poziționate ca superindice sau subscript.
• font-size-adjust : Vă permite să ajustați dimensiunea fontului vizual, indiferent de dimensiunea reală a fontului.
• font-stretch : Comută între posibile versiuni extinse alternative ale unui caracter dat.
• text-underline-position : Specificați setul de poziție subliniat utilizând valoarea underline proprietății text-decoration-line .
• text-rendering : Încercați să faceți o optimizare a redării textului.

Stiluri de aspect text

• text-indent : specificați cât spațiu orizontal trebuie lăsat înainte de începerea primei linii a conținutului textului.
• text-overflow : Definiți cum să anunțați utilizatorii despre conținut debordat care nu este afișat.
• white-space : definește modul în care sunt tratate white-space alb și întreruperile de linie asociate din element.
• word-break : specificați dacă trebuie să rupeți liniile din cuvinte.
• direction : definiți direcția textului (depinde de limbă și de obicei este mai bine să lăsați HTML să gestioneze acea parte, deoarece este legat de conținutul textului.)
• hyphens : activați și dezactivați cratima pentru limbile acceptate.
• line-break : relaxează sau întărește pauza de linie pentru limbile asiatice.
• text-align-last : definește modul în care ultima linie a unui bloc sau linie este aliniată, chiar înainte de o întrerupere a liniei dure.
• text-orientation : vă permite să definiți orientarea textului într-o linie.
• overflow-wrap : specificați dacă browserul poate rupe sau nu liniile din cuvinte pentru a evita depășirea.
• writing-mode : definește dacă liniile de text sunt aranjate orizontal sau vertical și direcția în care curg următoarele linii.

Completați și conturați

Completați și conturați

Ca și în fișierele vectoriale pentru imprimare ^[9] , fonturile web au și umplere și linie ^[10] .

.module { stroke: black; }

Exemplu. Tipuri de accident vascular cerebral:

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

Utilizare în software

Pentru a scrie text formatat, puteți utiliza editori de text pur , precum Notepad sau gedit , și puteți adăuga informații despre stil folosind un anumit limbaj de marcare, unde pentru fiecare informație există un marker ( etichetă ) specific. Un software de vizualizare, capabil să înțeleagă limbajul de marcare, nu va afișa etichetele , ci va afișa textul pur prezentându-l în stilul indicat de etichete .

Această abordare pentru a ascunde complexitatea este urmată și de editorii WYSIWYG . Unele dintre ele, totuși, nu vă permit să salvați textul într-un fișier text pur sau într-un format deschis , ci vă permit să salvați textul (care arată ca text pur) numai într-un fișier binar sau altfel codificat într-un fișier proprietar format . În acest din urmă caz, prin urmare, textul formatat nu este disponibil direct pentru o ființă umană, ci este lizibil și editabil numai cu condiția să aveți acel editor WYSIWYG.

Exemple de formatare creativă

Următoarele exemple de formatare creativă ^[11] pot fi obținute cu diferite tehnici: grafică cu software precum Illustrator, Gimp, Photoshop sau Inkscape sau cu cod HTML5 și CSS3 sau cu software 3D precum Blender :

Notă

Bibliografie

• Ivana Tubaro, Dintre litere. Manual de caligrafie și tipografie: de la teorie la proiectare , Milano, Hoepli, 2008, ISBN 978-8820340339 .

Elemente conexe

• Fisier text
• Formatul deschis
• Format proprietar
• Limbaj de marcare
• Text pur
• WYSIWYG

Portal de publicare

Portal IT