Giới thiệu Init Read

Init HTML · 23/07/2026 · 5 phút đọc

            Init Read là widget đọc bài viết của Init HTML — nhẹ, độc lập, không cần dependency.
            Tự động nhận diện ngôn ngữ từ <html lang="">.
        

Giới thiệu

Init Read giúp hiển thị tiến độ đọc bài viết dưới dạng vòng tròn progress SVG, kèm dropdown mục lục (Table of Contents) có thể click để nhảy đến từng phần.

Widget được thiết kế để chạy trên bất kỳ website nào — blog cá nhân, trang tin tức, documentation — mà không phụ thuộc vào bất kỳ framework UI nào.

Tính năng chính

Vòng tròn tiến độ

Vòng tròn SVG hiển thị chính xác % bài viết đã đọc. Màu sắc, kích thước, độ dày nét vẽ hoàn toàn tùy chỉnh được.

Mục lục tự động

Tự động quét heading H2, H3 trong bài viết và tạo mục lục phân cấp. Hỗ trợ tạo ID tự động nếu heading chưa có.

Đa ngôn ngữ

Tự động phát hiện ngôn ngữ từ <html lang="">. Hỗ trợ tiếng Anh và tiếng Việt. Có thể override bằng config i18n.

Zero dependency

Viết bằng vanilla JavaScript thuần. Không cần jQuery, Bootstrap, UIkit hay bất kỳ thư viện nào. File ~25KB, CSS tự inject.

Cài đặt

Cách 1: Auto-inject

<script src="init-read.min.js"></script>

Cách 2: Custom container

<div id="initread-control"></div>
<script src="init-read.min.js"></script>

Với config

<script>
window.InitReadConfig = {
    progressColor: '#ff6b6b',
    position: 'bottom-left',
    headingTags: ['h2', 'h3', 'h4']
};
</script>
<script src="init-read.min.js"></script>

API

// Refresh headings & progress
window.__initread_instance__.refresh();

// Destroy widget
window.__initread_instance__.destroy();

// Re-init
window.initRead();

Kết luận

Init Read là một phần trong hệ sinh thái công cụ của Init HTML. Mục tiêu là cung cấp các giải pháp web nhẹ, đẹp và dễ tích hợp.

Thử đổi <html lang="vi"> sang <html lang="en"> để xem widget tự động chuyển ngôn ngữ nhé!