Cách tạo công cụ đổi kiểu chữ chạy hoàn toàn trong trình duyệt

Vấn đề

Nhiều người muốn tên Instagram trông đẹp hơn. Nhưng họ không muốn cài thêm ứng dụng. Cài ứng dụng tốn dung lượng điện thoại. Nó cũng có thể gửi chữ của bạn lên máy chủ nào đó. Chỉ để trang trí một cái tên, việc đó là quá mức.

Cách giải quyết rất nhỏ. Bạn có thể tự tạo một công cụ đổi kiểu chữ chạy ngay trong trình duyệt. Không cần máy chủ. Không cần đăng ký. Chữ bạn gõ chỉ ở lại trong trình duyệt của bạn.

Bài viết này giải thích cách làm đó, từng bước đơn giản.

Chữ trang trí thật ra là gì

Điều đầu tiên cần hiểu rõ: chữ trang trí không phải là đổi font. Nó là thay ký tự thường bằng một ký tự Unicode khác, có hình dạng đẹp hơn.

Ví dụ, chữ A thường có một ký tự tương ứng là chữ A in đậm toán học, 𝐀. Chữ a thường tương ứng với 𝐚. Số 0 tương ứng với 𝟎. Những ký tự này đã có sẵn trong bảng Unicode, là chuẩn ký tự chung của thế giới. Vì vậy, bạn không cần ứng dụng đặc biệt để hiển thị chúng. Bạn chỉ cần dán chúng vào tên hiển thị hoặc tiểu sử Instagram là dùng được.

Nói cách khác, công cụ chỉ làm một việc đơn giản. Nó đọc từng ký tự bạn gõ. Nó tra bảng tương ứng. Nếu có ký tự đẹp hơn, nó thay thế. Nếu không có, nó giữ nguyên. Chỉ vậy thôi.

Tạo bảng tương ứng

Bạn có thể tạo bảng tương ứng bằng một đoạn mã JavaScript ngắn. Với kiểu in đậm, bạn gán cho A đến Z, a đến z, và 0 đến 9, mỗi ký tự một ký tự đậm tương ứng.

const bold = {};
"ABCDEFGHIJKLMNOPQRSTUVWXYZ".split("").forEach((ch, i) => {
  bold[ch] = String.fromCodePoint(0x1D400 + i);
});
"abcdefghijklmnopqrstuvwxyz".split("").forEach((ch, i) => {
  bold[ch] = String.fromCodePoint(0x1D41A + i);
});
"0123456789".split("").forEach((ch, i) => {
  bold[ch] = String.fromCodePoint(0x1D7CE + i);
});

function style(text) {
  return [...text].map((ch) => bold[ch] || ch).join("");
}

Hàm style đọc từng ký tự của đoạn văn bản. Ký tự nào có trong bảng sẽ được đổi sang dạng đậm. Ký tự nào không có trong bảng, ví dụ dấu cách hay ký tự tiếng Việt, sẽ giữ nguyên. Nhờ vậy, nội dung của bạn không bị hỏng.

Điểm hay của cách này là bạn có thể thêm kiểu mới rất dễ. Muốn thêm kiểu nghiêng hay kiểu viết tay, bạn chỉ cần thêm một bảng tương ứng nữa. Cách làm vẫn giống hệt.

Nút sao chép

Đổi được chữ rồi, bạn cần sao chép dễ dàng. Một nút bấm là đủ. Bấm nút, chữ đã đổi sẽ vào bộ nhớ tạm. Bạn chỉ cần dán vào Instagram.

async function copyStyled(text) {
  try {
    await navigator.clipboard.writeText(text);
  } catch (err) {
    const box = document.getElementById("output");
    box.focus();
    box.select();
  }
}

Đoạn mã này thử sao chép trước. Nếu thành công, mọi việc xong. Nếu thất bại, nó sẽ chọn sẵn chữ trong ô kết quả. Người dùng có thể tự sao chép bằng tay. Cách dự phòng này giúp công cụ chạy được cả trên trình duyệt cũ.

Toàn bộ mã trên chạy trong trình duyệt của người dùng. Chữ không được gửi đi đâu cả. Không có kết nối mạng. Vì vậy công cụ chạy nhanh và an toàn.

Ba điều cần nhớ

Thứ nhất, về hiển thị. Hầu hết điện thoại mới đều hiển thị tốt chữ Unicode trang trí. Nhưng điện thoại rất cũ có thể hiển thị thành ô vuông. Bạn nên kiểm tra trên điện thoại của mình trước khi dùng.

Thứ hai, về tên người dùng Instagram. Tên người dùng chỉ chấp nhận chữ cái thường, chữ số, dấu chấm và dấu gạch dưới. Chữ trang trí không dùng được cho tên người dùng. Bạn hãy dùng chữ trang trí cho tên hiển thị và tiểu sử. Tên người dùng thì dùng chữ cái thường.

Thứ ba, về mức độ trang trí. Trang trí cả một đoạn dài sẽ khó đọc. Bạn chỉ nên trang trí tên ngắn hoặc một câu ngắn. Dùng ít mà đẹp sẽ tốt hơn dùng nhiều mà rối.

Kết luận

Một công cụ đổi kiểu chữ chạy trong trình duyệt chỉ cần một bảng tương ứng và một nút sao chép. Không cần máy chủ. Không cần đăng ký. Chữ của bạn không rời khỏi trình duyệt.

Nếu bạn muốn xem một ví dụ đang chạy, hãy thử trình tạo font chữ Instagram. Bạn chỉ cần gõ chữ, chọn kiểu mình thích, rồi sao chép.