Safari's reader

Let’s suppose I have blocks in my page.

The first block is for advertizement.
The second block is for contents.

When users visit the page in Safari, I like to make the page that safari’s reader button in the address box of the browser is shown for the second block although the text in the first block is longer than the text in the second block.

The following is one for my trials, but failed.

<div id="1stBlock">advertizement</div>
<[COLOR="#FF0000"]article[/COLOR] id="2ndBlock">contents</[COLOR="#FF0000"]article[/COLOR]>

Hi, dotJoon,

As you know, we cannot diagnose anything from this code. If you can post a working example in a standalone page, we should be able to offer some suggestions. Otherwise, a link to your site (if you have one) would do.

Please see these these messages if you need examples of standalone pages.

Thank you for your advice/teaching, ronpat.

I guess I didn’t explain fully what I want.

These days, lots of people use mobile phone for surfing.
The mobile phone has some advantages and disadvantages.
I won’t mention about advantage of the mobile phone.
I’ll say about one of disadvantages of the mobile phone.

The monitor of the mobile phone is much smaller than the monitor of the deskTop.
I like to say the small size of the monitor is one of disadvangtages fo the mobile phone.

Because of the small size, The text of the contents is also very small when I surf in my mobile phone.
It causes working hard in reading the contents.

Apple suggest one of solution for this disadvantage.

When I surf the internet, iPhone’s browser named “safari” creating another button in the address box of the browser named “reader”.
I don’t know the exact name of the button in English. I just translate it to English from my mother tongue.
Anyway, let’s call the button “reader”.
I guess if someone uses iPhone or iPad, he or she will probably know the button “reader”.

When I click the button “reader”, it shows the contents only removing other stuffs.
It makes me very easier to read the contents.

I wonder how the apple’s safari do this.

One of my guessing is that the safari checks the length of the text of each block of the page.
And it guess the longest text may be the main contents of the page.
And make the button “reader” for the contents.

I like to make my webPage interacting with the browser safafi.
I like to make my page automatically created the button “reader” for my contents when user come to my page in safari.
The contents usually has the longest text, the button is automatically shown when a user come to my page in safary.

But some times, the contents is very short or the contents has not the longest text, the button is not automatically created or the button is created for other thing instead of the contents.

I like to make my page always create the button “reader” for contents instead of other stuffs.

Safari has that Reader button so that people can read the content and block out all the other rubbish on the page. It’s basically for reading long amounts of text, such as blog posts.

You could imitate that button with JavaScript, but a better option might be to use CSS. You can use @media rules to make the text bigger on small screens and set all kinds of different styles for the content.


@media only screen and (max-width: 600px) {
	body {font-size: 150%;}
	[I]... more styles for elements here ...[/I]