How to change web page text size using PHP and CSS

Author：Eve Cole Update Time：2009-06-01 18:20:47

Use PHP and CSS to change the text size of web pages - When designing your website, keep one thing in mind: not all visitors are bright young people, and they are not necessarily fully familiar with the various methods of using web browsers.

When designing a website, keep one thing in mind: not all visitors are bright young people, and they are not necessarily fully familiar with the various ways to use a web browser. Smart designers understand this and often incorporate various special accessibility features into the design of websites so that even seniors or people with disabilities can use the website easily and comfortably without having to expend extra effort.

Text sizer is one of the most effective accessibility features that any website may need. In short, it is a tool used to change the text size of a web page. It is usually used to make the text larger so that it is easier to read. Many browsers already come with this feature, but beginners of web browsers don't know how to use this feature. Therefore, website designers often implement this feature by placing easier-to-use buttons on each web page. .

This guide will show you how to add this functional text sizer to your web pages using PHP and CSS, so go ahead and add this accessibility to your website and get the most from users who are 50+ Kudos points, read on and you’ll learn how to use it.

NOTE: This guide assumes you already have Apache and PHP installed.

How does it work?

Before writing code, it's helpful to spend some time understanding how the text sizer works. Each page on the site contains a series of controls that allow the user to select the page's text size: Small, Medium, and Large. Each font size corresponds to a CSS style sheet that saves the text used for the page. Rules for rendering web page text sizes.

When the user makes a selection, PHP stores the font size selected by the user in a session variable, and then reloads the web page. The page will read the selected font size from the session variable and dynamically call the corresponding style sheet to update it. Re-render the page with a smaller font size or a larger font size.

The first step in

the process

: Creating a web page

starts with creating an HTML document. First, complete the content of the placeholder. 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 utaliquip ex ea
commodoconsequat.
Duisauteirure dolor in reprehenderit in
voluptatevelitessecillumdoloreeufugiatnullapariatur.
Excepteursintoccaecatcupidatat non proident, sunt in culpa qui
officiateseruntmollitanim id estlaborum.

Pay special attention to the text hyperlinks at the top of the page. Each hyperlink points to a script file called resize.php and passes it the selected font size via the URL GET method.

Save this document in your web server directory with a .php extension, for example, index.php.

Step 2: Create style sheets

Next, create style sheet files for each text size: small.css, medium.css and large.css. This is the file content of small.css:

body {
font: 10px
}

Similarly, you can create medium.css and large.css, using 17px and 25px respectively, and save these style sheet files in the same directory as the web page created in the previous step.

Step 3: Create a text size changing mechanism

As introduced above, the web page can "know" which style sheet file to load by looking up the predefined session variables. The session variables are controlled through the script file resize.php (see Listing B ), this file is activated when the user clicks the button to change the text size at the top of the web page. This is the content of resize.php:

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 the user selects a new text size, resize.php obtains the font size value through the GET method and stores it in the session variable $_SESSION['textsize'], and then resets the browser. Direct to the originally opened page.

Of course, there is still a component missing here: the web page is smart enough to automatically detect the text size currently selected by the user and load the corresponding style sheet. To add this function, open your web page file index.php and add the following statement to the beginning of the file (see Listing C):

Listing 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 Listing D. The complete index.php file should look like this:

Listing 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

It should be very simple to understand how this works. When a web page is loaded, it resumes the current session and checks whether the $_SESSION['textsize'] variable matches the currently selected font size, and then dynamically loads the corresponding style sheet through the element. , which will cause the web page to automatically re-render at the correct size. The combined use of PHP and CSS is slightly different from the traditional method, which uses JavaScript to dynamically change the CSS style sheet. Compared with the JavaScript method, the advantage of the PHP method is that you do not need to rely on the client's support for JavaScript. Worry about creating work specifically for a certain browser, maybe you'll find this approach works well next time you sit down to design a website, happy coding!