LuoZijun/vietnamese.html

## vietnamese.html
<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Vietnamese characters</title>
<style type="text/css">
:root {
    font-size: 16px;
}
.error { color: red;   }
.green { color: green; }
.warn  { color: Chocolate; }

main {
    columns: 14em;
    height: 100vh;
}

hr {
/*    padding-top: 16em;*/
}

table {
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    border-spacing: 0;
}
table, th, td {
    border: 1px solid black;
}
th, td {
    text-align: center;
    border-top-width: 0;
    border-left-width: 0;
    padding-top: 6px;
}
th:last-child, td:last-child { border-right-width: 0; }
tr:last-child td { border-bottom-width: 0; }
</style>
</head>

<body>

<p>
    <span class="warn">Chocolate Color</span>
    indicate that character may not good support in font.(e.g. glyphs look weird)
    <br />
    <span class="error">Red Color</span>
    indicate that character not support in font (or not full support).
    If it looks to render correctly, it's because the browser is using a different font.
</p>

<main>

<table style="font-family: 'Noto Sans Mono';">
    <caption>Noto Sans Mono</caption>

    <thead>
        <tr><th colspan='13'>Vietnamese vowels with Tone Marks</th></tr>
    </thead>

    <tbody>
        <tr><td colspan='13'>single Unicode character</td></tr>
        <!--
          ˋ ˊ
        A À Á Ạ Ả Ã  a à á ạ ả ã
        Ă Ằ Ắ Ặ Ẳ Ẵ  ă ằ ắ ặ ẳ ẵ
        Â Ầ Ấ Ậ Ẩ Ẫ  â ầ ấ ậ ẩ ẫ
        E È É Ẹ Ẻ Ẽ  e è é ẹ ẻ ẽ
        Ê Ề Ế Ệ Ể Ễ  ê ề ế ệ ể ễ
        I Ì Í Ị Ỉ Ĩ  i ì í ị ỉ ĩ
        O Ò Ó Ọ Ỏ Õ  o ò ó ọ ỏ õ
        Ô Ồ Ố Ộ Ổ Ỗ  ô ồ ố ộ ổ ỗ
        Ơ Ờ Ớ Ợ Ở Ỡ  ơ ờ ớ ợ ở ỡ
        U Ù Ú Ụ Ủ Ũ  u ù ú ụ ủ ũ
        Ư Ừ Ứ Ự Ử Ữ  ư ừ ứ ự ử ữ
        Y Ỳ Ý Ỵ Ỷ Ỹ  y ỳ ý ỵ ỷ ỹ
        -->
        <tr> <td> </td><td>ˋ</td><td>ˊ</td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td> </tr>
        <tr> <td>A</td><td>À</td><td>Á</td><td>Ạ</td><td>Ả</td><td>Ã</td><td> </td><td>a</td><td>à</td><td>á</td><td>ạ</td><td>ả</td><td class="warn">ã</td> </tr>
        <tr> <td>Ă</td><td>Ằ</td><td>Ắ</td><td>Ặ</td><td>Ẳ</td><td>Ẵ</td><td> </td><td>ă</td><td>ằ</td><td>ắ</td><td>ặ</td><td>ẳ</td><td>ẵ</td> </tr>
        <tr> <td>Â</td><td>Ầ</td><td>Ấ</td><td>Ậ</td><td>Ẩ</td><td>Ẫ</td><td> </td><td>â</td><td>ầ</td><td>ấ</td><td>ậ</td><td>ẩ</td><td>ẫ</td> </tr>
        <tr> <td>E</td><td>È</td><td>É</td><td>Ẹ</td><td>Ẻ</td><td>Ẽ</td><td> </td><td>e</td><td>è</td><td>é</td><td>ẹ</td><td>ẻ</td><td class="warn">ẽ</td> </tr>
        <tr> <td>Ê</td><td>Ề</td><td>Ế</td><td>Ệ</td><td>Ể</td><td>Ễ</td><td> </td><td>ê</td><td>ề</td><td>ế</td><td>ệ</td><td>ể</td><td>ễ</td> </tr>
        <tr class="warn"> <td>I</td><td>Ì</td><td>Í</td><td>Ị</td><td>Ỉ</td><td>Ĩ</td><td> </td><td>i</td><td>ì</td><td>í</td><td>ị</td><td>ỉ</td><td>ĩ</td> </tr>
        <tr> <td>O</td><td>Ò</td><td>Ó</td><td>Ọ</td><td>Ỏ</td><td>Õ</td><td> </td><td>o</td><td>ò</td><td>ó</td><td>ọ</td><td>ỏ</td><td class="warn">õ</td> </tr>
        <tr> <td>Ô</td><td>Ồ</td><td>Ố</td><td>Ộ</td><td>Ổ</td><td>Ỗ</td><td> </td><td>ô</td><td>ồ</td><td>ố</td><td>ộ</td><td>ổ</td><td>ỗ</td> </tr>
        <tr> <td>Ơ</td><td>Ờ</td><td>Ớ</td><td>Ợ</td><td>Ở</td><td>Ỡ</td><td> </td><td>ơ</td><td>ờ</td><td>ớ</td><td>ợ</td><td>ở</td><td class="warn">ỡ</td> </tr>
        <tr> <td>U</td><td>Ù</td><td>Ú</td><td>Ụ</td><td>Ủ</td><td>Ũ</td><td> </td><td>u</td><td>ù</td><td>ú</td><td>ụ</td><td>ủ</td><td class="warn">ũ</td> </tr>
        <tr> <td>Ư</td><td>Ừ</td><td>Ứ</td><td>Ự</td><td>Ử</td><td>Ữ</td><td> </td><td>ư</td><td>ừ</td><td>ứ</td><td>ự</td><td>ử</td><td class="warn">ữ</td> </tr>
        <tr> <td>Y</td><td>Ỳ</td><td>Ý</td><td>Ỵ</td><td>Ỷ</td><td>Ỹ</td><td> </td><td>y</td><td>ỳ</td><td>ý</td><td>ỵ</td><td>ỷ</td><td class="warn">ỹ</td> </tr>

        <tr><td colspan='13'>Combining Diacritical Marks</td></tr>
        <!--
        ◌ ◌̀ ◌́ ◌̣ ◌̉ ◌̃
        A À Á Ạ Ả Ã  a à á ạ ả ã
        Ă Ằ Ắ Ặ Ẳ Ẵ  ă ằ ắ ặ ẳ ẵ
        Â Ầ Ấ Ậ Ẩ Ẫ  â ầ ấ ậ ẩ ẫ
        E È É Ẹ Ẻ Ẽ  e è é ẹ ẻ ẽ
        Ê Ề Ế Ệ Ể Ễ  ê ề ế ệ ể ễ
        I Ì Í Ị Ỉ Ĩ  i ì í ị ỉ ĩ
        O Ò Ó Ọ Ỏ Õ  o ò ó ọ ỏ õ
        Ô Ồ Ố Ộ Ổ Ỗ  ô ồ ố ộ ổ ỗ
        Ơ Ờ Ớ Ợ Ở Ỡ  ơ ờ ớ ợ ở ỡ
        U Ù Ú Ụ Ủ Ũ  u ù ú ụ ủ ũ
        Ư Ừ Ứ Ự Ử Ữ  ư ừ ứ ự ử ữ
        Y Ỳ Ý Ỵ Ỷ Ỹ  y ỳ ý ỵ ỷ ỹ
        -->
        <tr> <td>◌</td><td>◌̀</td><td>◌́</td><td>◌̣</td><td>◌̉</td><td>◌̃</td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td> </tr>
        <tr> <td>A</td><td>À</td><td>Á</td><td>Ạ</td><td>Ả</td><td>Ã</td><td> </td><td>a</td><td>à</td><td>á</td><td>ạ</td><td>ả</td><td class="warn">ã</td> </tr>
        <tr> <td>Ă</td><td>Ằ</td><td>Ắ</td><td>Ặ</td><td>Ẳ</td><td>Ẵ</td><td> </td><td>ă</td><td>ằ</td><td>ắ</td><td>ặ</td><td>ẳ</td><td>ẵ</td> </tr>
        <tr> <td>Â</td><td>Ầ</td><td>Ấ</td><td>Ậ</td><td>Ẩ</td><td>Ẫ</td><td> </td><td>â</td><td>ầ</td><td>ấ</td><td>ậ</td><td>ẩ</td><td>ẫ</td> </tr>
        <tr> <td>E</td><td>È</td><td>É</td><td>Ẹ</td><td>Ẻ</td><td>Ẽ</td><td> </td><td>e</td><td>è</td><td>é</td><td>ẹ</td><td>ẻ</td><td class="warn">ẽ</td> </tr>
        <tr> <td>Ê</td><td>Ề</td><td>Ế</td><td>Ệ</td><td>Ể</td><td>Ễ</td><td> </td><td>ê</td><td>ề</td><td>ế</td><td>ệ</td><td>ể</td><td>ễ</td> </tr>
        <tr class="warn"> <td>I</td><td>Ì</td><td>Í</td><td>Ị</td><td>Ỉ</td><td>Ĩ</td><td> </td><td>i</td><td>ì</td><td>í</td><td>ị</td><td>ỉ</td><td>ĩ</td> </tr>
        <tr> <td>O</td><td>Ò</td><td>Ó</td><td>Ọ</td><td>Ỏ</td><td>Õ</td><td> </td><td>o</td><td>ò</td><td>ó</td><td>ọ</td><td>ỏ</td><td class="warn">õ</td> </tr>
        <tr> <td>Ô</td><td>Ồ</td><td>Ố</td><td>Ộ</td><td>Ổ</td><td>Ỗ</td><td> </td><td>ô</td><td>ồ</td><td>ố</td><td>ộ</td><td>ổ</td><td>ỗ</td> </tr>
        <tr> <td>Ơ</td><td>Ờ</td><td>Ớ</td><td>Ợ</td><td>Ở</td><td>Ỡ</td><td> </td><td>ơ</td><td>ờ</td><td>ớ</td><td>ợ</td><td>ở</td><td class="warn">ỡ</td> </tr>
        <tr> <td>U</td><td>Ù</td><td>Ú</td><td>Ụ</td><td>Ủ</td><td>Ũ</td><td> </td><td>u</td><td>ù</td><td>ú</td><td>ụ</td><td>ủ</td><td class="warn">ũ</td> </tr>
        <tr> <td>Ư</td><td>Ừ</td><td>Ứ</td><td>Ự</td><td>Ử</td><td>Ữ</td><td> </td><td>ư</td><td>ừ</td><td>ứ</td><td>ự</td><td>ử</td><td class="warn">ữ</td> </tr>
        <tr> <td>Y</td><td>Ỳ</td><td>Ý</td><td>Ỵ</td><td>Ỷ</td><td>Ỹ</td><td> </td><td>y</td><td>ỳ</td><td>ý</td><td>ỵ</td><td>ỷ</td><td class="warn">ỹ</td> </tr>

        <tr><td colspan='13'>Other Character</td></tr>
        <tr> <td>Đ</td> </tr>
        <tr> <td>đ</td> </tr>
    </tbody>
