Skip to content

feat(blog): add a tone mark placement guide for hòa vs hoà #14

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
pcodedynamics merged 1 commit into from
Nov 7, 2026
Merged

feat(blog): add a tone mark placement guide for hòa vs hoà #14

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions public/llms.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,7 @@ Funput runs on:
- [Vietnamese text shortcuts with Funput](https://funput.app/blog/go-tat-tieng-viet-funput/): Create text expansion shortcuts on Windows, macOS and Linux, with email examples, case matching, English mode and troubleshooting.
- [Repair mistyped Vietnamese keys](https://funput.app/blog/tu-sua-loi-go-nham-phim/): On iPhone, iPad and Android, Funput replaces a neighbouring key slip when a word ends, with a suggestion-bar preview and one-tap undo.
- [Vietnamese word suggestions on iPhone and Android](https://funput.app/blog/goi-y-tu-tieng-viet/): How the Funput suggestion bar offers words you have typed and a bundled English lexicon, on device, for iPhone, iPad and Android.
- [Old and new Vietnamese tone mark placement](https://funput.app/blog/dat-dau-kieu-cu-kieu-moi/): Hòa vs hoà, khỏe vs khoẻ: which rhymes differ, the 2018 textbook spelling rule, why consistency matters, and choosing traditional or modern placement in Funput on all five platforms.
- [Blog](https://funput.app/blog/): Published updates from Funput.
- [Move from Windows to Linux](https://funput.app/blog/chuyen-windows-sang-linux-go-tieng-viet/): Keep familiar Telex/VNI typing with Funput, configure Fcitx5 or IBus and verify everyday workflows.
- [A modern Vietnamese input method for Linux](https://funput.app/blog/bo-go-tieng-viet-linux-hien-dai/): Funput features, package updates, maintenance evaluation and practical migration checks.
Expand Down
257 changes: 257 additions & 0 deletions src/components/blog/ToneStyleExample.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,257 @@
---
interface Props {
/** `compare` puts the two spellings side by side. `keys` shows one key sequence under both styles. */
variant?: 'compare' | 'keys';
}

const { variant = 'compare' } = Astro.props;
const isKeys = variant === 'keys';

/** Each word is split around the letter that carries the tone, so it can be highlighted. */
const pairs = [
{ traditional: ['h', 'ò', 'a'], modern: ['ho', 'à', ''] },
{ traditional: ['kh', 'ỏ', 'e'], modern: ['kho', 'ẻ', ''] },
{ traditional: ['th', 'ủ', 'y'], modern: ['thu', 'ỷ', ''] },
];
---

{isKeys ? (
<figure
class="tone-example"
aria-label="Gõ hoaf rồi dấu cách: kiểu truyền thống ra hòa, kiểu hiện đại ra hoà"
>
<div class="example-heading">
<span>GÕ MỘT LẦN, DẤU TỰ VÀO CHỖ</span>
<span aria-hidden="true">✳</span>
</div>
<div class="example-flow">
<div class="example-input">
<span class="example-label">BẠN GÕ (TELEX)</span>
<div class="example-keys">
<kbd>h</kbd>
<kbd>o</kbd>
<kbd>a</kbd>
<kbd class="tone-key">
f<span class="sr-only">, phím dấu huyền</span>
</kbd>
<span>+</span>
<kbd>Space</kbd>
</div>
</div>
<span class="example-arrow" aria-hidden="true">
→
</span>
<div class="example-output">
<div class="output-row">
<span class="example-label">TRUYỀN THỐNG</span>
<p>
h<span class="tone">ò</span>a
</p>
</div>
<div class="output-row">
<span class="example-label">HIỆN ĐẠI</span>
<p>
ho<span class="tone">à</span>
</p>
</div>
</div>
</div>
<figcaption>
Telex hofa hay VNI hoa2 cũng ra cùng kết quả. Bạn giữ thói quen gõ, Funput đặt dấu theo kiểu
đã chọn.
</figcaption>
</figure>
) : (
<figure
class="tone-example"
aria-label="So sánh kiểu cũ hòa, khỏe, thủy với kiểu mới hoà, khoẻ, thuỷ"
>
<div class="example-heading">
<span>CÙNG MỘT TỪ, HAI CÁCH ĐẶT DẤU</span>
<span aria-hidden="true">✳</span>
</div>
<div class="compare-grid">
<div class="compare-column">
<span class="example-label">KIỂU CŨ · TRUYỀN THỐNG</span>
<ul>
{pairs.map(({ traditional: [before, toned, after] }) => (
<li>
{before}
<span class="tone">{toned}</span>
{after}
</li>
))}
</ul>
</div>
<div class="compare-column modern">
<span class="example-label">KIỂU MỚI · HIỆN ĐẠI</span>
<ul>
{pairs.map(({ modern: [before, toned, after] }) => (
<li>
{before}
<span class="tone">{toned}</span>
{after}
</li>
))}
</ul>
</div>
</div>
<figcaption>
Chữ tô màu là chữ mang dấu thanh. Hai kiểu chỉ khác nhau ở vần oa, oe, uy khi sau đó không có
phụ âm cuối.
</figcaption>
</figure>
)}

<style>
.tone-example {
margin-block: 32px;
padding: 28px;
border: 1px solid #cbd4bd;
border-radius: 16px;
background: var(--sage);
color: var(--ink);
}
.example-heading {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding-bottom: 22px;
border-bottom: 1px solid #cbd4bd;
font-size: 10px;
font-weight: 600;
letter-spacing: 1.5px;
}
.example-heading > :last-child {
color: #ba3919;
font-size: 32px;
line-height: 1;
}
.example-label {
display: block;
margin-bottom: 12px;
color: #535d46;
font-size: 9px;
font-weight: 600;
letter-spacing: 1.5px;
}
.tone {
color: #ba3919;
}
.compare-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px;
padding-block: 28px;
}
.compare-column {
padding: 20px 22px;
border: 1px solid #c5cbb9;
border-radius: 12px;
background: #fffcf4;
}
.compare-column.modern {
border-color: var(--ink);
}
.compare-column ul {
display: flex;
flex-wrap: wrap;
gap: 6px 22px;
margin: 0;
padding: 0;
list-style: none;
}
.compare-column li {
margin: 0;
padding: 0;
font-size: clamp(22px, 3vw, 30px);
font-weight: 600;
letter-spacing: -0.8px;
line-height: 1.5;
}
.compare-column li::marker {
content: none;
}
.example-flow {
display: grid;
grid-template-columns: minmax(0, 1.6fr) auto minmax(0, 1fr);
align-items: center;
gap: 24px;
padding-block: 28px;
}
.example-keys {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 7px;
}
kbd {
padding: 5px 12px;
border: 1px solid #c5cbb9;
border-bottom-width: 3px;
border-radius: 7px;
background: #fffcf4;
font-family: inherit;
font-size: 15px;
}
kbd.tone-key {
border-color: #ba3919;
color: #ba3919;
}
.example-keys > span {
color: #535d46;
font-size: 12px;
}
.example-arrow {
color: #ba3919;
font-size: 28px;
}
.example-output {
display: grid;
gap: 14px;
}
.output-row .example-label {
margin-bottom: 4px;
}
.example-output p {
margin: 0;
font-size: clamp(22px, 3vw, 30px);
font-weight: 600;
letter-spacing: -0.8px;
line-height: 1.4;
}
.tone-example figcaption {
margin: 0;
padding-top: 18px;
border-top: 1px solid #cbd4bd;
color: #535d46;
font-size: 12px;
line-height: 1.8;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
@media (max-width: 600px) {
.tone-example {
padding: 22px;
}
.compare-grid,
.example-flow {
grid-template-columns: minmax(0, 1fr);
gap: 16px;
}
.example-arrow {
justify-self: start;
transform: rotate(90deg);
line-height: 1;
}
}
</style>
2 changes: 1 addition & 1 deletion src/content/blog/bo-go-tieng-viet-cho-mac.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -117,7 +117,7 @@ Nhờ ứng dụng này, bạn gõ “Funput” trong Spotlight là mở đượ

Sau khi gõ được, dành vài phút xem các tính năng sau. Chúng giúp việc gõ tiếng Việt trên Mac thuận tay hơn, nhất là khi bạn viết xen tiếng Anh hoặc làm việc với nhiều ứng dụng.

- **Kiểu đặt dấu:** chọn truyền thống (`hòa`, `khỏe`) hoặc hiện đại (`hoà`, `khoẻ`) trong **Cách gõ**.
- **Kiểu đặt dấu:** chọn truyền thống (`hòa`, `khỏe`) hoặc hiện đại (`hoà`, `khoẻ`) trong **Cách gõ**. Xem [khác biệt giữa đặt dấu kiểu cũ và kiểu mới](/blog/dat-dau-kieu-cu-kieu-moi/).
- **Tự khôi phục từ tiếng Anh:** giúp các từ tiếng Anh không bị biến thành chữ có dấu ngoài ý muốn.
- **Bỏ dấu sau Backspace:** xóa lùi rồi gõ dấu khác, Funput đặt lại dấu cho đúng từ.
- **Nhớ theo ứng dụng:** Funput nhớ lựa chọn Việt/Anh gần nhất của từng ứng dụng. Tắt tiếng Việt trong Terminal một lần, lần sau quay lại Terminal sẽ tự ở chế độ tiếng Anh, còn Pages vẫn giữ tiếng Việt. Bạn không cần cấu hình danh sách nào.
Expand Down
2 changes: 1 addition & 1 deletion src/content/blog/bo-go-tieng-viet-linux-hien-dai.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ Tuổi đời của dự án hoặc việc ít có commit chưa đủ để kế

### Kiểu gõ quen thuộc, thiết lập bằng giao diện

Funput hỗ trợ **Telex, Telex nâng cao và VNI**, cùng lựa chọn đặt dấu như “hòa” hoặc “hoà”. Bạn có thể mở ứng dụng cài đặt để điều chỉnh kiểu gõ, gõ tắt và các tùy chọn nhập liệu mà không cần sửa tệp cấu hình bằng tay.
Funput hỗ trợ **Telex, Telex nâng cao và VNI**, cùng lựa chọn [đặt dấu kiểu cũ hoặc kiểu mới](/blog/dat-dau-kieu-cu-kieu-moi/) như “hòa” hoặc “hoà”. Bạn có thể mở ứng dụng cài đặt để điều chỉnh kiểu gõ, gõ tắt và các tùy chọn nhập liệu mà không cần sửa tệp cấu hình bằng tay.

Giao diện dùng **GTK4 và libadwaita**, dùng chung cho bản Fcitx5 và IBus. Với người vừa chuyển từ Windows, một nơi tập trung các thiết lập giúp việc làm quen dễ hơn. Xem [cách giữ thói quen gõ khi chuyển sang Linux](/blog/chuyen-windows-sang-linux-go-tieng-viet/) để bắt đầu.

Expand Down
Loading
Loading