How to use PHP and CSS to change the webpage text size

Use php and CSS to change the text size of a webpage-when designing a website, remember that not all visitors are awesome young people, they are not necessarily familiar with the various Web browser usage methods. When designing a website, keep in mind that not all visitors are excited young people, and they are not necessarily completely familiar with the use of Web browsers. Smart designers understand this. they often incorporate various special accessible features into website design and use php and CSS to change the webpage text size-when designing a website, keep in mind that not all visitors are excited young people, and they are not necessarily completely familiar with the use of Web browsers.

When designing a website, keep in mind that not all visitors are excited young people, and they are not necessarily completely familiar with the use of Web browsers. Smart designers understand this and often incorporate various special accessible features into the design of the website so that even elders or persons with disabilities can easily and comfortably use the website, instead of spending extra effort.

The text size regulator is one of the most effective accessible 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 text size so that it is easy to read. many browsers have come with this feature, but beginners of web browsers do not know how to use this feature. therefore, website designers often put easier-to-use buttons on each web page to implement this function.

This guide will show you how to use PHP and CSS to add a text size regulator with this function on the webpage. Therefore, add this accessibility to your website as soon as possible, in this way, you will learn how to use the earned points from users over 50 years old.

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 page on the website contains a series of control buttons that 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 save 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.

Note the 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.

Store this document with the. php extension 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, respectively using 17px and 25px to save 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 described above, the webpage can find the pre-defined session variables to "know" which style table file to load, and the session variables are resize through the script file. php control (see list B). This file is activated when you click the button to change the text size at 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 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: intelligently allowing the web page to automatically detect the size of the text currently selected by the user and load the corresponding style sheet. in order to add 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 easy to understand this method. when loading a webpage, 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 cause the webpage to be automatically re-rendered with the correct 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 rely on the client to support JavaScript, and you do not need to worry about creating a job dedicated to a browser, maybe the next time you sit down and design a website, you will find this method very effective and wish you a pleasant programming!