Biểu tượng phân chia dài (HTML và/hoặc CSS)

Question

Tôi đang tìm cách hiển thị biểu tượng phân chia dài truyền thống bằng HTML/CSS (giống như được hiển thị ở đây: http://barronstestprep.com/blog/wp-content/uploads/2013/04/longdiv1.png).

Điều này (về cơ bản là http://www.fileformat.info/info/unicode/char/27cc/index.htm) về cơ bản là những gì tôi cần, nhưng tôi không nghĩ nhiều người sẽ cài đặt phông chữ thích hợp trên máy tính của họ để xem nó (tôi không, ít nhất).

Tôi cũng đã cố gắng này (dưới đây), nhưng nó không hiển thị liên tục trên Chrome và FF ...

4<span style="text-decoration: overline;"><span style="font-size: 14px">)</span>84</span> 

này nên được hiển thị 84 ÷ 4 với hộp chia dài.

Ý tưởng?

Answer 1

<span style="border-right: 1px black solid; border-radius: 0px 0px 10px 0px"> 
    4 
</span> 
<span style="border-top: 1px black solid; "> 
    84 
</span> 

Demo

Answer 2

Khái niệm và ký hiệu của “sự phân chia dài” là truyền thống, trong một số truyền thống, giảng dạy số học ở trường, và nó được sử dụng trong bối cảnh các bước của phép chia số nguyên được giải thích bằng đồ thị. Không có cách nào đáng tin cậy để thực hiện điều này trong HTML và CSS ngoại trừ bằng cách sử dụng hình ảnh, hình ảnh lớn có chứa toàn bộ phân chia dài như một quá trình hoặc từng phần, ví dụ: một mảnh chỉ chứa một số, toán tử phân chia dài và một số khác (như trong jpg được đề cập trong câu hỏi). Đây là cách ví dụ: http://www.mathsisfun.com/long_division.html thực hiện việc này. Trang http://en.wikipedia.org/wiki/Long_division sử dụng văn bản được định dạng sẵn, ký hiệu xây dựng từ các ký tự Ascii như “)” và “_”, nhưng kết quả là nguyên thủy và không mạnh mẽ (ví dụ: chuyển thành vô nghĩa trong trình đọc màn hình).

Khi sử dụng hình ảnh, bạn nên viết văn bản alt thể hiện ý tưởng bằng lời nói. Điều này phần nào phụ thuộc vào ngữ cảnh, nhưng tôi e rằng nó sẽ cần phải dài, như alt="long division with divisor 4, dividend 84".

Chỉ sử dụng HTML và CSS để xây dựng các đơn vị dài là khá vô vọng, vì HTML và CSS khá bất lực với bất kỳ thứ gì có liên quan hai chiều trong ký hiệu toán học (tức là biểu thức toán học không phải là chuỗi ký tự tuyến tính đơn giản). Thậm chí xây dựng một square root expression, với một vinculum mở rộng trên radicand, đòi hỏi sự khéo léo dễ dàng thất bại, nhiều hay ít, và cho thấy một biểu thức tương tự như vậy, nhưng về cơ bản đơn giản hơn một biểu thức phân chia dài.

Ký tự U + 27CC LONG DIVISION về mặt lý thuyết sẽ cho phép bạn viết biểu thức phân chia dài, ngay cả trong văn bản thuần, vì nó được xác định trong tiêu chuẩn Unicode sao cho nó “mở rộng đồ họa qua cổ tức”. Tuy nhiên, điều này phần lớn là lý thuyết, vì nhiều lý do. Ngoài mức độ hạn chế phông chữ (có thể được xử lý bằng cách sử dụng phông chữ có thể tải xuống với @font-face), phương pháp tiếp cận bị thiếu hỗ trợ phần mềm. Ý tưởng “mở rộng đồ họa qua cổ tức” không dễ thực hiện. Mặc dù trình duyệt có thể (khi sử dụng phông chữ phù hợp) hiển thị đúng 84⟌4, chúng không thành công với 84⟌42 (biểu tượng kéo dài trên “4” sau ký tự nhưng không vượt quá “2”). Lý do có vẻ như trong phông chữ chứa U + 27CC, có thể được triển khai bằng các quy tắc nâng cao ngụ ý rằng toán tử dường như mở rộng trên chữ số tiếp theo, nhưng để làm cho nó mở rộng trên số tiếp theo (số thứ tự) hỗ trợ phần mềm ở trên mức phông chữ đơn giản sẽ là cần thiết.

Answer 3

Trong HTML5, bạn có thể trực tiếp sử dụng MathML.MathML 3 hỗ trợ các <mlongdiv> yếu tố:

<figure> 
    <math> 
    <mlongdiv> 
     <mn>4</mn> 
     <mn></mn> 
     <mn>84</mn> 
    </mlongdiv> 
    </math> 
    <figcaption> 
    This will display as a long division in browsers that support MathML 3. 
    </figcaption> 
</figure> 

Đối MathML 2 bạn có thể sử dụng một giải pháp dựa trên Javascript LaTeX, chẳng hạn như MathJax. Dưới đây là một số long division example sử dụng trình phân tích cú pháp MathJax TeX để phân tích đầu vào của biểu mẫu \longdiv{84}{4}.