How to change page text size using PHP and CSS

Use PHP and CSS to change the size of your Web pages--When designing a website, keep in mind that not all visitors are brilliant young people, and they are not necessarily fully familiar with the various ways in which Web browsers are used.

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

The text size adjuster is one of the most effective accessible features that any website may need, in short, this is a tool to change the size of the page text, which is often used to make the text larger and easier to read, and many browsers already have this feature, but web browser beginners don't know how to use it , the Web site's designers often put the easier-to-use buttons 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 functionality to your Web page, so quickly add this accessibility to your site so that you can get credit for the credits from users older than 50 and continue reading down, and you'll learn how to use it.

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

How does it work?

It is helpful to take some time to understand how the text size adjuster works before writing the code. Each page in the 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 page text size.

When the user makes a selection, 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 re-render the page with a smaller font size or a larger font size.

Process

First step: Create a Web page

Starting with creating an HTML document, the contents of the placeholder are completed first, and listing 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 utaliquip ex ea
Commodoconsequat.
Duisauteirure dolor in Reprehenderit in
Voluptatevelitessecillumdoloreeufugiatnullapariatur.
Excepteursintoccaecatcupidatat non proident, sunt in culpa qui
Officiadeseruntmollitanim ID estlaborum.

Note the text hyperlink at the top of the page in particular, 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 as a. php extension in your Web server directory, for example, index.php.

Step Two: Create a style sheet

Next, create a style sheet file for each text size: Small.css, Medium.css, and Large.css, which is the file contents of Small.css:

Body {
font:10px
}

Similarly, you can create MEDIUM.CSS and large.css, using 17PX and 25px respectively, to store the stylesheet files in the same directory as the pages you created in the previous step.

Step three: Create a change mechanism for text size

As described above, a Web page can "know" which style sheet file to load by looking up predefined session variables. Session variables are controlled by the script file resize.php (see List B), which is activated when the user clicks the button that changes the text size at the top of the page, which is the 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 the user chooses a new text size, resize.php Gets the value of the font size by the Get method, stores it in the session variable $_session[' Textsize '), and then redirects the browser to which page was originally opened.

Of course, there is a missing component here: intelligently let the page automatically detect now the user selected text size and load the corresponding style sheet, in order to join this function, open your Web page file index.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 should also add a stylesheet link between the ... elements, as follows:
Type= "Text/css" >

This is the list D, and the complete index.php file should look 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.
Excepteursintoccaecatcupidatat non proident, sunt in culpa qui
Officiadeseruntmollitanim ID estlaborum.

Understanding this way of working should be simple, when loading a Web page, it resumes the current session, and checks whether the $_session[' textsize '] variable matches the font size chosen by the yourselves, and then dynamically loads the corresponding style sheet through the element, which causes the page to be automatically re-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 PHP methods 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 that this is a great way to do it, and enjoy programming!

