233 lines
6.8 KiB
Markdown
233 lines
6.8 KiB
Markdown
## 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:
|
||
"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 <h1> therefore taken and applied to the parent <div>.
|
||
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
|
||
|
||
<iframe width="560" height="315" src="https://youtu.be/eIgX6sPOqCY?t=2m40s" frameborder="0" allowfullscreen></iframe>
|
||
|
||
|
||
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 = "<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
|
||
```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/
|
||
|