Tệp hình ảnh HTML + CSS + JS +


8

Có định dạng tệp nào tích hợp tất cả nội dung HTML trong một tệp không?

Thay vì doc, docx, odt hoặc pdf, tôi muốn sử dụng các tài liệu HTML5 để tác giả nội dung của mình. Nhưng điều đó đặt ra một vấn đề khi tôi muốn gửi các tệp HTML qua email; Tôi phải nén nó và sau đó đính kèm vào email. Tất nhiên, có .lit và .chm, nhưng vì những lý do rõ ràng đó không phải là con đường để đi. Ngoài ra, có thể mã nội tuyến javascript và CSS trong các tệp HTML. Điều này cũng có nhược điểm: hình ảnh vẫn bị loại trừ và việc nhúng tất cả các tệp CSS và Javascript bên ngoài vào một tệp HTML là cồng kềnh. Các công cụ có thể tự động hóa điều này, nhưng sau đó vấn đề hình ảnh vẫn tồn tại.

Động lực quan trọng nhất để sử dụng HTML trên pdf / doc / docx / odt là HTML không được thiết kế để in, trong khi tất cả pdf / doc / docx / odt đều được (và do đó không được tối ưu hóa để đọc màn hình). Ngoài ra, HTML là một tiêu chuẩn mở và được chấp nhận hoàn toàn, không thể nói về các định dạng được đặt tên (odt là mở nhưng không được chấp nhận rộng rãi).

Câu trả lời:


7

Nhúng mọi thứ vào một tệp HTML bình thường là cách tốt nhất. Bạn đã bao giờ thấy TiddlyWiki chưa? Tôi nghĩ rằng tôi đã thấy nó được gọi là "Ứng dụng một trang" - mọi thứ được nhúng trong một tệp HTML, do đó, nó hoạt động như một phần mềm độc lập. Tôi không sử dụng nó, nhưng tôi nghĩ nó về mặt kỹ thuật khá ấn tượng.

Hình ảnh có thể được bao gồm nội tuyến bằng cách sử dụng mã hóa base64 bằng URI dữ liệu. Nhưng hỗ trợ trong Internet Explorer 8 chưa hoàn tất (có giới hạn kích thước IIRC) và hỗ trợ hoàn toàn thiếu trên các phiên bản IE cũ hơn. Hầu hết các trình duyệt hiện đại khác có hỗ trợ tốt.

Lưu ý rằng điều này thường sẽ tăng kích thước của hình ảnh lên khoảng một phần ba (vì bạn chỉ "sử dụng" 6 trên mỗi 8 bit cho mỗi byte, do đó phải sử dụng thêm một byte thứ ba để thu hẹp khoảng cách đó).

Ví dụ: bạn nhận được một cái gì đó như thế này:

<img src="data:image/png;base64,<BASE64 STRING>" />

Hoặc này:

.someClass
{
    background-image:url(data:image/png;base64,<BASE64 STRING>");
}

Bạn cũng có thể muốn đọc bài viết Wikipedia về Dữ liệu URI , nó có các nhận xét liên quan đến hỗ trợ trình duyệt và một số ví dụ về việc sử dụng.


Có công cụ nào (đá quý, trứng, gói nút, v.v.) xử lý việc chuyển đổi và bao gồm không? Có một công cụ nào sẽ nội tuyến JS và CSS nơi nó nhìn thấy một thuộc tính src="..."hoặc href="..."không? Và sau đó chuyển đổi hình ảnh sang base64 và thay thế <img src="..."bằng <img src="data:image/..."?
Sukima

Tôi không biết, tôi đã không cố gắng bọc thứ gì đó như thế này trước đây để có nhu cầu nhìn.
DMA57361

3

Tôi nghĩ định dạng MHTML (MIME HTML) (phần mở rộng tệp .MHT) có thể là những gì bạn đang theo đuổi. Điều này nhúng mọi thứ trong một tệp duy nhất (giống như một email HTML). Hình ảnh, vv được nhúng với mã hóa base64.

Hỗ trợ trình duyệt là hợp lý. IE và Opera có thể lưu và xem các tệp MHT. Trong IE, bạn chỉ cần "Lưu dưới dạng ..." và chọn "Lưu trữ web, tệp đơn (* mht)". Tuy nhiên, Firefox và Chrome yêu cầu tiện ích mở rộng trình duyệt.

Cá nhân, tôi có thể sẽ tải nội dung HTML lên một trang web (có thể được bảo vệ bằng mật khẩu) và chỉ phân phối liên kết. Các tệp MHT không chính xác có thể chỉnh sửa người dùng, do đó yêu cầu tái tạo khi bạn muốn phân phối. Khi tất cả đã được kết hợp thành một tệp MHT, liệu nó có còn truy cập được như HTML không?

PDF có thể truy cập hợp lý. Nó có khả năng đọc màn hình riêng. Không chắc chắn làm thế nào nó xử lý hình ảnh mặc dù - trừ khi bạn có thể tạo điều này với một công cụ cụ thể?


Ngoài các yêu cầu kỹ thuật, còn có một yêu cầu tổ chức không hoạt động với bất kỳ tiêu chuẩn độc quyền nào (pdf có thể được mở, nó vẫn là độc quyền). Tôi sẽ xem xét mhtml mặc dù.
dùng45971

Xem công cụ.ietf.org/html/rfc2557 . Đó là một tiêu chuẩn mở. Nó làm tôi ngạc nhiên rằng IE có sự hỗ trợ tốt hơn Firefox (cái sau thích định dạng độc quyền của riêng nó), nhưng bạn có nó. Có lẽ có công cụ hỗ trợ tốt hơn cho các phụ thuộc pdf hoặc html +.
Iiridayn
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.