. This rule is cancelled for: * Floated elements * Absolutely positioned elements * Inline-block elements * Elements with overflow set to anything other than visible (They do not collapse margins with their children.) * Cleared elements (They do not collapse their top margins with their parent block’s bottom margin.) * The root element That is the reason why overflow:hidden solved the issue. ## CSS grids https://jsfiddle.net/zw9c7owa/ https://jsfiddle.net/zw9c7owa/3/ https://jsfiddle.net/zw9c7owa/4/ https://jsfiddle.net/zw9c7owa/6/ https://jsfiddle.net/zw9c7owa/7/ https://jsfiddle.net/zw9c7owa/8/ https://jsfiddle.net/zw9c7owa/12/ -> yeah! https://jsfiddle.net/zw9c7owa/13/ https://jsfiddle.net/zw9c7owa/14/ https://jsfiddle.net/zw9c7owa/15/ https://jsfiddle.net/zw9c7owa/16/ https://jsfiddle.net/zw9c7owa/17/ Emulate CSS media print : https://uxdesign.cc/i-totally-forgot-about-print-style-sheets-f1e6604cfd6 ## processing connections https://research.lafkon.net/projects/dit/ https://research.lafkon.net/projects/lac2008/ ### visualer les media print en redimensionnant la page @media screen and (max-width: 699px) or media print { ... } ### John Resig Micro template Si jamais vous avez besoin de générer du HTML en javascript... https://johnresig.com/blog/javascript-micro-templating/ ## Césures http://gitlab.constantvzw.org/osp/tools.html5lib_typogrify Les version récentes de webkit gèrent les césures interdire les césures -webkit-hyphens: none; -moz-hyphens: none; hyphens: none; autoriser les césures -webkit-hyphens: auto; Gérer les césures -webkit-hyphenate-limit-before: 2; /* 2 caractères minimum en fin de ligne, donc en début de mot */ -webkit-hyphenate-limit-after: 2; /* 3 caractères minimum en début de ligne, donc en fin de mot */ -webkit-hyphenate-limit-lines: 4; /* 4 lignes consecutives max */ NE PAS OUBLIER D'INSTALLER HYPHEN! sur arch `sudo pacman -S hyphen` ou `yaourt -S hyphen` ## CSS variables in @page https://stackoverflow.com/questions/44735420/using-custom-properties-with-page-rules ## Convertir tous les fichiers HTML en Markdown attention, vous allez perdre le contenu non-sémantique (classes, attributs, etc.) mais ça peut justement être une manière de nettoyer son code for file in *.html; do pandoc --from html --to markdown --output "${file%.*}.md" "$file"; done ## HTML2Print readme ###exemples de readme visuels - http://organon.osp.kitchen/70 - http://blog.lavillahermosa.com/brass-%E2%86%92-print-tool-v1/ - http://design.lavillahermosa.com/works-288-le-brass-2014 - http://blog.artsaucarre.be/artsnumeriques/2016/10/21/memory-learning-archives-et-bidouillages-workshop-au-mundaneum-24-261016/ - http://lorainefurter.net/readme/readme-workflows.html - https://hpg.io/ - https://youtu.be/eIgX6sPOqCY?t=2m40s ![](http://hpg.io/img/multi_format.png) https://upload.wikimedia.org/wikipedia/commons/4/41/FACTSHEET-EN.pdf https://research.lafkon.net/content/2.projects/6.wtf/99.wtf_generator_1_00_WEB.gif http://lorainefurter.net/readme/assets/readme/workflows/DigitalPublishingToolkit.png ### workflow d'un numéro de Médor - http://organon.osp.kitchen/90 ### python rss to html https://figureslibres.io/gogs/bachir/python-rss2html ```python #!/usr/bin/python # -*- coding: utf-8 -*- import feedparser from bs4 import BeautifulSoup def main(): # url du flux rss tpsreac_feed_url = "https://tempsdereaction.wordpress.com/feed/" # on aspire le flux rss avec feedparser tpsreac_feeds = feedparser.parse(tpsreac_feed_url) # base template du fichier html base = "" # create dom for html file base base_dom = BeautifulSoup(base, 'html.parser') # page base template page_base = "

" # boucle sur les entrées racine du flux for key in tpsreac_feeds: print(key) # on boucle sur les entrées du flux rss for entrie in tpsreac_feeds['entries']: print('- - - - -',entrie['title']) # just display entrie keys for key in entrie: print(key) # entries.extend( feed[ "items" ] ) # create page dom p_dom = BeautifulSoup(page_base, 'html.parser') # add content in page dom p_dom.section.append(entrie['summary']) # add newly created page dom to html dom base_dom.body.append(p_dom) # create main html file from filled base html dom with open("index.html", 'w') as fp: fp.write(base_dom.prettify(formatter=None)) if __name__ == "__main__": main() ``` ### python pandoc and template https://figureslibres.io/gogs/bachir/gitbook-html2print ```python #!/usr/bin/python # -*- coding: utf-8 -*- from bs4 import BeautifulSoup import pypandoc def main(): # create main html dom from template template_f = open("templates/main.tpl.html", "r") template_html = template_f.read() template_dom = BeautifulSoup(template_html, 'html.parser') pdoc_args = ['--mathjax', '--smart'] pdoc_filters = [] output = pypandoc.convert_file("lechemin/de/monfichier.md", to='html5', format='markdown+header_attributes+link_attributes+bracketed_spans', extra_args=pdoc_args, filters=pdoc_filters) # outputfile=out_f) # print("output :\n"+output) output_dom = BeautifulSoup(output, 'html.parser') template_dom.append(output_dom) # create main html file from filled template html dom html_f = 'monfichier.html' with open(html_f, 'w') as fp: fp.write(template_dom.prettify(formatter=None)) if __name__ == "__main__": main() ``` ## Ajuster une image voir https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit et https://developer.mozilla.org/en-US/docs/Web/CSS/object-position ## CSS regions #flow-main { -webkit-flow-into: flow-main; flow-into: flow-main; } .flow-main { -webkit-flow-from: flow-main; flow-from: flow-main; } ex: https://jsfiddle.net/asmqaheq/