Tekengrootte aanpassen via knop in website

donderdag 28 januari 2010 11:26

Acties:

0 Henk 'm!

Topicstarter

Door van een relatieve lettergrootte gebruik te maken heb ik ervoor gezorgd dat mijn website reageert op het aanpassen van de tekengrootte via de IE-menubalk (Beeld -> Tekengrootte -> Groter/Normaal/Kleiner). Shortcut, ook voor andere browsers: CTRL-+

Op verzoek moet ik in de website ook expliciet een knop "Vergroten" maken waarmee het lettertype vergroot kan worden. Ik moet er dus voor zorgen dat ik een knop in mijn website heb die de toets CTRL-+ simuleert. Dat klinkt ontzettend makkelijk en dat is het misschien ook, maar ik weet niet hoe ik dat moet doen. Iemand die me daarmee kan helpen?

donderdag 28 januari 2010 11:29

Acties:

0 Henk 'm!

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

Jiggle schreef op donderdag 28 januari 2010 @ 11:26:
Iemand die me daarmee kan helpen?

Google

Wat heb je zelf al gezocht en gevonden en wat werkte er niet en... Quickstart

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij

donderdag 28 januari 2010 11:33

Acties:

0 Henk 'm!

Jiggle

Topicstarter

Google heb ik uiteraard eerst geraadpleegd. Maar daar kom ik alleen manieren tegen om zelf met een Javascript die vergroting in te bouwen. Ik wil alleen dat de knop CTRL-+ uitgevoerd wordt. Want dan werkt het meteen al.
Misschien een domme vraag hoor, maar dan uit onwetendheid en niet uit gemakzucht.

donderdag 28 januari 2010 11:36

Acties:

0 Henk 'm!

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

Jiggle schreef op donderdag 28 januari 2010 @ 11:33:
Misschien een domme vraag hoor, maar dan uit onwetendheid en niet uit gemakzucht.

AFAIK kun je die browser-setting niet vanuit een webpage wijzigen. En maar goed ook; een site hoort met z'n takke van m'n browserinstellingen af te blijven.

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij

donderdag 28 januari 2010 11:47

Acties:

0 Henk 'm!

Jiggle

Topicstarter

Euh, das een hele goeie.... Ga ik sowieso terugkoppelen. Maar dan wil ik dus een knop in mn website die de lettergrootte aanpast, zonder mn browser-instellingen te wijzigen:). Met daarbij in aanmerking genomen dat ik al alles netjes in relatieve eenheden heb gemaakt.

[ Voor 71% gewijzigd door Jiggle op 28-01-2010 11:53 ]

donderdag 28 januari 2010 11:49

Acties:

0 Henk 'm!

HuHu

Dan heb je een JavaScript nodig dat de lettergrootte aanpast op je pagina. Je kunt wat CSS regels overschrijven met JS en dan kun je dat voor elkaar krijgen.

donderdag 28 januari 2010 11:51

Acties:

0 Henk 'm!

Sjakskus

Kun je niet een bv aparte css maken, die wordt gebruikt als er op "groter" wordt gedrukt

Beschikbaar voor ontwikkeling van (webbased) applicaties en dataconversies

donderdag 28 januari 2010 11:52

Acties:

0 Henk 'm!

MueR

Admin Tweakers Discord

is niet lief

XHTML:

<head>
  <link rel="stylesheet" type="text/css" href="/styles/main.css" />
  <link rel="stylesheet" type="text/css" href="/styles/large.css" />
</head>
<body class="normal"></body>

En die body class met javascript wijzigen? Eventueel ook een cookie zetten om het te onthouden.

Het specifiek noemen van de normal class is vrij overbodig btw, dit moet niet nodig hoeven zijn.

[ Voor 23% gewijzigd door MueR op 28-01-2010 11:53 ]

Anyone who gets in between me and my morning coffee should be insecure.

donderdag 28 januari 2010 11:56

Acties:

0 Henk 'm!

Jiggle

Topicstarter

Ja dat kan inderdaad. Maar dat kan sowieso, ik dacht misschien kan het makkelijker omdat al van de standaard browserfunctionaliteit gebruik kon maken.

Twee stylesheets is wel lastig qua onderhoud. Dan heb ik liever twee basis-lettergroottes waarvan ik alles afhankelijk maak, en vervolgens via Javascript van klasse wissel. Of kan ik dan ook met 2 stylesheets werken, klinkt wel het mooiste.

