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!
Resize font automat
Moderatori: eyecon, Moderatori
Re: Resize font automat
Salut
Vezi daca iti e de folos plugin-ul FitText jQuery.
Vezi daca iti e de folos plugin-ul FitText jQuery.
Re: Resize font automat
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.
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.
Re: Resize font automat
Cu formula asta se poate obtine lungimea unei linii de text dintr-un element html din pagina:
- 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:
Exemplu seare font-size dinamc; pentru font Arial (Width 180px, CPL 1.92):
- Cateva constante pt. alte fonturi comune:
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 52 vizitatori