Garbled text from encoding issues

Updated at:

This topic describes the possible causes of garbled text on webpages and provides solutions.

Symptoms

When users visit your website, garbled or incorrect characters appear on the webpages.

Cause

This issue is caused by a character set encoding mismatch between your application files, webpages, and database.

Solution

To resolve this issue, you must ensure that your application files, webpages, and database all use the same character set encoding.

Most development environments use the UTF-8 (Unicode Transformation Format) encoding because it supports nearly all languages. We recommend that you use the UTF-8 encoding. This topic uses a PHP and MySQL stack to demonstrate how to set a consistent UTF-8 encoding for your application files, webpages, and database to prevent garbled text. Similar steps apply to other languages and character sets.

Character set encoding for application files

  1. Verify that the character set encoding of your application files is UTF-8. You can use any of the following methods:

    • Use a development tool, such as Visual Studio Code. In the VS Code window, check the lower-right corner of the status bar for the file's current encoding. If it displays UTF-8, the encoding is already correct.

    • Use Notepad. In the Notepad window, check the lower-right corner of the status bar for the file's current encoding. If it displays UTF-8, the encoding is already correct.

    • Use another text editor, such as Notepad++, EditPlus, UltraEdit, or Sublime.

  2. If the character set encoding of your application files is not UTF-8, follow these steps to change it. You can use any of the following methods:

    • Change the encoding in a development tool, such as Visual Studio Code.

      1. Back up the file's content to a separate file.

        Warning

        You must back up your files before changing their encoding to prevent irreversible data loss.

      2. Click the current encoding name.

        The encoding name is located in the lower-right corner of the status bar in the VS Code window (for example, GBK).

      3. Click Save with Encoding.

      4. Enter or select UTF-8.

      5. (Optional) If the file content becomes garbled, copy the content from your backup file and paste it into the current file.

    • Change the encoding in Notepad.

      1. Click File (F) > Save As... (A).

      2. In the Encoding (E): drop-down list, select UTF-8 and click Save (S).

      3. Click Yes (Y) to confirm.

    • Change the encoding in another text editor, such as Notepad++, EditPlus, UltraEdit, or Sublime.

Character set encoding for webpages

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Home Page</title>
</head>

Character set encoding for the database

Database character set

To check the character set of your database, run the following SQL query:

SELECT DEFAULT_CHARACTER_SET_NAME, DEFAULT_COLLATION_NAME FROM INFORMATION_SCHEMA.SCHEMATA WHERE SCHEMA_NAME = 'your_database_name';

To change the character set of your database to UTF-8, run the following command:

ALTER DATABASE `your_database_name` CHARACTER SET 'utf8';

Table character set

  1. Check the character set of your tables.

    1. Log on to your MySQL database using DMS. For more information, see Log on to a database by using the web-based DMS.

    2. Right-click the database and click Table Details.

      On the Table Details page, you can view the Character Set for each table.

  2. If a table's character set is not utf8, follow these steps to change it.

    1. Right-click the database and click Query.

    2. Right-click the table and click Edit Table Structure.

    3. In the Character Set drop-down list, select utf8 or utf8mb4.

      Important

      The utf8mb4 character set is supported only in MySQL 5.5.3 and later.

    4. Click Save Changes.

Column character set

A column inherits its character set from the table, so you do not typically need to set it manually. If you need to set it for a specific column, follow these steps:

  1. In the Edit Table Structure interface, click the Column Information tab.

    Select a character-type column, such as user_name. The Extended Properties section shows the current Character Set of the selected column.

  2. Click a character-type column to view its current character set.

    Note

    Character set encoding does not apply to non-character data types.

  3. Click the Character Set drop-down list and select utf8 or utf8mb4.

  4. Click Save Changes.