donderdag 28 januari 2010 11:58

Acties:

0 Henk 'm!

HuHu

Ergens in wat code vond ik dit, daar kun je vast wel wat mee:

JavaScript:

var defaultFontSize = 76;
var currentFontSize = defaultFontSize;

function revertStyles(){
    currentFontSize = defaultFontSize;
    changeFontSize(0);
}

function changeFontSize(sizeDifference){
    currentFontSize = parseInt(currentFontSize) + parseInt(sizeDifference * 5);

    if(currentFontSize > 100){
        currentFontSize = 100;
    }else if(currentFontSize < 60){
        currentFontSize = 60;
    }

    setFontSize(currentFontSize);
}

function setFontSize(fontSize){
    document.body.style.fontSize = fontSize + '%';
}

Maak je 2 knopjes met "groter" en "kleiner" die dan respectievelijk changeFontSize(1) en changeFontSize(-1) aanroepen.

donderdag 28 januari 2010 11:58

Acties:

0 Henk 'm!

MueR

Admin Tweakers Discord

is niet lief

Jiggle schreef op donderdag 28 januari 2010 @ 11:56:
Twee stylesheets is wel lastig qua onderhoud.

Ja maar je moet ook niet eerst je main.css maken en dan copy-pasta large.css er van maken. In large.css moet je alleen de gewijzigde fontsizes zetten. Ik mag toch aannemen dat je weet hoe Cascading StyleSheets werken.

Edit:
Huhu, wat een ontiegelijk rukcode. Je wil niet op de body je fontsize via inline styling gaan bepalen.

[ Voor 13% gewijzigd door MueR op 28-01-2010 11:59 ]

Anyone who gets in between me and my morning coffee should be insecure.

donderdag 28 januari 2010 12:12

Acties:

0 Henk 'm!

HuHu

, het is ook maar snel gejatte code van een website waarvan ik weet dat ze het gebruiken.

donderdag 28 januari 2010 12:34

Acties:

0 Henk 'm!

Jiggle

Topicstarter

MueR schreef op donderdag 28 januari 2010 @ 11:58:
[...]

Ja maar je moet ook niet eerst je main.css maken en dan copy-pasta large.css er van maken. In large.css moet je alleen de gewijzigde fontsizes zetten. Ik mag toch aannemen dat je weet hoe Cascading StyleSheets werken.

Edit:
Huhu, wat een ontiegelijk rukcode. Je wil niet op de body je fontsize via inline styling gaan bepalen.

Ehmm, ja excuses, stom natuurlijk, ik maak nog de nodige beginnersfouten.

Maar als ik je tweede opmerking goed interpreteer kan ik dus wel een soortgelijke Javascript-code gebruiken, maar moet ik die zodanig aanpassen dat hij een aan de body toegewezen klasse wijzigt. Correct?

donderdag 28 januari 2010 12:54

Acties:

0 Henk 'm!

MueR

Admin Tweakers Discord

is niet lief

Het enige wat je hoeft te doen is de className op body aanpassen.

Anyone who gets in between me and my morning coffee should be insecure.

vrijdag 29 januari 2010 21:46

Acties:

0 Henk 'm!

Cartman!

Waarom zou je het perse willen trouwens? Mensen die een dergelijke optie nodig hebben weten die optie in hun browser vast zelf al wel te vinden. Browsers kunnen tegenwoordig heel erg goed zelf de pagina zoomen zonder dat jij daar iets voor hoeft te doen

vrijdag 29 januari 2010 23:58

Acties:

0 Henk 'm!

Voutloos

^ Wat hij zegt. Dit soort opties aanbieden is echt enorm 2003, inmiddels heeft iedereen die graag grotere tekst wilt de browseroptie wel gevonden hoor.

{signature}

zaterdag 30 januari 2010 09:52

Acties:

0 Henk 'm!

wackmaniac

Er zijn nog bergen met klanten die dit soort strapatsen willen hebben op hun website. Voor publieke instellingen als scholen en ziekenhuizen. En je weet het; klant is koning en als de klant wil betalen voor dit soort dingen heb ik geen grote bezwaren om dit even te implementeren. Dit in tegenstelling tot andere dingen die klanten soms willen ...

