Câu trả lời cho câu hỏi của bạn có thể đạt được với các truy vấn truyền thông, một kỹ thuật phổ biến để cung cấp phong cách khác nhau dựa trên kích thước của màn hình, định hướng của màn hình, v.v. Show Dưới đây là một liên kết đến thêm thông tin: https://www.w3schools.com/cssref/css3_pr_mediaquery.asp Có thể thiết lập một số điều thích: Nhưng suy nghĩ trong bình luận của bạn
Là cần thiết sử dụng javascript cho phông chữ thay đổi kích thước mặt trước của bạn dựa vào chiều rộng của container, là phụ thuộc vào điểm dừng. Nhưng trước, xem câu trả lời này: tỷ lệ phông chữ dựa trên chiều rộng của container Có lẽ sẽ giải quyết vấn đề ...
Giới thiệuBài viết này khám phá việc sử dụng JavaScript, HTML và CSS (bảng kiểu xếp tầng) để in nhãn. Thường xuyên hơn không, ấn tượng đầu tiên chúng tôi nghe thấy là "có thể không? Tôi thậm chí không thể nhận được hầu hết các trang web để in đúng trên máy in của mình". Chúng tôi cũng biết rằng HTML được thiết kế để chia sẻ thông tin trên phương tiện kỹ thuật số như Internet và HTML là tất cả về khả năng truy cập thông tin; Nó không bao giờ về in ấn. Tuy nhiên, tôi cũng tin rằng các công nghệ trình duyệt đang hội tụ đến điểm mà một phần mềm in nhãn chính thức trên web mà không cần sử dụng định dạng tài liệu như PDF, SVG hoặc XPS, là có thể. Tiểu sửĐể bắt đầu, chúng ta nên có một ý tưởng cơ bản về một nhãn hiệu thực sự là gì. Sơ đồ dưới đây cho thấy một nhãn 3x2 đơn giản.  Chúng tôi sử dụng điều này khá thường xuyên, ví dụ: In nhãn địa chỉ, gắn thẻ các mặt hàng kho hoặc sản phẩm ghi nhãn. Thông thường thông tin như tên sản phẩm hoặc ID được in trên mỗi nhãn. Đôi khi dữ liệu biến cũng được in trên nhãn, ví dụ: Địa chỉ khác nhau trong danh sách gửi thư. Microsoft Word cũng đã phổ biến việc sử dụng các tính năng chuyển đổi thư của họ để đạt được sự in nhãn bằng Microsoft Word và Excel. Nhiều nhà cung cấp nổi tiếng cũng đã cung cấp các mẫu được thiết kế sẵn hoạt động trong Microsoft Word hoặc phần mềm nhãn tùy chỉnh. Với sự hiểu biết cơ bản này, hãy đi sâu vào các chi tiết của việc sử dụng HTML và CSS để in nhãn. Những gì chúng ta sẽ làm là sử dụng định vị tuyệt đối CSS. Định vị tuyệt đối cho phép chúng tôi chỉ ra nơi một phần tử nên được đặt đối với cha mẹ của nó bằng cách chỉ định vị trí của góc trên và bên trái của phần tử. Chúng ta có thể tưởng tượng từng yếu tố là một loại hộp hình chữ nhật có nội dung thông tin.CSS absolute positioning. Absolute positioning allows us to indicate where an element should be placed with respect to its parent by specifying the location of the top and left hand corner of the element. We can imagine each element to be some kind of rectangular box which has information content. Sử dụng mãSau đây là lớp CSS được xác định cho nhãn của chúng tôi. .label <span class="code-none">{ background<span class="code-none">:white<span class="code-none">; position<span class="code-none">:absolute<span class="code-none">; border-collapse<span class="code-none">:collapse<span class="code-none">; width<span class="code-none">:4.00in<span class="code-none">; height<span class="code-none">:3.33in<span class="code-none">; margin<span class="code-none">: 0.00in<span class="code-none">; padding<span class="code-none">: 0<span class="code-none">; left<span class="code-none">: 0.00in<span class="code-none">; top<span class="code-none">: 0.00in<span class="code-none">; border<span class="code-none">:1px solid black<span class="code-none">; border-style<span class="code-none">:dotted<span class="code-none">; <span class="code-none">}</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span> Chúng tôi đã chỉ định một nhãn có chiều rộng 4 inch và chiều cao 3,33 inch. Chúng tôi cũng đã chỉ định một đường viền "chấm" để chúng tôi có thể dễ dàng nhìn thấy đường viền của nhãn của chúng tôi. Trong tệp HTML của chúng tôi, chúng tôi sẽ sử dụng lớp nhãn ở trên và chỉ định vị trí tuyệt đối cho từng nhãn bằng cách ghi đè trường "trái" và "trên cùng" trong lớp CSS. Tiếp theo chúng ta cần chỉ định một "giấy" để chứa nhãn của chúng tôi. Chúng ta có thể sử dụng lớp CSS sau đây để xác định giấy cỡ chữ 8,5 inch x 11 inch. .paper <span class="code-none">{ position<span class="code-none">:relative<span class="code-none">; margin<span class="code-none">: 0.00in<span class="code-none">; padding<span class="code-none">: 0<span class="code-none">; left<span class="code-none">: 0.00in<span class="code-none">; top<span class="code-none">: 0.00in<span class="code-none">; width<span class="code-none">: 8.5in<span class="code-none">; height<span class="code-none">: 11.0in<span class="code-none">; border<span class="code-none">:1px solid black<span class="code-none">; border-style<span class="code-none">:dotted<span class="code-none">; <span class="code-none">}</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span> Tệp HTML của chúng tôi đơn giản, có vẻ như sau đây: <div class="paper"> <div class="label" style="left:0.00in;top:0.00in;margin-left:0.156in; margin-top:0.5in">Test Label</div> <div class="label" style="left:4.188in;top:0.00in;margin-left:0.156in; margin-top:0.5in">Test Label</div> <div class="label" style="left:0.00in;top:3.33in;margin-left:0.156in; margin-top:0.5in">Test Label</div> <div class="label" style="left:4.188in;top:3.33in;margin-left:0.156in; margin-top:0.5in">Test Label</div> <div class="label" style="left:0.00in;top:6.66in;margin-left:0.156in; margin-top:0.5in">Test Label</div> <div class="label" style="left:4.188in;top:6.66in;margin-left:0.156in; margin-top:0.5in">Test Label</div> </div> Chúng tôi chỉ định các trường "trái", "trên cùng", "bên trái" và các trường "tỷ lệ lợi nhuận" của mỗi nhãn để đưa ra tổng số 6 (3 hàng x 2 cột). Điều này trông không quá khó khăn. Với một chút sửa đổi, chúng tôi sẽ có thể thực hiện một nhãn có kích thước khác nhau. Nếu chúng tôi sử dụng một số chương trình JavaScript, chúng tôi sẽ có thể phục vụ cho hầu hết các loại kết hợp nhãn. Chúng tôi thậm chí có thể thiết kế nhãn WYSIWYG và tuyên truyền các nội dung khác nhau trong nhãn để in. Vấn đềBây giờ chúng ta hãy kiểm tra in. Sử dụng Internet Explorer 8 hoặc Mozilla 3.0+, tôi đã in trang HTML của mình. Sử dụng một thước đo, tôi đã đo các nhãn và phát hiện ra nhãn nhỏ hơn những gì tôi mong đợi. Chuyện gì thế? Về cơ bản, các trình duyệt như Internet Explorer và Mozilla Firefox hiện đi kèm với một tùy chọn gọi là "Shrink to Fit" để giúp bạn in các trang web. Đây là một hành vi mặc định mà chúng tôi không muốn in nhãn của chúng tôi. Nếu bạn đang sử dụng Internet Explorer, hãy bỏ chọn tùy chọn "Kích hoạt" Cài đặt trang "trong" Cài đặt trang ". Nếu bạn đang sử dụng Mozilla, hãy bỏ chọn tùy chọn "Shrink to Fit Page Width" trong "Tùy chọn in". Hãy in lại. Kích thước là chính xác bây giờ. Nhưng nhãn không có vẻ ở đúng vị trí. Nó nhìn chuyển về phía bên phải và xuống. Vì vậy, vấn đề bây giờ là gì? Vấn đề là với lề máy in. Truy cập Internet Explorer-> Máy in-> Cài đặt trang hoặc Mozilla-> Tệp-> Cài đặt trang hoặc Opera-> Tệp-> Tùy chọn in. Trong cài đặt lề, đặt các lề sau thành 0. Trái: 0, phải: 0, trên cùng: 0, dưới cùng: 0 Đôi khi Internet Explorer sẽ không cho phép bạn nhập biên độ bằng không, nếu đây là trường hợp, sử dụng biên độ tối thiểu được cung cấp bởi trình duyệt. Đối với Mozilla, cài đặt lề nằm trong tab "lề & tiêu đề/chân trang". Sau khi bạn hoàn thành các cài đặt này, hãy tiếp tục in lại. Bây giờ nó tốt hơn, nhưng các nhãn vẫn được thay đổi và không ở đúng vị trí. Đây hiện là một trong những vấn đề cơ bản đang ngăn chúng tôi thực hiện in nhãn bằng các công nghệ web. Tuy nhiên, chúng tôi có thể khắc phục vấn đề bằng cách thực hiện một số sửa đổi cho HTML của chúng tôi. Giải phápLấy bản in mới nhất và sử dụng thước đo để đo lường sự khác biệt về vị trí của nhãn được chỉ định và bản in thực tế. Khấu trừ các số liệu từ "lề trái" và "tỷ lệ lợi nhuận" trong HTML của chúng tôi. Điều chỉnh các giá trị cho đến khi nhãn được in ở vị trí như một nhãn được chỉ định trong HTML. Cơ sở của việc in nhãn bằng cách sử dụng HTMLMô tả ở trên cho chúng ta thấy cách in nhãn bằng HTML bằng cách điều chỉnh lề. Chúng ta có thể nghĩ về quá trình này như một loại hiệu chuẩn cho một phần mềm nhãn trên web. Trong quá trình hiệu chuẩn, người dùng sẽ có thể in ra một trang HTML với các dòng trên các vị trí cụ thể trên tờ giấy. Sự khác biệt của các vị trí thực tế của các dòng với các vị trí được chỉ định sẽ là các giá trị chúng ta cần để hiệu chỉnh. Ví dụ: nếu tôi in một đường thẳng đứng ở giữa trang chữ cái ở độ 4,25 inch từ phía bên trái của tờ giấy. Khi dòng này được in ra, nó thực sự được in ra 4,5 inch từ phía bên trái của tờ giấy. Sau đó, có một sự khác biệt là -0,25 inch cần được điều chỉnh cho bố cục in của chúng tôi. Chúng tôi sử dụng lề CSS để thực hiện các điều chỉnh này cho in web của chúng tôi. Các giá trị hiệu chuẩn cũng có thể được lưu trữ trong bộ lưu trữ liên tục (ví dụ: tệp văn bản) và giá trị sẽ được tự động tải vào lần tiếp theo. Do đó, người dùng chỉ hiệu chỉnh một lần và họ có thể in nhãn bằng cách sử dụng HTML chính xác sau đó. Quá trình này tương tự như thiết lập một máy in một lần và sử dụng nó để in sau đó. Sử dụng JavaScript và JQuery để tạo các loại nhãn khác nhauMã JavaScript và jQuery bên dưới cho thấy cách chúng ta có thể sử dụng định vị tuyệt đối CSS để tạo các loại nhãn khác nhau. function CreateTemplateInches(paperWidth,paperHeight,marginLeft, marginTop,labelWidth,labelHeight,numRows,numColumns,horizontalSpace,verticalSpace) { var paper=$('<div class="paper"></div>'); paper.css('width',paperWidth+'in'); paper.css('height',paperHeight+'in'); paper.appendTo('#container'); var i=0,j=0; var posix=0,posiy=0; var numrows=numRows, numcolumns=numColumns; for (i=0;i<numrows;i++) { posix=0; posiy=i*(labelHeight+verticalSpace); for (j=0;j<numcolumns;j++) { posix=j*(labelWidth+horizontalSpace); var label=$('<div class=label></div>;'); label.css('margin-left',marginLeft+'in') .css('margin-top',marginTop+'in') .css('width',labelWidth+'in') .css('height',labelHeight+'in') .css('left',posix+'in') .css('top',posiy+'in'); paper.append(label); } } }; Điểm quan tâmInternet Explorer 7 (và trở đi), Mozilla 3.0 (hoặc có thể 2.0 trở đi), Safari 5 trên Mac, Opera 10 và Google Chrome 6 sắp tới đều hỗ trợ thiết lập trang với một số tùy chọn cho phép và vô hiệu hóa các tùy chọn thu hẹp. Chúng tôi tin rằng các trình duyệt chính đang hội tụ để hỗ trợ một bộ khả năng in chung. Các trình duyệt này cũng đang hướng tới HTML5 với sự hỗ trợ của CSS3, lưu trữ cục bộ, vải và nhiều khả năng thú vị hơn. In nhãn bằng cách sử dụng HTML, CSS và JavaScript chắc chắn là có thể trong tương lai gần. Dự án nguồn mởNếu bạn thích những gì bạn đã đọc, bạn có thể quan tâm đến việc xem phần mềm nhãn nhãn dự án nguồn mở của chúng tôi. Trong dự án này, chúng tôi cố gắng xây dựng một phần mềm in nhãn chính thức dựa trên các công nghệ mở cho web như HTML, JavaScript và CSS. Chúng tôi tin rằng các công nghệ trình duyệt đang hội tụ đến điểm mà một phần mềm in nhãn đầy đủ trên web (không có thể sử dụng định dạng tài liệu như PDF, SVG hoặc XPS). Sử dụng HTML làm xương sống cũng cho phép chúng tôi dễ dàng chuyển LabelGrid đến các nền tảng di động sắp tới, nơi các trình cắm của bên thứ ba có thể không có sẵn. Lịch sử
Thành viên này chưa cung cấp tiểu sử. Giả sử nó thú vị và đa dạng, và có lẽ là một cái gì đó để làm với lập trình. |
