Tekstgrootte met browser mee laten schalen

[GMTM]

Hi y'all...

Ik dacht dat ik hier wel terechtkon met mijn vraag...
Ik wil temporary website maken, heel simpel allemaal, maar toch zit ik vast.
De link (yousendit) van een screenshot help alles wel wat te visualiseren wat ik tracht uit te leggen...

Kan er iemand met helpen met een script dat ervoor zorgt dat de tekst blijft zoals hij staat (tekst is geen img) en dat deze dus bijgevolg meeschaalt als je de browser verkleint...


Dank bij voorbaat!

Gert

 

[That Guy]

Poe, dat's wel een opgave hoor. Het punt is dat je zowiezo niet weet of het wel goed staat - sommige hebben immers 1024x768, anderen weer 1280x1024 en mensen met een veel te groot scherm 1600x1250 als resolutie.

Oplossing is mischien een plaatje te nemen en deze met css een height en width geven van 100%.

 

[GMTM]

Tja,

na veel geklooi leek dit me ook de meest voor de hand liggende oplossing...
Maar voor mij persoonlijk (en het komt ook wat professioneler over) leek het me een uitdaging om het via html te doen...

 

[That Guy]

Nou... in principe kan je zoiets doen:

1. vraag hoogte/breedte scherm op
2. bereken font op deze manier. Houd rekening dat je meerdere regels wilt.
3. breedte is lastiger, omdat je niet met een fixed font werkt (neem ik aan). Uiteindelijk window-resize event handler toevoegen.

maargoed, dat's toch wel even een regenachtige middag werk.

 

[Egel]

Het regent in Zwolle!
[js]<style type="text/css">
body { margin: 0px; padding: 0px; overflow: auto;}
#titel {
color: #c00;
font-size: 100px;
font-family: 'Times new Roman';
font-weight: bold;
text-align: center;
white-space: nowrap;
}
</style>


<div id="titel">
<span id="s0" style="line-height: 90%;">GMTM's</span><br>
<span id="s1" style="line-height: 75%; color: #fa0;">past and daily</span><br>
<span id="s2" style="line-height: 110%;">DOINGS</span><br>
</div>


<script type="text/javascript">
// Egel 100511

var margin = 24, sw = new Array(400,600,400);

function resize() {
var w = document.body.offsetWidth - margin;
for (var i = 0; i < sw.length; i++) {
document.getElementById('s' + i).style.fontSize = Math.round(w / sw * 100) + '%';
};
};
window.onresize = resize;

function measure() {
for (var i = 0; i < sw.length; i++) {
sw = document.getElementById('s' + i).offsetWidth;
};
resize();
};
window.onload = measure;

</script>[/js]
De div bevat 3 span's. Bij het laden wordt daar de breedte van gemeten. Daarna, en bij resizen, wordt de font-size van de span's aangepast aan de breedte van het venster.

Zie bijlagen:

Bekijk bijlage gmtm.html.txt

 

[GMTM]

Wauw...

Super bedankt!
Dit moet me toch al een héél eind op weg zetten... (Thanks rain )

 

[GMTM]

Allright...
Ik ben al een heel eind verder, maar ik vroeg me af of het mogelijk is om er voor te zorgen dat de tekst in de 2 onderste div's dezelfde corpsgrootte hebben als de bovenste? Maar dan wel op zo'n manier dat ze nog steeds meeschalen natuurlijk...

Bedankt alvast!

Gert

 

[Egel]

Het enigste andere dat je dan kunt aanpassen is de letter-spacing:
[js]<style type="text/css">
body { margin: 0px; padding: 0px; overflow-y: auto; overflow-x: hidden;}
#titel { color: #c00;
font-size: 100px;
font-family: 'Times new Roman';
font-weight: bold;
text-align: center;
white-space: nowrap;
}
</style>


<div id="titel">
<span id="s0" style="line-height: 90%;">GMTM's</span><br>
<span id="s1" style="line-height: 70%; color: #fa0;">past & daily</span><br>
<span id="s2" style="line-height: 120%;">DOINGS</span><br>
</div>