Daar komt bij; als je dit in een cookie opslaat breng je wel flink wat gebruikersgemak naar je minder-goed-ziende gebruikers toe; die hoeven nu niet bij elke keer dat zij een website bekijken de CTRL + een paar keer in te drukken. En met bovenstaande argumentatie zou ik ook geen "back to top"-knoppen hoeven toe te voegen; CTRL + Home.

[ Voor 32% gewijzigd door wackmaniac op 30-01-2010 10:53 . Reden: toevoeging ]

Read the code, write the code, be the code!

zaterdag 30 januari 2010 10:54

Acties:

0 Henk 'm!

Johnny

ondergewaardeerde internetguru

wackmaniac schreef op zaterdag 30 januari 2010 @ 09:52:
Er zijn nog bergen met klanten die dit soort strapatsen willen hebben op hun website. Voor publieke instellingen als scholen en ziekenhuizen. En je weet het; klant is koning en als de klant wil betalen voor dit soort dingen heb ik geen grote bezwaren om dit even te implementeren. Dit in tegenstelling tot andere dingen die klanten soms willen ...

Een koning omringt zichzelf met raadgevers. Het is het jouw taak om advies te geven als expert om de klant de beste oplossing te bieden. Als je graag service wilt bieden kan je beter je tijd steken in het volgen van andere webrichtlijnen/standaarden voor dit soort klanten.

Daar komt bij; als je dit in een cookie opslaat breng je wel flink wat gebruikersgemak naar je minder-goed-ziende gebruikers toe; die hoeven nu niet bij elke keer dat zij een website bekijken de CTRL + een paar keer in te drukken.

De meeste browsers slaan dit gewoon op, Firefox doet het per website, Opera doet het globaal. Verder brengt het geen gebruiksgemak omdat slechtzienden deze functionaliteit al kennen, en ze nu weer iets nieuws moeten lerenn.

Aan de inhoud van de bovenstaande tekst kunnen geen rechten worden ontleend, tenzij dit expliciet in dit bericht is verwoord.

zaterdag 30 januari 2010 10:58

Acties:

0 Henk 'm!

wackmaniac

Johnny schreef op zaterdag 30 januari 2010 @ 10:54:Een koning omringt zichzelf met raadgevers. Het is het jouw taak om advies te geven als expert om de klant de beste oplossing te bieden. Als je graag service wilt bieden kan je beter je tijd steken in het volgen van andere webrichtlijnen/standaarden voor dit soort klanten.

Dat klopt en klanten komen vaak genoeg met eisen, die je zelfs op een afgeschermde pagina op je eigen pc, die je daarna nooit meer zult openen, nog niet zult toepassen. Vandaar ook mijn laatste zijn uit die alinea, maar dit vind ik een mooi voorbeeld van "wil je dat? Prima, bouwen we dat toch voor je, zolang je maar betaald". Het kan weinig kwaad is een beetje mijn strekking.

Read the code, write the code, be the code!

zaterdag 30 januari 2010 13:55

Acties:

0 Henk 'm!

pieturp

gaffa!

wackmaniac schreef op zaterdag 30 januari 2010 @ 10:58:
[...]Het kan weinig kwaad is een beetje mijn strekking.

Dat kan 't dus wel degelijk: doordat jij dan deze functionaliteit implementeert, ziet mijn klant 't vervolgens ook en zal zeggen dat 'ie 't overal om zich heen gebruikt ziet worden. Dan moet ik me in allerlei bochten wringen om 'm te overtuigen dat 't een slechte keuze is...

Native browser-functionaliteit hoort IMNHO in de browser, niet op de site.

... en etcetera en zo

zaterdag 30 januari 2010 14:08

Acties:

0 Henk 'm!

wackmaniac

Laat het de usability experts het niet horen. Ik ben het in dit geval iig niet met je eens.

Read the code, write the code, be the code!

zaterdag 30 januari 2010 14:26

Acties:

0 Henk 'm!

Gomez12

Simpel gezegd, niet aan beginnen zolang je geen extreem kleine ( qua lettertype dan ) website hebt.

Ik redeneer altijd als volgt : Als iemand telegraaf / nu.nl etc kan lezen dan kan hij mijn website ook lezen. Kan hij de voornoemde sites standaard niet lezen dan is hij wel bekend met de Ctrl-up functionaliteit waardoor hij die ook op mijn site kan toepassen ( of hij heeft zijn resolutie aangepast naar 640x480

)

