Hỏi khó: Text tự động chỉnh kích thước cho vừa vặn width hoặc height trong html

MeigyokuThmn · March 12, 2022, 2:26pm

Ví dụ mình có html thế này:

<body>
	<div id='displayed-number-div' class="clearfix">
		<p id='displayed-number'>123456789</p>
	</div>
</body>

Và css thế này:

body, html {
   margin: 0;
   padding: 0;
   height: 100%;
   width: 100%;
}
#displayed-number-div {
   height: 100%;
   display: table;
   width: 100%;
}
#displayed-number {
   margin: 0;
   height: 100%;
   display: table-cell;
   text-align: center;
   vertical-align: middle;
   white-space: nowrap;
   font-size: 40vh;
   border-width: 5px;
   border-style: dashed;
}

Liệu có cách nào để con số trong thẻ < p >có thể tự động thay đổi font-size cho khớp với thẻ < div > không, mình đã thử tạo ra 1 thẻ tạm rồi liên tục thử size lên nó, nhưng mà performance quá chậm.

Lovemagic · April 14, 2017, 3:00pm

Khớp thẻ div là sao bạn? Ý bạn đang muốn dùng trong trg hợp nào thế? Mobile hả?

drgnz · April 14, 2017, 3:29pm

Bạn đã thử cách tính toán lại font size khi sự kiện resize chưa?

MeigyokuThmn · April 14, 2017, 5:00pm

Chả là mình muốn viết lại ứng dụng này (C#) lên web để học lập trình web tĩnh, lúc trước mình dùng vòng lặp để test size nên chưa tối ưu, lên web thì lag do lặp nhiều quá , với trên web không có API measureString (hoặc là mình không biết) Vừa mới nãy mình chợt nghĩ ra cách mới không cần lặp
Đây là ứng dụng C# của mình, chỉ là tạo số ngẫu nhiên với bấm giờ thôi, nhưng có thể kéo size cửa sổ, dòng chữ to thì responsive theo size cửa sổ https://drive.google.com/open?id=0B3ZsTwfasKZxM1RjYUNXSXEzQ2c
Giờ mình chỉ cần cái gì đó thay thế được measureString này https://msdn.microsoft.com/en-us/library/6xe5hazb(v=vs.110).aspx

Lovemagic · April 14, 2017, 4:43pm

C# theo mình biết k có web, bạn có thể đưa ý tưởng lên nhưng cú pháp (syntax) thì không.
Và vì thế mà bạn cần học thêm html, css, js để làm web, vì đây là những cái chính ở web.

Mình chưa run file của bạn nên k biết nó thế nào nhưng theo ý tưởng thì như thế này có ddc k?

MeigyokuThmn · April 14, 2017, 4:57pm

Mình chỉ muốn text tự co dãn cho vừa với parent element thôi. Mà mình có thuật toán rồi, giờ chỉ cần cái gì đó để measure string cho nhanh.

tntxtnt · April 15, 2017, 10:41am

vòng lặp là i = 1 2 3 4 … n à? Viết lại vòng lặp bằng tìm kiếm nhị phân chắc cũng lẹ mà

ví dụ font vừa vặn có size là 78px. Bắt đầu với 1px (thiếu), nhân 2 lên 2px (thiếu), 4px (thiếu), 8px (thiếu), 16px (thiếu), 32px (thiếu), 64px (thiếu), 128px (dư) => có được low=64, high=128, rồi tìm kiếm nhị phân là ra: 96 -> 80 -> 72 -> 76 -> 78. Làm vậy đo 8 + 5 = 13 lần thay vì 78 lần, nhanh hơn kha khá

tạo 1 cái html5 canvas rồi xài measureText():

Lovemagic · April 15, 2017, 6:36am

thì hình của mình nó vừa rồi đấy.
quan trọng là trên html thì việc match parent element đã có css làm, bạn k phải tính gì cả.

MeigyokuThmn · April 15, 2017, 7:28am

Đâu có được đâu nhỉ:

Nhưng mà may quá, mình tìm ra cách rồi, dùng measureText của canvas, kèm với thuật toán test size (thuật toán mới, không cần vòng lặp) là xong, cảm ơn bạn tntxtnt nhiều

Lovemagic · April 15, 2017, 10:33am

style để khác hẳn thế kia thì làm sao được.
bạn có đáp án rồi thì tick chọn đáp án của bạn tntxtnt làm solution nhé