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

[Định dạng gạch đầu dòng cho Moon Reader]
Vì Moon Reader không hiển thị được gạch đầu dòng theo cách trên nên mình đã tìm cách hiển thị gạch đầu dòng (một cách gần đúng) cho Moon Reader. Ý tưởng là khai báo text-indent với khoảng cách âm (-0.8em) và chỉnh lề trái (1em).
Qua quan sát thực tế, khai báo text-indent với khoảng cách dương thì dòng đầu tiên của 1 paragraph sẽ thụt vào so với các dòng sau. Do đó khai báo text-indent với khoảng cách âm thì dòng đầu tiên của paragraph sẽ lồi ra so với các dòng sau

Cách làm cụ thể:
trong file css khai báo thêm 1 class là "dash"
.dash
{ /*định dạng gạch đầu dòng*/
text-align: justify;
text-indent: -0.8em;/*khoảng cách âm*/
line-height:130%;
margin: 0.0em 0.2em 0.1em 1.0em;
}
Sau đó sử dụng bình thường:
<p class="dash">- Anh từng ở đây, hả?</p>
<p class="dash">- Trí nhớ anh tốt thật.</p>
<p class="dash">- Năm đó tôi vừa mở nhà khách này.

 

​

Thêm một dòng trống
<p><span>&nbsp;</span></p>

Cách này chỉ áp dụng cho Reasily, Moon Reader không dùng được
Các cách như bên dưới đều không có tác dụng:
<p></p>
<p> </p>

Tạo tam giác đều bằng 3 dấu *
Thay vì dùng 1 dòng trống hoặc một dấu * để ngăn cách giữa các paragraph, có thể tạo một tam giác đều từ 3 dấu sao cho đỡ nhàm chán.
Cách làm:

<p class="cent"><span>*</span></p>
<p class="cent"><span class="cent">*&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*</span></p>

trong đó class cent định dạng căn lề giữa:
.cent{/*canh lề giữa*/
text-align: center;
text-indent: 0em;
}

Đặt Heading vào giữa màn hình
Cách này không áp dụng được cho Moon Reader
Với những Heading không có nội dung đi kèm, khai báo margin-top lớn (khoảng 7em đến 9em) sẽ cho phép hiển thị Heading giữa màn hình.
Ví dụ:
h1 {
font-size: 130%;
text-align: center;
line-height:250%;
margin: 7em 0.0em 0.3em 0.0em;
/*margin: top right bottom left*/
}

Chi tiết xem ebook demo đính kèm.

 

Có thể chỉnh thế này:
margin-top: 50%;
Nó sẽ đặt dòng trên cùng ở vị trí 50% của hình vuông có cạnh là chiều rộng.

 

@machine về khoảng đơn vị trong css, với bất kể đơn vị nào, khi bạn set giá trị bằng 0 thì không cần đơn vị nữa, cụ thể margin: 7em 0.0em 0.3em 0.0em; sẽ trở thành margin: 7em 0 0.3em 0;

Bạn sẽ rất hay bắt gặp mình set margin: 0; trong các epub của mình.

 

Em đua theo các bác tí nghen, chớ bảo em nhiều chiện (tất cả những thứ em bổ sung vào cách của bác @machine đều xài tốt trên Moon nhé các bác)

Trường hợp của bác @tran ngoc anh mô tả ở trong hình, em xác nhận với bác @machine là hiển thị trên Moon rất tốt bác ạ. Moon chỉ khó hiển thị trường hợp đánh số thứ tự (bằng số) - từ 1-9 không vấn đề gì với Moon, nhưng từ 10 trở đi (số có 2 chữ số) thì sẽ xảy ra tình trạng chữ cái đầu của dòng chồm lên một phần số cuối của list.

Em cũng chưa hiểu bác muốn kéo dấu gạch đầu dòng về sát mép lề để làm gì luôn? Bác cho biết thêm tí thông tin ở đây nhé. Hay bác muốn tất cả các chữ đầu dòng phải nằm trên một trục thẳng đứng? Theo cách trình bày của bác thì dấu gạch ở đây không phải là List mà là 1 thành phần trong paragraph.

Thêm một dòng trống thì bác không cần dán thẻ <span>&nbsp;</span>. Bác chỉ cần copy cái miếng vàng vàng trong sách demo của bác, dán vào giữa thẻ <p>. Làm theo hình dưới:

Tạo tam giác đều cũng tương tự như trên, bác không cần thẻ <span class="cent"> nữa (bị trùng nhau rồi bác ơi).
Những thứ trên đây nên lưu lại trong Save Search mà dùng dần (đem ra replace cho nhanh)

