ola5doc/sys/tmp/cookbook.textile

## CSS obscure rule: margin-top of
<h1>
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: &quot;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&#45;top is the one of the
<h1>
therefore taken and applied to the parent
<div>
. This rule is cancelled for: &#42; Floated elements &#42; Absolutely positioned elements &#42; Inline&#45;block elements &#42; Elements with overflow set to anything other than visible (They do not collapse margins with their children.) &#42; Cleared elements (They do not collapse their top margins with their parent block's bottom margin.) &#42; The root element That is the reason why overflow:hidden solved the issue.

h2(#css-grids). 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/ &#45;&gt; 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&#45;totally&#45;forgot&#45;about&#45;print&#45;style&#45;sheets&#45;f1e6604cfd6

h2(#processing-connections). processing connections

https://research.lafkon.net/projects/dit/ https://research.lafkon.net/projects/lac2008/

h3(#visualer-les-media-print-en-redimensionnant-la-page). visualer les media print en redimensionnant la page

&#64;media screen and (max&#45;width: 699px) or media print { ... }

h3(#john-resig-micro-template). John Resig Micro template

Si jamais vous avez besoin de générer du HTML en javascript...

https://johnresig.com/blog/javascript&#45;micro&#45;templating/

h2(#césures). Césures

http://gitlab.constantvzw.org/osp/tools.html5lib&#95;typogrify

Les version récentes de webkit gèrent les césures

interdire les césures

bc. -webkit-hyphens: none;
   -moz-hyphens: none;
        hyphens: none;


autoriser les césures

bc. -webkit-hyphens: auto;


Gérer les césures

bc. -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@

h2(#css-variables-in-page). CSS variables in &#64;page

https://stackoverflow.com/questions/44735420/using&#45;custom&#45;properties&#45;with&#45;page&#45;rules

h2(#convertir-tous-les-fichiers-html-en-markdown). Convertir tous les fichiers HTML en Markdown

attention, vous allez perdre le contenu non&#45;sémantique (classes, attributs, etc.) mais ça peut justement être une manière de nettoyer son code

for file in &#42;.html; do pandoc &#45;&#45;from html &#45;&#45;to markdown &#45;&#45;output &quot;<span class="math">{file%.*}.md&quot; &quot;</math>file&quot;; done

h2(#html2print-readme). HTML2Print readme

h3(#exemples-de-readme-visuels). exemples de readme visuels

* http://organon.osp.kitchen/70
* http://blog.lavillahermosa.com/brass&#45;%E2%86%92&#45;print&#45;tool&#45;v1/
* http://design.lavillahermosa.com/works&#45;288&#45;le&#45;brass&#45;2014
* http://blog.artsaucarre.be/artsnumeriques/2016/10/21/memory&#45;learning&#45;archives&#45;et&#45;bidouillages&#45;workshop&#45;au&#45;mundaneum&#45;24&#45;261016/
* http://lorainefurter.net/readme/readme&#45;workflows.html
* https://hpg.io/
* https://youtu.be/eIgX6sPOqCY?t=2m40s

<iframe width="560" height="315" src="https://youtu.be/eIgX6sPOqCY?t=2m40s" frameborder="0" allowfullscreen>
</iframe>
!http://hpg.io/img/multi_format.png! https://upload.wikimedia.org/wikipedia/commons/4/41/FACTSHEET&#45;EN.pdf https://research.lafkon.net/content/2.projects/6.wtf/99.wtf&#95;generator&#95;1&#95;00&#95;WEB.gif

http://lorainefurter.net/readme/assets/readme/workflows/DigitalPublishingToolkit.png

h3(#workflow-dun-numéro-de-médor). workflow d'un numéro de Médor

* http://organon.osp.kitchen/90

h3(#python-rss-to-html). python rss to html

https://figureslibres.io/gogs/bachir/python&#45;rss2html

<pre class="python">
#!/usr/bin/python
# -*- coding: utf-8 -*-


import feedparser
from bs4 import BeautifulSoup

def main():
   # url du flux rss
   tpsreac_feed_url = &quot;https://tempsdereaction.wordpress.com/feed/&quot;

   # on aspire le flux rss avec feedparser
   tpsreac_feeds = feedparser.parse(tpsreac_feed_url)

   # base template du fichier html
   base = &quot;&lt;html&gt;&lt;head&gt;&lt;/head&gt;&lt;body&gt;&lt;/body&gt;&lt;/html&gt;&quot;
   # create dom for html file base
   base_dom = BeautifulSoup(base, 'html.parser')

   # page base template
   page_base = &quot;&lt;section class='page'&gt;&lt;/section&gt;&quot;

   # 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[ &quot;items&quot; ] )

      # 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(&quot;index.html&quot;, 'w') as fp:
      fp.write(base_dom.prettify(formatter=None))


if __name__ == &quot;__main__&quot;:
   main()

</pre>

h3(#python-pandoc-and-template). python pandoc and template

https://figureslibres.io/gogs/bachir/gitbook&#45;html2print

<pre class="python">
#!/usr/bin/python
# -*- coding: utf-8 -*-

from bs4 import BeautifulSoup
import pypandoc

def main():
       # create main html dom from template
       template_f = open(&quot;templates/main.tpl.html&quot;, &quot;r&quot;)
       template_html = template_f.read()
       template_dom = BeautifulSoup(template_html, 'html.parser')
    

      pdoc_args = ['--mathjax',
                   '--smart']

      pdoc_filters = []

      output = pypandoc.convert_file(&quot;lechemin/de/monfichier.md&quot;,
                               to='html5',
                               format='markdown+header_attributes+link_attributes+bracketed_spans',
                               extra_args=pdoc_args,
                               filters=pdoc_filters)
                              #  outputfile=out_f)

      # print(&quot;output :\n&quot;+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__ == &quot;__main__&quot;:
   main()

</pre>

h2(#ajuster-une-image). Ajuster une image

voir https://developer.mozilla.org/en&#45;US/docs/Web/CSS/object&#45;fit et https://developer.mozilla.org/en&#45;US/docs/Web/CSS/object&#45;position

h2(#css-regions). CSS regions

h1(#flow-main). flow&#45;main {

bc. -webkit-flow-into: flow-main;
        flow-into: flow-main;


}

.flow&#45;main { &#45;webkit&#45;flow&#45;from: flow&#45;main; flow&#45;from: flow&#45;main; }

ex: https://jsfiddle.net/asmqaheq/