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

Thảo luận trong 'Hướng dẫn chung' bắt đầu bởi tran ngoc anh, 19/8/21.

  1. tran ngoc anh

    tran ngoc anh Cử nhân

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

    [​IMG]

    Code:

     
    Chỉnh sửa cuối: 19/8/21
  2. chanhvan1987

    chanhvan1987 Lớp 9

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

    tran ngoc anh Cử nhâ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.
     
    chanhvan1987 thích bài này.
  4. tran ngoc anh

    tran ngoc anh Cử nhân

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

    [​IMG]

    [​IMG]
     
    Lan Giao, chanhvan1987 and amylee like this.
  5. tran ngoc anh

    tran ngoc anh Cử nhân

    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.

    [​IMG]
     
  6. machine

    machine Lớp 6

    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>
     
    tran ngoc anh thích bài này.
  7. tran ngoc anh

    tran ngoc anh Cử nhân

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

    machine Lớp 6

    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;
    }
     
  9. tran ngoc anh

    tran ngoc anh Cử nhân

    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 :D
     
    machine thích bài này.
  10. tran ngoc anh

    tran ngoc anh Cử nhân

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

    [​IMG]

    Code:

     
    longking, huydatvns, machine and 2 others like this.
  11. machine

    machine Lớp 6

    ["Đá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 :D
    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;
    }
     
    tran ngoc anh thích bài này.
  12. vinaguy

    vinaguy Lớp 4

    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
     
    tran ngoc anh thích bài này.
  13. machine

    machine Lớp 6

    Cái này là thay hàng loạt khi không thạo Regex :D
    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?
     
  14. vinaguy

    vinaguy Lớp 4

    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>
     
  15. vinaguy

    vinaguy Lớp 4

    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
     
    machine thích bài này.
  16. tran ngoc anh

    tran ngoc anh Cử nhân

    @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.
     
    vinaguy thích bài này.
  17. vinaguy

    vinaguy Lớp 4

    Đây bác.
    Mẫu này chèn vào là được.
    part.png
    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é.
     
  18. tran ngoc anh

    tran ngoc anh Cử nhân

    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.
     
    vinaguy thích bài này.
  19. vinaguy

    vinaguy Lớp 4

    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 ạ
     
  20. tran ngoc anh

    tran ngoc anh Cử nhân

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

Chia sẻ trang này