Use PHP and CSS to change page text size

When designing a website, keep in mind that not all visitors are brilliant young people, and that they are not necessarily fully familiar with the various ways in which Web browsers are used. Smart designers understand this, and they often integrate a variety of special accessibility features into the design of the site, so that even the elderly or the disabled can easily and comfortably use the site without the extra effort.

The text size adjuster is one of the most effective accessibility features, any website may need it, in short, this is a tool used to change the size of Web pages, often used to make text larger and easier to read, many browsers have brought this feature, but web browser beginners do not know how to use this feature , the Web site's designers often put buttons that are easier to use on each page to implement this feature.

This guide will show you how to use PHP and CSS to add a text size adjuster with this feature on your Web page. So, quickly add this accessibility to your site so that you can get a credit score from a user older than 50 and continue reading down, and you'll learn how to use it.

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

How does it work?
Before writing the code, it is useful to take some time to understand how the text size adjuster works. Each page in the Web site contains a series of control buttons that allow the user to select the text size of the page: small, medium, and large, each of which corresponds to a CSS style sheet that holds the rules for rendering the text size of the page.

When the user makes a choice, PHP stores the user-selected font size in a session variable, and then reloads the page, which reads the selected font size from the session variable and dynamically invokes the corresponding style sheet to render the page with a smaller or larger font size.

Process
First step: Create a Web page
Starting with creating an HTML document, you first complete the contents of the placeholder, and list A is an example:
List A:

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 ex ea
Commodoconsequat.
Duisauteirure dolor in Reprehenderit
Voluptatevelitessecillumdoloreeufugiatnullapariatur.
Excepteursintoccaecatcupidatat non proident, sunt in culpa qui
Officiadeseruntmollitanim ID estlaborum.

Text hyperlinks at the top of the page to pay special attention, each hyperlink points to a script file named Resize.php and passes the selected font size to it through the URL get method.

Save this document in your Web server directory with the extension of. PHP, for example, index.php.

Step Two: Create a style sheet
Next, create a stylesheet file for each text size: Small.css, Medium.css, and Large.css, which is the Small.css file content:

Body {
font:10px
}

Similarly, you can create MEDIUM.CSS and large.css, use 17px and 25px, and save these style sheet files in the same directory as the pages you created in the previous step.

Step Three: Create a mechanism for text size change
as described earlier, web pages can "know" which style sheet file to load by looking up predefined session variables, Session variables are controlled by script file resize.php (see List B), which is activated when a user clicks on a button that changes the text size at the top of the page, which is resize.php:
 
List B
//Start Session
//Import selected size to session
Session_Start ();
$_session[' textsize '] = $_get[' s '];
Header ("Location:"). $_server[' Http_referer ']);
?>
 
This is very simple, when the user chooses a new text size, resize.php Gets the value of the font size through the Get method and stores it in the session variable $_session[' TEXTSIZE ']. Then redirect the browser to which page you originally opened.
 
Of course, there is also a missing component: smart enough to automatically detect the text size that the user is now selecting and load the appropriate style sheet, open your Web page file index.php to join this feature, 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 should also add a stylesheet link between the ... elements, as follows:
Type= "Text/css" >

This is List D, and 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 ex ea
Commodoconsequat.
Duisauteirure dolor in Reprehenderit
Voluptatevelitessecillumdoloreeufugiatnullapariatur.
Excepteursintoccaecatcupidatat non proident, sunt in culpa qui
Officiadeseruntmollitanim ID estlaborum.

Understanding this way of working should be simple, when the page is loaded, it restores the current session and checks to see if the $_session[' textsize ' variable matches the selected font size, and then dynamically loads the corresponding style sheet through the element, which causes the page to automatically be rendered at the correct size.

The combination of PHP and CSS is slightly different from the traditional way of using JavaScript to dynamically change CSS stylesheets, and the advantage of the PHP approach over JavaScript is that you don't have to rely on client support for JavaScript. You don't have to worry about creating a browser-specific job, and maybe the next time you sit down and design a website, you'll find this method works.