</table>


<table style="font-family: 'Source Serif 4';">
    <caption>Source Serif 4</caption>

    <thead>
        <tr><th colspan='13'>Vietnamese vowels with Tone Marks</th></tr>
    </thead>

    <tbody>
        <tr><td colspan='13'>single Unicode character</td></tr>
        <!--
          ˋ ˊ
        A À Á Ạ Ả Ã  a à á ạ ả ã
        Ă Ằ Ắ Ặ Ẳ Ẵ  ă ằ ắ ặ ẳ ẵ
        Â Ầ Ấ Ậ Ẩ Ẫ  â ầ ấ ậ ẩ ẫ
        E È É Ẹ Ẻ Ẽ  e è é ẹ ẻ ẽ
        Ê Ề Ế Ệ Ể Ễ  ê ề ế ệ ể ễ
        I Ì Í Ị Ỉ Ĩ  i ì í ị ỉ ĩ
        O Ò Ó Ọ Ỏ Õ  o ò ó ọ ỏ õ
        Ô Ồ Ố Ộ Ổ Ỗ  ô ồ ố ộ ổ ỗ
        Ơ Ờ Ớ Ợ Ở Ỡ  ơ ờ ớ ợ ở ỡ
        U Ù Ú Ụ Ủ Ũ  u ù ú ụ ủ ũ
        Ư Ừ Ứ Ự Ử Ữ  ư ừ ứ ự ử ữ
        Y Ỳ Ý Ỵ Ỷ Ỹ  y ỳ ý ỵ ỷ ỹ
        -->
        <tr> <td> </td><td>ˋ</td><td>ˊ</td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td> </tr>
        <tr> <td>A</td><td>À</td><td>Á</td><td>Ạ</td><td class="warn">Ả</td><td>Ã</td><td> </td><td>a</td><td>à</td><td>á</td><td>ạ</td><td class="warn">ả</td><td>ã</td> </tr>
        <tr> <td>Ă</td><td>Ằ</td><td>Ắ</td><td>Ặ</td><td class="warn">Ẳ</td><td>Ẵ</td><td> </td><td>ă</td><td>ằ</td><td>ắ</td><td>ặ</td><td class="warn">ẳ</td><td>ẵ</td> </tr>
        <tr> <td>Â</td><td class="warn">Ầ</td><td class="warn">Ấ</td><td>Ậ</td><td class="warn">Ẩ</td><td>Ẫ</td><td> </td><td>â</td><td class="warn">ầ</td><td class="warn">ấ</td><td>ậ</td><td class="warn">ẩ</td><td>ẫ</td> </tr>
        <tr> <td>E</td><td>È</td><td>É</td><td>Ẹ</td><td class="warn">Ẻ</td><td>Ẽ</td><td> </td><td>e</td><td>è</td><td>é</td><td>ẹ</td><td class="warn">ẻ</td><td>ẽ</td> </tr>
        <tr> <td>Ê</td><td class="warn">Ề</td><td class="warn">Ế</td><td>Ệ</td><td class="warn">Ể</td><td>Ễ</td><td> </td><td>ê</td><td class="warn">ề</td><td class="warn">ế</td><td>ệ</td><td class="warn">ể</td><td>ễ</td> </tr>
        <tr> <td>I</td><td>Ì</td><td>Í</td><td>Ị</td><td class="warn">Ỉ</td><td>Ĩ</td><td> </td><td>i</td><td>ì</td><td>í</td><td>ị</td><td class="warn">ỉ</td><td>ĩ</td> </tr>
        <tr> <td>O</td><td>Ò</td><td>Ó</td><td>Ọ</td><td class="warn">Ỏ</td><td>Õ</td><td> </td><td>o</td><td>ò</td><td>ó</td><td>ọ</td><td class="warn">ỏ</td><td>õ</td> </tr>
        <tr> <td>Ô</td><td class="warn">Ồ</td><td class="warn">Ố</td><td>Ộ</td><td class="warn">Ổ</td><td>Ỗ</td><td> </td><td>ô</td><td class="warn">ồ</td><td class="warn">ố</td><td>ộ</td><td class="warn">ổ</td><td>ỗ</td> </tr>
        <tr> <td>Ơ</td><td>Ờ</td><td>Ớ</td><td>Ợ</td><td class="warn">Ở</td><td>Ỡ</td><td> </td><td>ơ</td><td>ờ</td><td>ớ</td><td>ợ</td><td class="warn">ở</td><td>ỡ</td> </tr>
        <tr> <td>U</td><td>Ù</td><td>Ú</td><td>Ụ</td><td class="warn">Ủ</td><td>Ũ</td><td> </td><td>u</td><td>ù</td><td>ú</td><td>ụ</td><td class="warn">ủ</td><td>ũ</td> </tr>
        <tr> <td>Ư</td><td>Ừ</td><td>Ứ</td><td>Ự</td><td class="warn">Ử</td><td>Ữ</td><td> </td><td>ư</td><td>ừ</td><td>ứ</td><td>ự</td><td class="warn">ử</td><td>ữ</td> </tr>
        <tr> <td>Y</td><td>Ỳ</td><td>Ý</td><td>Ỵ</td><td class="warn">Ỷ</td><td>Ỹ</td><td> </td><td>y</td><td>ỳ</td><td>ý</td><td>ỵ</td><td class="warn">ỷ</td><td>ỹ</td> </tr>

        <tr><td colspan='13'>Combining Diacritical Marks</td></tr>
        <!--
        ◌ ◌̀ ◌́ ◌̣ ◌̉ ◌̃
        A À Á Ạ Ả Ã  a à á ạ ả ã
        Ă Ằ Ắ Ặ Ẳ Ẵ  ă ằ ắ ặ ẳ ẵ
        Â Ầ Ấ Ậ Ẩ Ẫ  â ầ ấ ậ ẩ ẫ
        E È É Ẹ Ẻ Ẽ  e è é ẹ ẻ ẽ
        Ê Ề Ế Ệ Ể Ễ  ê ề ế ệ ể ễ
        I Ì Í Ị Ỉ Ĩ  i ì í ị ỉ ĩ
        O Ò Ó Ọ Ỏ Õ  o ò ó ọ ỏ õ
        Ô Ồ Ố Ộ Ổ Ỗ  ô ồ ố ộ ổ ỗ
        Ơ Ờ Ớ Ợ Ở Ỡ  ơ ờ ớ ợ ở ỡ
        U Ù Ú Ụ Ủ Ũ  u ù ú ụ ủ ũ
        Ư Ừ Ứ Ự Ử Ữ  ư ừ ứ ự ử ữ
        Y Ỳ Ý Ỵ Ỷ Ỹ  y ỳ ý ỵ ỷ ỹ
        -->
        <tr class="error"> <td>◌</td><td>◌̀</td><td>◌́</td><td>◌̣</td><td>◌̉</td><td>◌̃</td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td> </tr>
        <tr> <td>A</td><td>À</td><td>Á</td><td>Ạ</td><td class="warn">Ả</td><td>Ã</td><td> </td><td>a</td><td>à</td><td>á</td><td>ạ</td><td class="warn">ả</td><td>ã</td> </tr>
        <tr> <td>Ă</td><td>Ằ</td><td>Ắ</td><td>Ặ</td><td class="warn">Ẳ</td><td>Ẵ</td><td> </td><td>ă</td><td>ằ</td><td>ắ</td><td>ặ</td><td class="warn">ẳ</td><td>ẵ</td> </tr>
        <tr> <td>Â</td><td class="warn">Ầ</td><td class="warn">Ấ</td><td>Ậ</td><td class="warn">Ẩ</td><td>Ẫ</td><td> </td><td>â</td><td class="warn">ầ</td><td class="warn">ấ</td><td>ậ</td><td class="warn">ẩ</td><td>ẫ</td> </tr>
        <tr> <td>E</td><td>È</td><td>É</td><td>Ẹ</td><td class="warn">Ẻ</td><td>Ẽ</td><td> </td><td>e</td><td>è</td><td>é</td><td>ẹ</td><td class="warn">ẻ</td><td>ẽ</td> </tr>
        <tr> <td>Ê</td><td class="warn">Ề</td><td class="warn">Ế</td><td>Ệ</td><td class="warn">Ể</td><td>Ễ</td><td> </td><td>ê</td><td class="warn">ề</td><td class="warn">ế</td><td>ệ</td><td class="warn">ể</td><td>ễ</td> </tr>
        <tr> <td>I</td><td>Ì</td><td>Í</td><td>Ị</td><td class="warn">Ỉ</td><td>Ĩ</td><td> </td><td>i</td><td>ì</td><td>í</td><td>ị</td><td class="warn">ỉ</td><td>ĩ</td> </tr>
        <tr> <td>O</td><td>Ò</td><td>Ó</td><td>Ọ</td><td class="warn">Ỏ</td><td>Õ</td><td> </td><td>o</td><td>ò</td><td>ó</td><td>ọ</td><td class="warn">ỏ</td><td>õ</td> </tr>
        <tr> <td>Ô</td><td class="warn">Ồ</td><td class="warn">Ố</td><td>Ộ</td><td class="warn">Ổ</td><td>Ỗ</td><td> </td><td>ô</td><td class="warn">ồ</td><td class="warn">ố</td><td>ộ</td><td class="warn">ổ</td><td>ỗ</td> </tr>
        <tr> <td>Ơ</td><td>Ờ</td><td>Ớ</td><td>Ợ</td><td class="warn">Ở</td><td>Ỡ</td><td> </td><td>ơ</td><td>ờ</td><td>ớ</td><td>ợ</td><td class="warn">ở</td><td>ỡ</td> </tr>
        <tr> <td>U</td><td>Ù</td><td>Ú</td><td>Ụ</td><td class="warn">Ủ</td><td>Ũ</td><td> </td><td>u</td><td>ù</td><td>ú</td><td>ụ</td><td class="warn">ủ</td><td>ũ</td> </tr>
        <tr> <td>Ư</td><td>Ừ</td><td>Ứ</td><td>Ự</td><td class="warn">Ử</td><td>Ữ</td><td> </td><td>ư</td><td>ừ</td><td>ứ</td><td>ự</td><td class="warn">ử</td><td>ữ</td> </tr>
        <tr> <td>Y</td><td>Ỳ</td><td>Ý</td><td>Ỵ</td><td class="warn">Ỷ</td><td>Ỹ</td><td> </td><td>y</td><td>ỳ</td><td>ý</td><td>ỵ</td><td class="warn">ỷ</td><td>ỹ</td> </tr>

        <tr><td colspan='13'>Other Character</td></tr>
        <tr> <td>Đ</td> </tr>
        <tr> <td>đ</td> </tr>
    </tbody>