Chỗ này của bác không hiển thị đẹp trên Moon được, theo em thì bác làm thừa lệnh. Bác thử chỉnh sửa lại xem sao nhé?
Trong:
<h1><span style="font-size: 120%">Phần 1</span><br/><span style="font-size: 90%;">Dài dòng</span></h1>
Trong css:
h1 {
font-size: 130%;
text-align: center;
line-height: 250%;
margin: 7em 0 0.3em 0;
/*margin: top right bottom left*/
}
Bác thử bỏ đi dòng font-size: 130%; trong css xem sao?

 

Hai cụ nói với nhau về Moon em chả theo kịp tẹo nào

 

Sorry bác... Cho bọn em nói chuyện riêng tẹo nha.
Mà bác cài Moon vào test luôn đi bác. Vài hôm nữa biết đâu bác dẹp hết những thứ khác giữ lại Moon ấy chứ

 

Sorry bác... Cho bọn em nói chuyện riêng tẹo nha.
Mà bác cài Moon vào test luôn đi bác. Vài hôm nữa biết đâu bác dẹp hết những thứ khác giữ lại Moon ấy chứ

 

Á quên... Còn vụ làm một hàng trống này, sao bác không dùng <br/> nhỉ?

 

Em đề xuất các cụ nên đánh dấu thẻ p chỗ cần có dòng trống, rồi margin-tôp cho em ấy 2em hoặc 3,14em cũng được, chứ lỡ muốn thêm 2 hay 3 dòng thì chèn 2, 3 dòng thẻ p trống luôn thì doi ra nhiều thứ

 

Chính xác. Em đã làm thế này.

 

Như vậy cũng bảo vệ dòng trống được nếu lỡ có chạy regex dọn khoảng trắng cho nội dung được ôm sát, vì tất cả các khoảng trắng nbsp, ensp, emsp đều nằm trong khoảng tìm kiếm của \s+.

 

Để cho nó thẳng hàng phần nội dung y như dạng list gạch đầu dòng vậy đó, mô phỏng dạng list, trong thích mắt phết

 

Moon hiểu thẻ center không các cụ? Đây là thẻ mặc định không cần css thêm.

 

Moon hiểu <center> bác nhóe.
Một số chỗ Moon không hiểu, em liệt kê các bác tham khảo:
1. Không hiểu DropCap first letter
2. Hiểu nửa vời border-radius
3. Không hiểu tab giữa câu cuối cùng của đoạn văn
4. Hiểu, nhưng làm sai đối với list đánh số thứ tự: Từ 1-9 hiểu và làm đúng; từ 10 trở lên làm được nhưng không đẹp.
Đây là một số thứ em nắm rõ, Còn mấy thứ có thể em ít gặp nên quên mất rồi. Lúc nào gặp nêu tiếp

 

Cảm ơn cụ
Chắc chỉnh 40% - 45% là vừa đẹp

 

Sét cứng cho body ở file html cần định dạng kiểu này, thường chỉ có mỗi cái heading thôi đúng không? Nên là set cứng rồi thì set riêng cho heading cách đầu một khoảng theo ước lệ phần trăm là chuẩn cho các tỉ lệ màn hình khác nhau.

<head>
<style>
body {
position: absolute;
width: 100vw;
height: 100vh;
text-align: center;
}
</style>
</head>

 

Tối rảnh sẽ thử lại xem sao. Thank you

Cái này bạn @tran ngoc anh trả lời rồi

Đúng là thừa <span class="cent">

Không phải thừa lệnh đâu. Bỏ dòng font-size: 130%; không thay đổi gì cả.

<h1><span style="font-size: 120%">Phần 1</span><br/><span style="font-size: 90%;">Dài dòng</span></h1>
Hai chỗ font-size bôi đỏ bên trên là để tạo Heading có 2 dòng chữ to chữ nhỏ thôi.

Trong Moon Reader để Heading ra giữa màn hình thì cần khai báo Margin-top: 27em; cao hơn rất nhiều so với Reasily (chỉ cần 7em).
Có lẽ dùng đơn vị % như cụ RGBCD gợi ý là ổn hơn.

Cảm ơn cụ vinaguy đã comment rất chi tiết

 

Moon Reader hiểu thẻ center mà kiểu căn lề giữa rất hay dùng nên mình tách riêng nó ra thành 1 class trong file css.
Trong ebook demo là rút gọn nên tạo cảm giác không có nó cũng được, thực ra class cent trong file css của mình màu mè hơn chút
.cent{/*chữ canh lề giữa*/
font-family: add;
text-align: center;
text-indent: 0em;
font-size: 85%;
}

 

Cái này có nhược điểm chết người là khi convert sang azw3 thì Kindle xóa mất (không hiển thị) trang này.