Use PHP and CSS to change the webpage text size

When a user makes a selection, PHP stores the selected font size in a session variable and reloads the webpage. the page reads the selected font size from the session variable, and dynamically call the corresponding style sheet to re-render the webpage with a smaller font size or larger font size.

When designing a website, remember that not all visitors are young people with a strong look, and they are not necessarily familiar with the various Web browser application methods. Smart designers know this and often incorporate various special visiting features into the design of the website. in this way, even elders or persons with disabilities can easily and comfortably apply the website, instead of spending additional power.

The text size regulator is one of the most effective visiting features that any website may need. In short, it is a tool used to change the text size of a webpage, this feature is usually used to increase the text size and make it easy to browse. many browsers already have this feature, but beginners of web browsers do not know how to apply this feature. therefore, website designers often put easier-to-use buttons on each web page to achieve this effect.

This guide will show you how to apply PHP and CSS to add a text size regulator with this function on the webpage. Therefore, add this accessibility to your website, in this way, you will learn how to apply the earned points from users older than 50 years old and continue to read down.

Note: This guide assumes that you have installed Apache and PHP

How does it work?
Before writing code, it is very helpful to take some time to understand how the text size regulator works. Each webpage on the website contains a series of control buttons, which allow users to select the text size of the page: small, medium, and large. Each font size corresponds to a CSS style sheet, these style sheets retain the rules used to render the webpage text size.
 

When a user makes a selection, PHP stores the selected font size in a session variable and reloads the webpage. the page reads the selected font size from the session variable, and dynamically call the corresponding style sheet to re-render the webpage with a smaller font size or larger font size.

Process
Step 1: Create a webpage
Starting from creating an HTML document, complete the placeholder content first. List A is an example:
List:

Text size: small | href = 'resize. php? S = medium '> medium | large

Loremipsum dolor sit amet,
Consecteturadipisicingelit, sed do eiusmodtemporincididuntutlabore et dolore
Magna aliqua. Utenim
Ad minim veniam, quisnostrud exercitation ullamcolaboris nisi utaliquip ex ea
Commodoconsequat.
Duisauteirure dolor in reprehenderit in
Voluptatevelitessecillumdoloreeufugiatnullapariatur.
Deleteursintoccaecatcupidatat non proident, sunt in culpa qui
Officiadeseruntmollitanim id estlaborum.

Pay special attention to text hyperlinks at the top of the page. each hyperlink points to a script file named resize. php and passes the selected font size to it through the url get method.

Keep this document with an extended. php name in your Web server directory, for example, index. php.

Step 2: create a style sheet
Next, create a style sheet file for each text size: small.css, medium.cssand large.css. this is the content of the small.css file:

Body {
Font: 10px
}

In the same sample, you can create medium.css and large.css to distinguish the applications 17px and 25px, and keep these style sheet files and the web pages created in the previous step in the same directory.

Step 3: create a mechanism for changing the text size
As mentioned above, the webpage can find the pre-defined session variable to 'know which style sheet file to load, and the session variable is resize through the script file. php control (see list B). This file is activated when you click the Change Text Size button on the top of the page. this is resize. php content:
 
List B
// Start session
// Import selected size into session
Session_start ();
$ _ SESSION ['textsize'] = $ _ GET ['s '];
Header ('Location: '. $ _ SERVER ['http _ referer']);
?>
 
This is very simple. when you select a new text size, resize. php uses the GET method to obtain the font size value, store it in the SESSION variable $ _ SESSION ['textsize'], and redirect the browser to the opened page.
 
Of course, there is still a lack of components: the intelligent way to enable the web page to actively detect the size of the text currently selected by the user and load the corresponding style sheet, in order to participate in this function, open the index of your webpage file. php, and add the following statement to the beginning of the file (see list C ):
 

List C
// Start session
// Import variables
Session_start ();
// Set default text size for this page
If (! Isset ($ _ SESSION ['textsize']) {
$ _ SESSION ['textsize'] = 'Medium ';
}
?>
 
You shoshould also add a stylesheet link between the... elements, as follows:
Type = 'text/css '>
 
This is list D. The Complete index. php file should be like this:
List D:
// Start session
// Import variables
Session_start ();
// Set default text size for this page
If (! Isset ($ _ SESSION ['textsize']) {
$ _ SESSION ['textsize'] = 'Medium ';
}
?>

Type = 'text/css '>

Text size: small | href = 'resize. php? S = medium '> medium | large

Loremipsum dolor sit amet,
Consecteturadipisicingelit, sed do eiusmodtemporincididuntutlabore et dolore
Magna aliqua. Utenim
Ad minim veniam, quisnostrud exercitation ullamcolaboris nisi utaliquip ex ea
Commodoconsequat.
Duisauteirure dolor in reprehenderit in
Voluptatevelitessecillumdoloreeufugiatnullapariatur.
Deleteursintoccaecatcupidatat non proident, sunt in culpa qui
Officiadeseruntmollitanim id estlaborum.

It should be very simple to understand this method. when a webpage is loaded, it restores the current SESSION and checks whether the $ _ SESSION ['textsize'] variable matches the selected font size, then, the corresponding style table is dynamically loaded through the element, which will lead to the active re-rendering of the webpage at an accurate size.

The combination of PHP and CSS is slightly different from the traditional method. the traditional method is to use JavaScript to dynamically change the CSS style sheet, the advantage of the PHP method is that you do not need to attach the client to support JavaScript, and you do not need to worry about creating a job dedicated to a browser, maybe this method will be effective the next time you sit down and design your website. I wish you a happy programmer!