<script type="text/javascript">
// Egel 100513

var margin = 24, sw = [1,1,1], max = 1, sn = [1,1,1];

function resize() {
var w = document.body.offsetWidth - margin;
var p = Math.round(w / max * 100);
for (var i = 0; i < sw.length; i++) {
document.getElementById('s' + i).style.fontSize = p + '%';
document.getElementById('s' + i).style.letterSpacing = Math.round(p / 100 * (max - sw) / sn) + 'px';
};
};
window.onresize = resize;

function measure() {
for (var i = 0; i < sw.length; i++) {
sw = document.getElementById('s' + i).offsetWidth;
sn = document.getElementById('s' + i).innerHTML.length - 1;
max = Math.max(sw,max);
};
resize();
};
window.onload = measure;

</script>[/js]
Dit script vergroot de tekst zodat de breedste span past en vergroot daarna de letter-spacing van de 2 kleinere spans.

 

[GMTM]

Hoi Egel!

Wederom enorm bedankt...
Maar deze keer krijg ik het precies niet werkende. Met andere woorden, de tekst is niet meer zo groot als m'n browserwindow en schaalt ook niet meer mee...

Hulp...

Greets
Gert

 

[Egel]

Doet de bijlage het ook niet?
Bekijk bijlage gmtm_spacing.html.txt

Bij mij werkt het in IE, Firefox en Opera.

 

[GMTM]

Hi Egel!

Bedankt, maar het is net niet wat ik bedoel...
De onderste regel zou qua grootte eigenlijk hetzelfde als de twee regels erboven, maar zonder dat hij de letterspacing verandert.
Eigenlijk zou de onderste regel links uitgelijnd moeten worden. Ik heb het geprobeerd met textAlign via Java, maar ik krijg het niet gedaan...

Ik heb het snel in html gefixt met een <pre> (werkt wel enkel voor 100% in firefox). Maar zo zie ik het...
http://www.gmtm.be/portfolio

Kan je me nog éénmaal verder helpen?
Bedankt...

 

[Egel]

Dit zou het ongeveer moeten doen!
[js]<style type="text/css">
body { margin: 0px; padding: 0px; overflow-y: auto; overflow-x: hidden;}
#titel { color: #c00;
font-size: 100px;
font-family: 'Times new Roman';
font-weight: bold;
margin-left: 8px;
text-align: left;
white-space: nowrap;
}
</style>


<div id="titel">
<span id="s0" style="line-height: 90%;">Gmtm's Past</span><br>
<span id="s1" style="line-height: 100%; color: #fa0;">and Daily D</span><br>
<span id="s2" style="line-height: 90%;">oings.</span><br>
</div>


<script type="text/javascript">
// Egel 100518

var margin = 24;

function resize() {
var w = document.body.offsetWidth - margin;
var p = Math.floor(w / spn[0].width * 100);
var s = Math.ceil(p / 100 * (spn[0].width - spn[1].width) / spn[1].spaces);
for (var i = 0; i < spn.length; i++) {
spn.span.style.fontSize = p + '%';
if (i != 0) spn.span.style.letterSpacing = s + 'px';
};
};

var spn = [{},{},{}];
function measure() {
for (var i = 0; i < spn.length; i++) {
spn.span = document.getElementById('s' + i);
spn.width = spn.span.offsetWidth;
spn.spaces = spn.span.innerHTML.length - 1;
};
spn.sort(function(a,b){return a.width < b.width});
window.onresize = resize;
resize();
};
window.onload = measure;

</script>[/js]
De info van de de spans wordt in een array van objecten gezet en daarna op de breedte gesorteerd.

De font-size wordt bij allen vergroot zodat de breedste past. Daarna de letter-spacing van de middelste en smalste, evenveel, zodat de middelste past. De kleinste blijft dan kleiner dan de andere twee.