Het invoeren van extra dingetjes die standaard websites niet hebben ( en ook niet nodig hebben ) kan er alleen maar toe leiden dat het dubbelop gaat als iemand eerst de Large versie pakt en daarna met Ctrl-up gaat werken...

wackmaniac schreef op zaterdag 30 januari 2010 @ 09:52:
Daar komt bij; als je dit in een cookie opslaat breng je wel flink wat gebruikersgemak naar je minder-goed-ziende gebruikers toe; die hoeven nu niet bij elke keer dat zij een website bekijken de CTRL + een paar keer in te drukken. En met bovenstaande argumentatie zou ik ook geen "back to top"-knoppen hoeven toe te voegen; CTRL + Home.

Grappig genoeg zie ik iets te vaak dat die minder-goed-ziende-gebruikers wel alle andere websites op het internet kunnen lezen zonder dit soort hulpmiddelen.

Het is imho eerder irritant als jouw website gaat afwijken van de rest van inet. Als iemand een aanpassing gaat doen op zijn computer om de rest van het inet beter te kunnen lezen ( groter standaard lettertype / lagere resolutie / standaard zoomfactor oid ) dan moet hij het altijd nog even terugzetten voor jouw site...

zaterdag 30 januari 2010 15:07

Acties:

0 Henk 'm!

Voutloos

wackmaniac schreef op zaterdag 30 januari 2010 @ 14:08:
Laat het de usability experts het niet horen.

1. Het gaat hier met name om accessibility.
2. De accessibility experts zijn maar wat blij met OS/browser opties. Op een standaard manier snel en effictief instellen dat je een iets groter lettertje nodig hebt is toch ideaal? Nee, je moet iedereen vooral lekker op elke site een eigen implementatie laten zoeken.

Neem een enigszins normale fontsize en het zal meteen goed zijn voor iedereen, of dmv een automatisme goed gezet worden. Ga je werken met hele kleine lettertjes en ter compensaitie je eigen fontsize opties aanbieden ben je juist onvriendelijk bezig.

offtopic:
Sterker nog, ironisch genoeg heb ik wel eens het idee gehad dat juist de sites met deze optie voor mij (zonder visuele handicap) vaker niet standaard goed weergegeven worden. Aka: ik zie te vaak die knoppen staan vlak nadat ik "*&$%# wat een ruksite" denk.

Dat is misschien toeval, tenzij dergelijke optie echt er snel ingehangen wordt als pleister op een slechte stijl.

[ Voor 21% gewijzigd door Voutloos op 30-01-2010 15:13 ]

{signature}

zaterdag 30 januari 2010 15:34

Acties:

0 Henk 'm!

orf

www.seniorenweb.nl heeft het wel aardig opgelost: Een knopje (link) naar een pagina met uitleg om de lettergroote aan te passen voor de browser die je hebt.

zaterdag 30 januari 2010 15:42

Acties:

0 Henk 'm!

CH4OS

It's a kind of magic

wackmaniac schreef op zaterdag 30 januari 2010 @ 14:08:
Laat het de usability experts het niet horen. Ik ben het in dit geval iig niet met je eens.

Met usability heeft het niets te maken. Eerder, zoals gezegt, met accesability. Maar ook in het kader daarvan ben ik gewoon van mening dat een knopje om de tekst te kunnen vergroten of te verkleinen not done is. Als mensen grotere letters willen omdat ze anders de website niet (goed) kunnen lezen, dan zetten ze zelf binnen de applicatie maar een vergroting in gang. Bijkomend voordeel is, dat élke website daar dan profijt bij heeft en niet alleen de jouwe. Plus als je het alleen met een JS oplossing doet, worden bezoekers knettergek. Je bezoekers moeten dan namelijk telkens weer op het knopje drukken om de tekens te vergroten.

zaterdag 30 januari 2010 19:27

Acties:

0 Henk 'm!

mcDavid

Het makkelijkst is denk ik in de stylesheet je body een vaste lettergrootte te geven, en alle elementen met % relatief daaraan te formatteren. Bijv. body op 10px vastzetten, dan weet je ook dat bijv. 140% (in de normale situatie) gelijk is aan 14px.

Dan kun je een scriptje maken wat iets simpels doet als

code:

1	<a href="javascript:document.body.style.fontSize=document.body.style.fontSize+1;">groter</a>

_{'t zal niet letterlijk zo simpel zijn, maar maak er even een functie van en dan lukt het wel.}

Onderwerpen