Use PHP and CSS to change the text size of web pages_PHP tutorial

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

When designing a website, keep one thing in mind: not all visitors are energetic young people, and they are not necessarily fully familiar with the various methods of using web browsers. 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 Easy to read, many browsers already have 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 achieve this. this function.

This guide will show you how to add this functional text sizer to your web pages using PHP and CSS, so hurry up and add this accessibility to your website to make it accessible to people aged 50 and over. Earn praise points from users and read on to learn how to use it.

NOTE: This guide assumes you 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. Table to re-render the web page with a smaller or larger font size.

Process

Step 1: Create a web page

Starting from 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,

Magna aliqua. Utenim

commodoconsequat.

　Duisauteirure dolor in reprehenderit in

Voluptatevelitessecillumdoloreeufugiatnullapariatur.

　Excepteursintoccaecatcupidatat non proident, sunt in culpa qui

　officiadeseruntmollitanim id estlaborum.

Pay special attention to 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 via the URL GET method.

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

Step 2: Create a style sheet

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 for predefined session variables. The session variables are controlled through the script file resize.php (see Listing B), which is the file in the user It is activated when you click 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 opens the browser Redirect to the originally opened page. [next]

Of course, there is still a component missing here: the intelligence allows the web page 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 change The following statement is added to the beginning of the file (see Listing C):

List C

// start session

　// import variables

session_start();

// set default text size for this page

　if (!isset($_SESSION['textsi

http://www.bkjia.com/PHPjc/767404.htmlwww.bkjia.comtruehttp: //www.bkjia.com/PHPjc/767404.htmlTechArticleUse PHP and CSS to change the text size of web pages. When designing a website, keep one thing in mind: not all visitors They are all energetic young people, and they are not necessarily fully familiar with Web browsing...