PC [EPUB, CSS] Các mẩu Css và Saved Search

1. mẩu số 1 là về dropcap, lưu ý là mẩu không phải mẫu nhé ^ ^



Code:

​

 

@tran ngoc anh ơi copy luôn dòng mã lên được không. Mình cảm ơn.

 

Done. Mình cho cả api font của google dùng trong đoạn css đó, bạn có thể lấy để nhúng vào css, đặt ở dòng đầu tiên của css là font tự load về epub.

 

2. Mẩu số 2, nhúng font từ google:

 

3. Mẩu số 3: thiết kế heading phần 1, 2, 3 dạng số phóng to trên nền đen.

 

Mẫu Heading kiểu 2 dòng chữ to chữ nhỏ của mình:
Ví dụ:

Chương 1
Nhà khách Mẹ Ngỗng​

Ban đầu:

<h1>Chương 1
<br/>Nhà khách Mẹ Ngỗng
</h1>

Thay thế 3 lần theo màu là xong:

<h1><span style="font-size: 125%">Chương 1
</span><br/><span style="font-size: 90%;">Nhà khách Mẹ Ngỗng
</span></h1>

 

Đây là dạng inline html không dùng css à bạn?

 

Trong Sigil nó cho phép dùng kiểu vậy.
Trong file css mình định nghĩa chung chung thôi.
Ví dụ:

h1 {
font-size: 125%;
color: blue;
text-align: center;
line-height:125%;
padding-bottom: 0.2em;
border-bottom: 1.2px solid black;
margin: 0.3em 0.0em 0.3em 0.0em;
}

 

Epub chấp nhận hết các kiểu inline hay css. Cũng là một style để các bạn tìm hiểu tham khảo.

Machine cũng đóng góp style vào thread này nhé! Cứ post xen kẽ vào không sao đâu

 

Mẩu tiếp theo, heading chương dạng số bên trong hình tròn:



Code:

 

["Đánh dấu" ảnh]
Với ebook có nhiều ảnh minh họa nằm rải rác, khi soát lỗi chính tả chú ý "đánh dấu" ảnh, sau này đóng gói ebook sẽ nhanh.

Cách đánh dấu ảnh:
jjXYZjj
Trong đó XYZ là số trang trên sách giấy có ảnh minh họa. jj là chuỗi vô nghĩa
Nếu một trang sách giấy có hơn 1 ảnh, đánh dấu là:
jjXYZ-1jj
jjXYZ-2jj
jjXYZ-3jj
...

Sau khi soát chính tả xong, tìm kiếm jj (trên Word) sẽ ra một loạt XYZ, dựa vào đó để tách ảnh và đặt tên file ảnh.

Sau khi thêm thẻ p sẽ được:
<p>jjXYZjj</p>

Cú pháp hiển thị ảnh:
<div style="text-align: center;"><img src="../Images/XYZ.jpg"/></div>
Thay thế 2 lần theo màu là xong.

Ngoài ra có thể đánh dấu căn lề phải, căn lề giữa, đánh dấu Heading, đánh dấu ghi chú...
Ví dụ: đánh dấu căn lề phải:
rriNội dung
thêm thẻ p:
<p>rriNội dung</p>

Thay hàng loạt <p>rri bằng <p class="rri">
→ <p class="rri">Nội dung</p>

Trong file css định nghĩa rri là xong:
Ví dụ:

.rri{/*chữ nhỏ lệch phải */
font-size: 80%;
text-align: right;
text-indent: 0em;
}

 

Cái này "Thay Thế 3 Lần" là sao bác? Em thấy thay thế 1 lần được mà?

P/S: @tran ngoc anh lập topic này được đấy. Ai mắc míu gì trong lúc đóng sách thì vào đây mà hỏi. Đàng nào cũng có các cao thủ ẩn thân ở đây.
Em hỏi cái đầu tiên: file ảnh *.PNG.
Em muốn lấy cái ảnh có đuôi *.png để làm các vách ngăn phân đoạn, hoặc trang trí tiêu đề. Và khi đó... thì file ảnh này khi hiển thị trong epub nó sẽ không còn background nữa (nói cách khác: chỉ còn cái ảnh thôi, còn background của ảnh (có thể là màu gì gì đó) nhưng mà nó trùng với background của trang sách). Em tải cái *.png trên mạng về thì chèn vào là được. Sao em làm cái *.png của em thì chèn vào nó vẫn cứ chình ình cái background vậy các bác?
Hướng dẫn em cách làm *.png với các bác nhóe

 

Cái này là thay hàng loạt khi không thạo Regex
Ví dụ:
<h1>Chương 1<br/>Nhà khách Mẹ Ngỗng</h1>
<h1>Chương 2<br/>Phòng cầu London</h1>
<h1>Chương 3<br/>Maria có sừng</h1>
...
<h1>Chương 10<br/>Jack và Jill</h1>

Thay 1 lần chắc dùng Regex?

 

Như này bác:

Trong lệnh find em viết đúng như cấu trúc mẫu em trích dẫn phía trên nhé bác. Nếu khác hơn chút thì bác phải tự điều chỉnh cho phù hợp nhé.
Find: <h1>Chương (.*?)\s+<br/>(.*?)\s+</h1>
Replace: <h1><span style="font-size: 125%">Chương \1</span><br/><span style="font-size: 90%;">\2</span></h1>

 

Nếu như này thì viết đơn giản hơn:
Chỉ cần:
Find: <h1>Chương (.*?)<br/>(.*?)</h1>
Replace: <h1><span style="font-size: 125%">Chương \1</span><br/><span style="font-size: 90%;">\2</span></h1>
Chơi một phát ăn cả luôn bác

 

@vinaguy bạn cho mình cái minh họa về trường hợp của bạn để mình dễ hình dung đi. Mình đang hiểu vấn đề ở chính cái png, có thể là vì bạn chưa rọc bỏ phần nền thừa đi.

 

Đây bác.
Mẫu này chèn vào là được.

Còn cái em làm thì em vẫn đục lỗ bỏ hết background (ở photoshop, photoimpact) rồi mà chèn vào epub vẫn cứ có background, không trùng với background sách được nên em xóa mất tiêu rồi.
PS: Hình trên em chôm của bác Inno và đóng vào cuốn TRÂM TRỌN BỘ nhé.

 

Không có mẩu vật khó phân tích lắm.

Nếu là mình, mình luôn convert ra svg, vừa nhẹ vừa nét, và không có nền.

 

Bác hướng dẫn chi tiết dùm em cách convert với. Cứ viết các bước em sẽ hiểu bác ạ

 

Convert online mình dùng trang convertico ấy. Ra svg rồi dùng inkscap chỉnh thêm nếu muốn.