Forum
Aktif konular
Üyeler
Kurallar
Arama
Css İle Line Counter Css İle Line Counter
-
Arkadaşlar dompdf kütühanesi kullanılarak pdf e çevrilen bir html tablo yapısı var. Html şablon kütüphane aracılığıyle PDF olarak response ediliyor.
Müşteri bu sayfada her satır başına (5 in katları olarak) satır numarasının yazılmasını istiyor. Örnek: https://prnt.sc/vc4m31
Her p tagını bir satır olarak saydırmak istemiyorum, çünkü paragraflar uzun. JavaScript ile yapınca sayfa render edilmeden basıyor sonucu, config de enable_javascript ayarını true olarak ayarladım ama yine de render etmiyor.
Sonuç olarak css ile veya başka şekilde nasıl bir çözüm üretebilirim buna ?
Html kod yapısı: https://codeshare.io/5w6V8x
Not: Script ve doğal olarak bu sayfa benim tarafımdan yazılmadı. Blade template in getirdiği kolaylıkların hepsi gözardı edilmiş, küfredecek kişiler bana etmesin :)
coder2 tarafından 04/Kas/20 21:39 tarihinde düzenlenmiştir -
örnek html atsana,
-
javascript le kolay yaparsin hocam orada ne sorunu yasiyorsun anlamadim render dan sonra calistirmayi denedin mi? render dan sonrasi yok mu html degil mi output?
-
Sayfadaki <?=$app_background ?> şeklinde gelen değişkenlerin içinde html kodlar var. Arka planda her bir değişken için bir method oluşturulmuş, çok saçma bir durum ama durum bu.
Not: Script ve doğal olarak bu sayfa benim tarafımdan yazılmadı. Blade template in getirdiği kolaylıkların hepsi gözardı edilmiş, küfredecek kişiler bana etmesin :)
-
https://jsfiddle.net/n2xkgt7s/2/
https://www.w3.org/TR/css-content-3/#counters
https://blog.logrocket.com/styling-numbered-lists-with-css-counters/
In this example, counter-reset sets list-number to 0. Each time the counter-increment is called, the value of list-number increases by 2, so, you’ll see numbers as 2, 4, and 6.
div.list {
counter-reset: list-number;
}
div.list div:before {
counter-increment: list-number 2;
// other styles
}
abdullahazad tarafından 04/Kas/20 21:38 tarihinde düzenlenmiştir -
abdullahazad bunu yazdı
Hocam counter-increment ile yaptım fakat p tagında paragraf içeriği uzun olduğu için her paragraf tek satırmış gibi sayıldı. Bahsettiğim kod buydu:
pre{ counter-reset: line; } p{ counter-increment: line; } p:before{ content: counter(line); } -
Mecburen php ile verileri diziye aktarıp, chunk ile her satıra gelecek kelime sayısına göre parse edip düzenledim. Sonuç olarak veriler aşağıdaki formatta oldu:
<p> <span class="line-start">Buraya 1. satır</span> <span class="line-start">Buraya 2. satır</span> <span class="line-start">Buraya 3. satır</span> <span class="line-start">Buraya 4. satır</span> <span class="line-start">Buraya 5. satır</span> <span class="line-start">Buraya 6. satır</span> <span class="line-start">Buraya 7. satır</span> <span class="line-start">Buraya 8. satır</span> <span class="line-start">Buraya 9. satır</span> <span class="line-start">Buraya 10. satır</span> </p> <!-- //... -->Css kodu:
span.line-start{ display: block; margin-block-start: 1em; margin-block-end: 1em; margin-inline-start: 0px; margin-inline-end: 0px; counter-increment: line; } span.line-start:before{ content: counter(line); padding-right: 25px; font-size: 24px; color: #aaa; }Her satırın yanında 1, 2, 3 şeklinde satır numarası yazılıyor şuanda. 1-5-10 şeklinde beşin katlarını göstermek için ne yapmam gerekir. Nette counter i +5 artıran örnekler var ( https://stackoverflow.com/questions/37373010/how-can-i-add-line-numbering-to-my-paragraph ) ama benim kodlara uygulayamadım.
coder2 tarafından 05/Kas/20 15:57 tarihinde düzenlenmiştir
Kısayol
Şikayet
Özel Mesaj
Alıntı yap
Cevapla