</table>

<table style="font-family: 'Source Sans 3';">
    <caption>Source Sans 3</caption>

    <thead>
        <tr><th colspan='13'>Vietnamese vowels with Tone Marks</th></tr>
    </thead>

    <tbody>
        <tr><td colspan='13'>single Unicode character</td></tr>
        <!--
          ˋ ˊ
        A À Á Ạ Ả Ã  a à á ạ ả ã
        Ă Ằ Ắ Ặ Ẳ Ẵ  ă ằ ắ ặ ẳ ẵ
        Â Ầ Ấ Ậ Ẩ Ẫ  â ầ ấ ậ ẩ ẫ
        E È É Ẹ Ẻ Ẽ  e è é ẹ ẻ ẽ
        Ê Ề Ế Ệ Ể Ễ  ê ề ế ệ ể ễ
        I Ì Í Ị Ỉ Ĩ  i ì í ị ỉ ĩ
        O Ò Ó Ọ Ỏ Õ  o ò ó ọ ỏ õ
        Ô Ồ Ố Ộ Ổ Ỗ  ô ồ ố ộ ổ ỗ
        Ơ Ờ Ớ Ợ Ở Ỡ  ơ ờ ớ ợ ở ỡ
        U Ù Ú Ụ Ủ Ũ  u ù ú ụ ủ ũ
        Ư Ừ Ứ Ự Ử Ữ  ư ừ ứ ự ử ữ
        Y Ỳ Ý Ỵ Ỷ Ỹ  y ỳ ý ỵ ỷ ỹ
        -->
        <tr> <td> </td><td>ˋ</td><td>ˊ</td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td> </tr>
        <tr> <td>A</td><td>À</td><td>Á</td><td>Ạ</td><td class="warn">Ả</td><td>Ã</td><td> </td><td>a</td><td>à</td><td>á</td><td>ạ</td><td class="warn">ả</td><td>ã</td> </tr>
        <tr> <td>Ă</td><td>Ằ</td><td>Ắ</td><td>Ặ</td><td class="warn">Ẳ</td><td>Ẵ</td><td> </td><td>ă</td><td>ằ</td><td>ắ</td><td>ặ</td><td class="warn">ẳ</td><td>ẵ</td> </tr>
        <tr> <td>Â</td><td class="warn">Ầ</td><td class="warn">Ấ</td><td>Ậ</td><td class="warn">Ẩ</td><td>Ẫ</td><td> </td><td>â</td><td class="warn">ầ</td><td class="warn">ấ</td><td>ậ</td><td class="warn">ẩ</td><td>ẫ</td> </tr>
        <tr> <td>E</td><td>È</td><td>É</td><td>Ẹ</td><td class="warn">Ẻ</td><td>Ẽ</td><td> </td><td>e</td><td>è</td><td>é</td><td>ẹ</td><td class="warn">ẻ</td><td>ẽ</td> </tr>
        <tr> <td>Ê</td><td class="warn">Ề</td><td class="warn">Ế</td><td>Ệ</td><td class="warn">Ể</td><td>Ễ</td><td> </td><td>ê</td><td class="warn">ề</td><td class="warn">ế</td><td>ệ</td><td class="warn">ể</td><td>ễ</td> </tr>
        <tr> <td>I</td><td>Ì</td><td>Í</td><td>Ị</td><td class="warn">Ỉ</td><td>Ĩ</td><td> </td><td>i</td><td>ì</td><td>í</td><td>ị</td><td class="warn">ỉ</td><td>ĩ</td> </tr>
        <tr> <td>O</td><td>Ò</td><td>Ó</td><td>Ọ</td><td class="warn">Ỏ</td><td>Õ</td><td> </td><td>o</td><td>ò</td><td>ó</td><td>ọ</td><td class="warn">ỏ</td><td>õ</td> </tr>
        <tr> <td>Ô</td><td class="warn">Ồ</td><td class="warn">Ố</td><td>Ộ</td><td class="warn">Ổ</td><td>Ỗ</td><td> </td><td>ô</td><td class="warn">ồ</td><td class="warn">ố</td><td>ộ</td><td class="warn">ổ</td><td>ỗ</td> </tr>
        <tr> <td>Ơ</td><td>Ờ</td><td>Ớ</td><td>Ợ</td><td class="warn">Ở</td><td>Ỡ</td><td> </td><td>ơ</td><td>ờ</td><td>ớ</td><td>ợ</td><td class="warn">ở</td><td>ỡ</td> </tr>
        <tr> <td>U</td><td>Ù</td><td>Ú</td><td>Ụ</td><td class="warn">Ủ</td><td>Ũ</td><td> </td><td>u</td><td>ù</td><td>ú</td><td>ụ</td><td class="warn">ủ</td><td>ũ</td> </tr>
        <tr> <td>Ư</td><td>Ừ</td><td>Ứ</td><td>Ự</td><td class="warn">Ử</td><td>Ữ</td><td> </td><td>ư</td><td>ừ</td><td>ứ</td><td>ự</td><td class="warn">ử</td><td>ữ</td> </tr>
        <tr> <td>Y</td><td>Ỳ</td><td>Ý</td><td>Ỵ</td><td class="warn">Ỷ</td><td>Ỹ</td><td> </td><td>y</td><td>ỳ</td><td>ý</td><td>ỵ</td><td class="warn">ỷ</td><td>ỹ</td> </tr>

        <tr><td colspan='13'>Combining Diacritical Marks</td></tr>
        <!--
        ◌ ◌̀ ◌́ ◌̣ ◌̉ ◌̃
        A À Á Ạ Ả Ã  a à á ạ ả ã
        Ă Ằ Ắ Ặ Ẳ Ẵ  ă ằ ắ ặ ẳ ẵ
        Â Ầ Ấ Ậ Ẩ Ẫ  â ầ ấ ậ ẩ ẫ
        E È É Ẹ Ẻ Ẽ  e è é ẹ ẻ ẽ
        Ê Ề Ế Ệ Ể Ễ  ê ề ế ệ ể ễ
        I Ì Í Ị Ỉ Ĩ  i ì í ị ỉ ĩ
        O Ò Ó Ọ Ỏ Õ  o ò ó ọ ỏ õ
        Ô Ồ Ố Ộ Ổ Ỗ  ô ồ ố ộ ổ ỗ
        Ơ Ờ Ớ Ợ Ở Ỡ  ơ ờ ớ ợ ở ỡ
        U Ù Ú Ụ Ủ Ũ  u ù ú ụ ủ ũ
        Ư Ừ Ứ Ự Ử Ữ  ư ừ ứ ự ử ữ
        Y Ỳ Ý Ỵ Ỷ Ỹ  y ỳ ý ỵ ỷ ỹ
        -->
        <tr> <td>◌</td><td>◌̀</td><td>◌́</td><td>◌̣</td><td>◌̉</td><td>◌̃</td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td> </tr>
        <tr> <td>A</td><td>À</td><td>Á</td><td>Ạ</td><td class="warn">Ả</td><td>Ã</td><td> </td><td>a</td><td>à</td><td>á</td><td>ạ</td><td class="warn">ả</td><td>ã</td> </tr>
        <tr> <td>Ă</td><td>Ằ</td><td>Ắ</td><td>Ặ</td><td class="warn">Ẳ</td><td>Ẵ</td><td> </td><td>ă</td><td>ằ</td><td>ắ</td><td>ặ</td><td class="warn">ẳ</td><td>ẵ</td> </tr>
        <tr> <td>Â</td><td class="warn">Ầ</td><td class="warn">Ấ</td><td>Ậ</td><td class="warn">Ẩ</td><td>Ẫ</td><td> </td><td>â</td><td class="warn">ầ</td><td class="warn">ấ</td><td>ậ</td><td class="warn">ẩ</td><td>ẫ</td> </tr>
        <tr> <td>E</td><td>È</td><td>É</td><td>Ẹ</td><td class="warn">Ẻ</td><td>Ẽ</td><td> </td><td>e</td><td>è</td><td>é</td><td>ẹ</td><td class="warn">ẻ</td><td>ẽ</td> </tr>
        <tr> <td>Ê</td><td class="warn">Ề</td><td class="warn">Ế</td><td>Ệ</td><td class="warn">Ể</td><td>Ễ</td><td> </td><td>ê</td><td class="warn">ề</td><td class="warn">ế</td><td>ệ</td><td class="warn">ể</td><td>ễ</td> </tr>
        <tr> <td>I</td><td>Ì</td><td>Í</td><td>Ị</td><td class="warn">Ỉ</td><td>Ĩ</td><td> </td><td>i</td><td>ì</td><td>í</td><td>ị</td><td class="warn">ỉ</td><td>ĩ</td> </tr>
        <tr> <td>O</td><td>Ò</td><td>Ó</td><td>Ọ</td><td class="warn">Ỏ</td><td>Õ</td><td> </td><td>o</td><td>ò</td><td>ó</td><td>ọ</td><td class="warn">ỏ</td><td>õ</td> </tr>
        <tr> <td>Ô</td><td class="warn">Ồ</td><td class="warn">Ố</td><td>Ộ</td><td class="warn">Ổ</td><td>Ỗ</td><td> </td><td>ô</td><td class="warn">ồ</td><td class="warn">ố</td><td>ộ</td><td class="warn">ổ</td><td>ỗ</td> </tr>
        <tr> <td>Ơ</td><td>Ờ</td><td>Ớ</td><td>Ợ</td><td class="warn">Ở</td><td>Ỡ</td><td> </td><td>ơ</td><td>ờ</td><td>ớ</td><td>ợ</td><td class="warn">ở</td><td>ỡ</td> </tr>
        <tr> <td>U</td><td>Ù</td><td>Ú</td><td>Ụ</td><td class="warn">Ủ</td><td>Ũ</td><td> </td><td>u</td><td>ù</td><td>ú</td><td>ụ</td><td class="warn">ủ</td><td>ũ</td> </tr>
        <tr> <td>Ư</td><td>Ừ</td><td>Ứ</td><td>Ự</td><td class="warn">Ử</td><td>Ữ</td><td> </td><td>ư</td><td>ừ</td><td>ứ</td><td>ự</td><td class="warn">ử</td><td>ữ</td> </tr>
        <tr> <td>Y</td><td>Ỳ</td><td>Ý</td><td>Ỵ</td><td class="warn">Ỷ</td><td>Ỹ</td><td> </td><td>y</td><td>ỳ</td><td>ý</td><td>ỵ</td><td class="warn">ỷ</td><td>ỹ</td> </tr>

        <tr><td colspan='13'>Other Character</td></tr>
        <tr> <td>Đ</td> </tr>
        <tr> <td>đ</td> </tr>
    </tbody>
