Resize font automat

Aici postaţi orice este legat de tehnologiile "client side". HTML, HTML5, XHTML, CSS, CSS3, XML, Standarde
Manual JS: http://www.phpromania.net/jsmanual/index.html

Moderatori: eyecon, Moderatori

IncDoDo
PHPRomania Supporter
Mesaje: 19
Membru din: Lun Mar 18, 2013 9:18 pm

Resize font automat

Mesajde IncDoDo » Joi Apr 23, 2015 3:23 pm

Salutare,

Am intampinat o problema la care nu reusesc sa ii gasesc solutie si va rog daca ma puteti ajuta.
Datele problemei sunt urmatoarele:

Am doua div-uri A si B.
divul A un width de 80%;
B este inclus in A si contine un text ce variaza in functie de pagina care este deschisa, astfel incat variaza si lungimea textului.
Problema apare atunci cand textul este prea lung, intrucat acesta intra pe doua randuri.
Doresc ca textul sa intre pe un singur rand si sa isi schimbe font-size-ul in functie de lungimea sa, astfel incat sa incapa.

Daca nu am fost destul de explicit, va stau la dispozitie pentru orice alta intrebare sau nelamurire.

MUltumesc si astept raspunsurile voastre!



MarPlo
Senior Member
Mesaje: 884
Membru din: Mie Sep 24, 2008 9:32 am
Localitate: Braila
Contact:

Re: Resize font automat

Mesajde MarPlo » Joi Apr 23, 2015 4:56 pm

Salut
Vezi daca iti e de folos plugin-ul FitText jQuery.

IncDoDo
PHPRomania Supporter
Mesaje: 19
Membru din: Lun Mar 18, 2013 9:18 pm

Re: Resize font automat

Mesajde IncDoDo » Joi Apr 23, 2015 5:32 pm

Multumesc pentru raspuns, insa nu imi rezolva problema cu trecerea pe al doi-lea rand cand textul este prea lung.
Textul este generat in mod dinamic, si nu cunosc lungimea acestuia(poate avea nr de caractere diferite in functie de pagina deschisa).
Mai exact, eu am nevoie de un script care sa imi detexteze cand textul este prea lung si intra pe doua randuri, si sa ii schimbe font-size-ul astfel incat sa incapa doar pe unul singur.

MarPlo
Senior Member
Mesaje: 884
Membru din: Mie Sep 24, 2008 9:32 am
Localitate: Braila
Contact:

Re: Resize font automat

Mesajde MarPlo » Joi Apr 23, 2015 11:03 pm

Cu formula asta se poate obtine lungimea unei linii de text dintr-un element html din pagina:

Cod: Selectaţi tot

Width = CPL * (font-size / font-constant)

- CPL = numar de caractere pe linie.
- font-constant = o constanta specifica fiecarui tip de font.

Folosind acea formula, cand se cunoaste lungimea se poate obtine marimea fontului (in pixeli) ca textul sa se incadreze intr-o singura linie:

Cod: Selectaţi tot

font-size = Width * font-constant / CPL

Exemplu seare font-size dinamc; pentru font Arial (Width 180px, CPL 1.92):

Cod: Selectaţi tot

<div id="dv1" style="border:1px solid #33f; width:180px; font-size:22px; font-family:Arial;">Some text, initial font-size: 22px</div>

<script>
var dv1 = document.getElementById('dv1');  // the #dv1 element
var fc = 1.92;  // constant for font Arial

// if more than 1 line in #dv1, set font-size (fs) so the text be on a single line
if(dv1.offsetHeight > (parseInt(window.getComputedStyle(dv1).fontSize) * 1.9)) {
  var fs = Math.ceil(dv1.offsetWidth * fc / dv1.innerHTML.length) + 1;
  dv1.style.fontSize = fs +'px';

//  alert(fs);  // just for test to check the new font-size
}
</script>

- Cateva constante pt. alte fonturi comune:

Cod: Selectaţi tot

- Serif Fonts:
American Typewriter — 2.14
Baskerville — 2.14
Georgia — 1.91
Times New Roman — 2.21

- Sans-serif Fonts:
Arial — 1.92
Calibri — 2.1
Helvetica Neue — 1.9
Lucida Grande — 1.91
Tahoma — 1.91
Trebuchet MS — 2.11
Verdana — 1.73

- Monospace Font:
Courier New — 1.64


Înapoi la “HTML/JavaScript/CSS”

Cine este conectat

Utilizatori ce ce navighează pe acest forum: Niciun utilizator înregistrat și 1 vizitator