CSS obscure rule: margin-top of

affects parent's margin

As of why they decided that this elements should behave like this it is still unclear for me; but at least we were able to find a rule that applies to collapsing margins: "In simple terms, this definition indicates that when the vertical margins of two elements are touching, only the margin of the element with the largest margin value will be honored, while the margin of the element with the smaller margin value will be collapsed to zero Basically in our example on the original question, the biggest margin-top is the one of the

therefore taken and applied to the parent

. 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

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

#!/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 = "<html><head></head><body></body></html>"
   # create dom for html file base
   base_dom = BeautifulSoup(base, 'html.parser')

   # page base template
   page_base = "<section class='page'></section>"

   # 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

#!/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/

cookbook.md 6.8 KB Riwayat Mentahan