Hou Safari reader voor de gek
De reader functie van Safari is een innovatieve toevoeging aan deze browser. Zodra je op een pagina komt met een tekst meer dan 100 karakters, dan verschijnt in Safari een knopje 'reader' die de tekst zonder verdere opsmuk zal tonen. Zie de afbeelding hieronder. Nou ja, zodra... Die reader blijkt in de praktijk naar nogal wat zaken te kijken voordat het tot een besluit komt om het knopje 'reader' te tonen. Zo kijkt reader ondermeer naar hoeveel paragrafen een tekst bevat. Dit moeten er meer dan 4 zijn om door reader aangezien te worden voor een tekst. Maar ook andere zaken blijken door reader worden meegenomen. Fonts mogen niet te klein zijn, de tekst mag niet in een <div> staan waarvan de display op 'none' staat, de tekst moet een substantieel oppervlakte van de pagina omvatten en ga zo maar door.

Na een hoop gepuzzel heb ik een manier gevonden waarbij je de readerknop kan tonen terwijl de content op de pagina uit een flashmovie bestaat. Zodoende kan men bijvoorbeeld een flashmovie tonen waarboven de reader een tekst zal tonen. Om een flashmovie toegankelijk voor zoekmachines te maken is het zowiezo wel zo slim om de tekst uit de movie te plaatsen zodat deze door zoekmachine geindexeerd kan worden.
<div id="tekst" style="visibility: hidden">
<h1>titel</h1>
<p>plaats hier de tekst, wel meer dan 100 woorden. Pas ook alinea's toe.</p>
</div>
<div style="position:absolute; top:20px">
plaats hier de flashmovie met swfobject
</div>
Een werkend voorbeeld vind je hier. Dus wel met Safari bekijken! De tekst op de achtergrond is een flashmovie. De tekst die hierin voorkomt staat in de verborgen laag die de reader aanziet als de hoofdtekst. Helaas heeft IE7 (als enige browser problemen met het correct plaatsen en plaatst de Movie aan de rechterzijde. Maar goed, met een javascriptje die kijkt naar welke browser de gebruiker heeft kan je natuurlijk ook deze oplossing uitsluitend tonen aan Safari gebruikers, want alleen daarbij werkt deze truuk.

Na een hoop gepuzzel heb ik een manier gevonden waarbij je de readerknop kan tonen terwijl de content op de pagina uit een flashmovie bestaat. Zodoende kan men bijvoorbeeld een flashmovie tonen waarboven de reader een tekst zal tonen. Om een flashmovie toegankelijk voor zoekmachines te maken is het zowiezo wel zo slim om de tekst uit de movie te plaatsen zodat deze door zoekmachine geindexeerd kan worden.
<div id="tekst" style="visibility: hidden">
<h1>titel</h1>
<p>plaats hier de tekst, wel meer dan 100 woorden. Pas ook alinea's toe.</p>
</div>
<div style="position:absolute; top:20px">
plaats hier de flashmovie met swfobject
</div>
Een werkend voorbeeld vind je hier. Dus wel met Safari bekijken! De tekst op de achtergrond is een flashmovie. De tekst die hierin voorkomt staat in de verborgen laag die de reader aanziet als de hoofdtekst. Helaas heeft IE7 (als enige browser problemen met het correct plaatsen en plaatst de Movie aan de rechterzijde. Maar goed, met een javascriptje die kijkt naar welke browser de gebruiker heeft kan je natuurlijk ook deze oplossing uitsluitend tonen aan Safari gebruikers, want alleen daarbij werkt deze truuk.
blog comments powered by Disqus