</table>

<table style="font-family: 'Source Code Pro';">
    <caption>Source Code Pro</caption>

    <thead>
        <tr><th colspan='13'>Vietnamese vowels with Tone Marks</th></tr>
    </thead>

    <tbody>
        <tr><td colspan='13'>single Unicode character</td></tr>
        <!--
          ˋ ˊ
        A À Á Ạ Ả Ã  a à á ạ ả ã
        Ă Ằ Ắ Ặ Ẳ Ẵ  ă ằ ắ ặ ẳ ẵ
        Â Ầ Ấ Ậ Ẩ Ẫ  â ầ ấ ậ ẩ ẫ
        E È É Ẹ Ẻ Ẽ  e è é ẹ ẻ ẽ
        Ê Ề Ế Ệ Ể Ễ  ê ề ế ệ ể ễ
        I Ì Í Ị Ỉ Ĩ  i ì í ị ỉ ĩ
        O Ò Ó Ọ Ỏ Õ  o ò ó ọ ỏ õ
        Ô Ồ Ố Ộ Ổ Ỗ  ô ồ ố ộ ổ ỗ
        Ơ Ờ Ớ Ợ Ở Ỡ  ơ ờ ớ ợ ở ỡ
        U Ù Ú Ụ Ủ Ũ  u ù ú ụ ủ ũ
        Ư Ừ Ứ Ự Ử Ữ  ư ừ ứ ự ử ữ
        Y Ỳ Ý Ỵ Ỷ Ỹ  y ỳ ý ỵ ỷ ỹ
        -->
        <tr> <td> </td><td>ˋ</td><td>ˊ</td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td> </tr>
        <tr> <td>A</td><td>À</td><td>Á</td><td>Ạ</td><td class="warn">Ả</td><td>Ã</td><td> </td><td>a</td><td>à</td><td>á</td><td>ạ</td><td class="warn">ả</td><td>ã</td> </tr>
        <tr> <td>Ă</td><td>Ằ</td><td>Ắ</td><td>Ặ</td><td class="warn">Ẳ</td><td>Ẵ</td><td> </td><td>ă</td><td>ằ</td><td>ắ</td><td>ặ</td><td class="warn">ẳ</td><td>ẵ</td> </tr>
        <tr> <td>Â</td><td class="warn">Ầ</td><td class="warn">Ấ</td><td>Ậ</td><td class="warn">Ẩ</td><td>Ẫ</td><td> </td><td>â</td><td class="warn">ầ</td><td class="warn">ấ</td><td>ậ</td><td class="warn">ẩ</td><td>ẫ</td> </tr>
        <tr> <td>E</td><td>È</td><td>É</td><td>Ẹ</td><td class="warn">Ẻ</td><td>Ẽ</td><td> </td><td>e</td><td>è</td><td>é</td><td>ẹ</td><td class="warn">ẻ</td><td>ẽ</td> </tr>
        <tr> <td>Ê</td><td class="warn">Ề</td><td class="warn">Ế</td><td>Ệ</td><td class="warn">Ể</td><td>Ễ</td><td> </td><td>ê</td><td class="warn">ề</td><td class="warn">ế</td><td>ệ</td><td class="warn">ể</td><td>ễ</td> </tr>
        <tr class="warn"> <td>I</td><td>Ì</td><td>Í</td><td>Ị</td><td class="warn">Ỉ</td><td>Ĩ</td><td> </td><td>i</td><td>ì</td><td>í</td><td>ị</td><td class="warn">ỉ</td><td>ĩ</td> </tr>
        <tr> <td>O</td><td>Ò</td><td>Ó</td><td>Ọ</td><td class="warn">Ỏ</td><td>Õ</td><td> </td><td>o</td><td>ò</td><td>ó</td><td>ọ</td><td class="warn">ỏ</td><td>õ</td> </tr>
        <tr> <td>Ô</td><td class="warn">Ồ</td><td class="warn">Ố</td><td>Ộ</td><td class="warn">Ổ</td><td>Ỗ</td><td> </td><td>ô</td><td class="warn">ồ</td><td class="warn">ố</td><td>ộ</td><td class="warn">ổ</td><td>ỗ</td> </tr>
        <tr> <td>Ơ</td><td>Ờ</td><td>Ớ</td><td>Ợ</td><td class="warn">Ở</td><td>Ỡ</td><td> </td><td>ơ</td><td>ờ</td><td>ớ</td><td>ợ</td><td class="warn">ở</td><td>ỡ</td> </tr>
        <tr> <td>U</td><td>Ù</td><td>Ú</td><td>Ụ</td><td class="warn">Ủ</td><td>Ũ</td><td> </td><td>u</td><td>ù</td><td>ú</td><td>ụ</td><td class="warn">ủ</td><td>ũ</td> </tr>
        <tr> <td>Ư</td><td>Ừ</td><td>Ứ</td><td>Ự</td><td class="warn">Ử</td><td>Ữ</td><td> </td><td>ư</td><td>ừ</td><td>ứ</td><td>ự</td><td class="warn">ử</td><td>ữ</td> </tr>
        <tr> <td>Y</td><td>Ỳ</td><td>Ý</td><td>Ỵ</td><td class="warn">Ỷ</td><td>Ỹ</td><td> </td><td>y</td><td>ỳ</td><td>ý</td><td>ỵ</td><td class="warn">ỷ</td><td>ỹ</td> </tr>

        <tr><td colspan='13'>Combining Diacritical Marks</td></tr>
        <!--
        ◌ ◌̀ ◌́ ◌̣ ◌̉ ◌̃
        A À Á Ạ Ả Ã  a à á ạ ả ã
        Ă Ằ Ắ Ặ Ẳ Ẵ  ă ằ ắ ặ ẳ ẵ
        Â Ầ Ấ Ậ Ẩ Ẫ  â ầ ấ ậ ẩ ẫ
        E È É Ẹ Ẻ Ẽ  e è é ẹ ẻ ẽ
        Ê Ề Ế Ệ Ể Ễ  ê ề ế ệ ể ễ
        I Ì Í Ị Ỉ Ĩ  i ì í ị ỉ ĩ
        O Ò Ó Ọ Ỏ Õ  o ò ó ọ ỏ õ
        Ô Ồ Ố Ộ Ổ Ỗ  ô ồ ố ộ ổ ỗ
        Ơ Ờ Ớ Ợ Ở Ỡ  ơ ờ ớ ợ ở ỡ
        U Ù Ú Ụ Ủ Ũ  u ù ú ụ ủ ũ
        Ư Ừ Ứ Ự Ử Ữ  ư ừ ứ ự ử ữ
        Y Ỳ Ý Ỵ Ỷ Ỹ  y ỳ ý ỵ ỷ ỹ
        -->
        <tr> <td>◌</td><td>◌̀</td><td>◌́</td><td>◌̣</td><td>◌̉</td><td>◌̃</td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td> </tr>
        <tr> <td>A</td><td>À</td><td>Á</td><td>Ạ</td><td class="warn">Ả</td><td>Ã</td><td> </td><td>a</td><td>à</td><td>á</td><td>ạ</td><td class="warn">ả</td><td>ã</td> </tr>
        <tr> <td>Ă</td><td>Ằ</td><td>Ắ</td><td>Ặ</td><td class="warn">Ẳ</td><td>Ẵ</td><td> </td><td>ă</td><td>ằ</td><td>ắ</td><td>ặ</td><td class="warn">ẳ</td><td>ẵ</td> </tr>
        <tr> <td>Â</td><td class="warn">Ầ</td><td class="warn">Ấ</td><td>Ậ</td><td class="warn">Ẩ</td><td>Ẫ</td><td> </td><td>â</td><td class="warn">ầ</td><td class="warn">ấ</td><td>ậ</td><td class="warn">ẩ</td><td>ẫ</td> </tr>
        <tr> <td>E</td><td>È</td><td>É</td><td>Ẹ</td><td class="warn">Ẻ</td><td>Ẽ</td><td> </td><td>e</td><td>è</td><td>é</td><td>ẹ</td><td class="warn">ẻ</td><td>ẽ</td> </tr>
        <tr> <td>Ê</td><td class="warn">Ề</td><td class="warn">Ế</td><td>Ệ</td><td class="warn">Ể</td><td>Ễ</td><td> </td><td>ê</td><td class="warn">ề</td><td class="warn">ế</td><td>ệ</td><td class="warn">ể</td><td>ễ</td> </tr>
        <tr> <td class="warn">I</td><td class="warn">Ì</td><td class="warn">Í</td><td class="warn">Ị</td><td class="warn">Ỉ</td><td class="warn">Ĩ</td><td> </td><td class="warn">i</td><td class="warn">ì</td><td class="warn">í</td><td class="warn">ị</td><td class="warn">ỉ</td><td class="warn">ĩ</td> </tr>
        <tr> <td>O</td><td>Ò</td><td>Ó</td><td>Ọ</td><td class="warn">Ỏ</td><td>Õ</td><td> </td><td>o</td><td>ò</td><td>ó</td><td>ọ</td><td class="warn">ỏ</td><td>õ</td> </tr>
        <tr> <td>Ô</td><td class="warn">Ồ</td><td class="warn">Ố</td><td>Ộ</td><td class="warn">Ổ</td><td>Ỗ</td><td> </td><td>ô</td><td class="warn">ồ</td><td class="warn">ố</td><td>ộ</td><td class="warn">ổ</td><td>ỗ</td> </tr>
        <tr> <td>Ơ</td><td>Ờ</td><td>Ớ</td><td>Ợ</td><td class="warn">Ở</td><td>Ỡ</td><td> </td><td>ơ</td><td>ờ</td><td>ớ</td><td>ợ</td><td class="warn">ở</td><td>ỡ</td> </tr>
        <tr> <td>U</td><td>Ù</td><td>Ú</td><td>Ụ</td><td class="warn">Ủ</td><td>Ũ</td><td> </td><td>u</td><td>ù</td><td>ú</td><td>ụ</td><td class="warn">ủ</td><td>ũ</td> </tr>
        <tr> <td>Ư</td><td>Ừ</td><td>Ứ</td><td>Ự</td><td class="warn">Ử</td><td>Ữ</td><td> </td><td>ư</td><td>ừ</td><td>ứ</td><td>ự</td><td class="warn">ử</td><td>ữ</td> </tr>
        <tr> <td>Y</td><td>Ỳ</td><td>Ý</td><td>Ỵ</td><td class="warn">Ỷ</td><td>Ỹ</td><td> </td><td>y</td><td>ỳ</td><td>ý</td><td>ỵ</td><td class="warn">ỷ</td><td>ỹ</td> </tr>

        <tr><td colspan='13'>Other Character</td></tr>
        <tr> <td>Đ</td> </tr>
        <tr> <td>đ</td> </tr>
    </tbody>
</table>


</main>


</body>
</html>