Bản mẫu:Hình nổi/tài liệu

Cách dùng

Tạo hình và chú thích hình nổi.

{{Hình nổi
 | style    =
 | trên     =
 | hình     = 
 | class    =
 | rộng     = 
 | canh     = 
 | đa giác  =
 | chữ      = 
 | canh chữ = 
 | thế      = 
}}

Tham số

• |style=: thêm thuộc tính kiểu (style) css. Nếu bạn đổi cỡ chữ theo phần trăm bạn nên đổi luôn chiều chiều cao hàng (line-height). Ví dụ nếu bạn muốn cỡ chữ (font-size) là 80%: | style = font-size: 80%; line-height: 80%;
• |trên=: thêm văn bản vào phía trên hình
• |hình=: Tên tập tin (không có tiền tố "Tập tin:") (tham số bắt buộc)
• |class=: Lớp CSS của tập tin (tùy chọn)
• |rộng=: Chiều rộng hình (tùy chọn, mặc định 150px)
• |canh=: Canh hình trong trang ("trái", "phải" hoặc "giữa"; mặc định "phải").
• |đa giác=: Dạng viền đa giác để cho phép chữ bao quanh gần hơn hình nếu hình không phải là hình chữ nhật (tùy chọn, đặt tọa độ theo cặp phân tách bằng dấu phẩy)
• |chữ=: Chú thích hình (tùy chọn). Đừng dùng thẻ <div> hoặc bản mẫu dựa trên div {{khối nhỏ}} nếu bản mẫu nằm ở giữa đoạn văn vì MediaWiki sẽ thêm dấu xuống dòng.
• |canh chữ=: Canh văn bản chú thích ("trái", "phải" hoặc "giữa"; mặc định "giữa")
• |thế=: Đoạn văn bản thay thế cho hình khi rà chuột lên khung hình hoặc dùng khi hình không hiển thị được (bắt buộc để tăng tính dễ đọc)

 

Vì đây là bản mẫu dùng span (để hình có thể "nổi" trong đoạn văn mà không làm đứt gãy nó), không được phép dùng định dạng khối (ví dụ như {{giữa}} hay {{khối nhỏ}}) trong chú thích hình.

Ví dụ

Hình bên phải

{{Hình nổi
 | hình     = The Kinematics of Machinery Fig 2.jpg
 | rộng     = 250px
 | canh     = phải
 | chữ      = Hình 2.
}}

Hình 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Hình bên trái

{{Hình nổi
 | hình     = The Kinematics of Machinery Fig 2.jpg
 | rộng     = 250px
 | canh     = trái
 | chữ      = Hình 2.
}}

Hình 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Chú thích hình canh trái

{{Hình nổi
 | hình     = The Kinematics of Machinery Fig 2.jpg
 | rộng     = 250px
 | canh     = phải
 | chữ      = Hình 2.
 | canh chữ = trái
}}

Hình 2. Bên trái. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Hình bên phải với chữ phía trên

{{Hình nổi
 | style = 
 | trên  = Hình 2.
 | hình  = The Kinematics of Machinery Fig 1.png
 | rộng  = 250px
 | canh  = phải
 | chữ   = Đây là hình cánh tay máy.
}}

Hình 2.

Đây là hình cánh tay máy. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Hình ở giữa

{{Hình nổi
 | hình     = The Kinematics of Machinery Fig 1.png
 | rộng     = 250px
 | canh     = giữa
 | chữ      = Hình 2.
}}

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Hình 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Hình ở giữa không có bản mẫu

Một cách khác là không cần dùng bản mẫu cho trường hợp này, chỉ cần chèn hình sau đó là chú thích như sau:

{{lorem ipsum}}
[[Tập tin:The Kinematics of Machinery Fig 1.png|giữa|250px]]
{{g|Hình 2.}}

{{lorem ipsum}}

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Hình 2.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Viền đa giác

Nếu hình không có dạng hình chữ nhật, và bạn muốn văn bản bám sát hình hơn, dùng tham số |đa giác=. Tham số này dùng cú pháp đa giác CSS: cặp tọa độ phân tách bằng dấu phẩy, hoặc là phần trăm (ví dụ 20%, 50%).

Chú ý: Giá trị pixel (như 10px, 25px) trông có vẻ dùng được, nhưng nó sẽ dẫn tới việc văn bản bọc không đúng khi xem trên thiết bị di động nếu hình được canh chỉnh lại cho vừa với màn hình (phần lớn điện thoại sẽ làm vậy nếu hình dài hơn màn hình, khoảng 350px). Do đó, hãy dùng phần trăm tương đối khi có thể.

Chú ý: nó sẽ thiết lập kiểu CSS shape-outside, và ghi đè lên khung viền để bao văn bản. Nghĩa là nếu bạn đặt khoảng cách viền (margin) trong tham số |style=, nó sẽ bị bỏ qua nếu bạn dùng |đa giác=.

{{hình nổi
|hình=Select Popular Tales from the German of Musaeus (drop cap, page 1).jpg
|canh=trái
|rộng=300px
|đa giác=0 0, 100% 0, 100% 34%, 60% 34%, 60% 58%, 36% 58%, 36% 100%, 0 100%
}}
{{lorem ipsum}}

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Cảnh báo: div làm nhảy dòng

Bản mẫu này dựa trên span, có nghĩa là nó sẽ giúp hình "nổi" bên trong đoạn văn mà không làm ngắt dòng.

Tuy nhiên, nó cũng có nghĩa là bạn không thể dùng định dạng bằng div bên trong |chữ=.

{{lorem ipsum}}
{{Hình nổi
 | hình     = The Kinematics of Machinery Fig 1.png
 | rộng    = 250px
 | chữ      = {{khối nhỏ|Bản mẫu này sẽ làm nhảy dòng nơi chèn bản mẫu.}}
}}
'''Ngắt!'''{{lorem ipsum}}

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Bản mẫu này sẽ làm nhảy dòng nơi chèn bản mẫu.

Ngắt!Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.