AuroraMiddleware/gtk
1
0
Fork 1
mirror of https://gitlab.gnome.org/GNOME/gtk.git synced 2024-11-08 17:50:10 +00:00
Code Issues Projects Releases Wiki Activity

docs: Use our own box model illustration

Browse Source 
This one has a dark mode too.
This commit is contained in:
Matthias Clasen 2023-03-25 16:16:34 -04:00
parent de3b37d80c
commit 3d35b848d1
5 changed files with 199 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
docs/reference/gtk/coordinates.md
View File

@ -16,7 +16,10 @@ ignored. The section will explain the details for the few cases when it is impor
When it comes to rendering, GTK follows the CSS box model as far as practical.
![](https://www.w3.org/TR/css-box-3/images/box.png)
<picture>
<source srcset="box-model-dark.png" media="(prefers-color-scheme: dark)">
<img alt="Box Model" src="box-model-light.png">
</picture>
The CSS stylesheet that is in use determines the sizes (and appearance) of the
margin, border and padding areas for each widget. The size of the content area

2
docs/reference/gtk/gtk4.toml.in
View File

@ -242,5 +242,7 @@ content_images = [
"images/rich-list.png",
"images/data-table.png",
"images/navigation-sidebar.png",
"images/box-model-light.png",
"images/box-model-dark.png",
]
urlmap_file = "urlmap.js"

BIN
docs/reference/gtk/images/box-model-dark.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 24 KiB

BIN
docs/reference/gtk/images/box-model-light.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 23 KiB

193
docs/reference/gtk/images/box-model.svg Normal file
View File

@ -0,0 +1,193 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="210mm"
height="297mm"
viewBox="0 0 210 297"
version="1.1"
id="svg5"
inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
sodipodi:docname="box-model.svg"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<sodipodi:namedview
id="namedview7"
pagecolor="#ffffff"
bordercolor="#000000"
borderopacity="0.25"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
inkscape:document-units="mm"
showgrid="false"
inkscape:zoom="0.84096521"
inkscape:cx="265.76605"
inkscape:cy="312.14133"
inkscape:window-width="1920"
inkscape:window-height="1123"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="1"
inkscape:current-layer="layer1" />
<defs
id="defs2">
<marker
style="overflow:visible"
id="Arrow2"
refX="0"
refY="0"
orient="auto-start-reverse"
inkscape:stockid="Arrow2"
markerWidth="7.6999998"
markerHeight="5.5999999"
viewBox="0 0 7.7 5.6"
inkscape:isstock="true"
inkscape:collect="always"
preserveAspectRatio="xMidYMid">
<path
transform="scale(0.7)"
d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
style="fill:context-stroke;fill-rule:evenodd;stroke:none"
id="arrow2L" />
</marker>
<marker
style="overflow:visible"
id="Arrow2-4"
refX="0"
refY="0"
orient="auto-start-reverse"
inkscape:stockid="Arrow2"
markerWidth="7.6999998"
markerHeight="5.5999999"
viewBox="0 0 7.7 5.6"
inkscape:isstock="true"
inkscape:collect="always"
preserveAspectRatio="xMidYMid">
<path
transform="scale(0.7)"
d="M -2,-4 9,0 -2,4 c 2,-2.33 2,-5.66 0,-8 z"
style="fill:context-stroke;fill-rule:evenodd;stroke:none"
id="arrow2L-7" />
</marker>
</defs>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1">
<rect
style="fill:none;stroke:#000000;stroke-width:10.58333333;stroke-dasharray:none"
id="rect234-0"
width="112.51476"
height="70.089249"
x="38.634876"
y="49.512993" />
<rect
style="fill:none;stroke:#000000;stroke-width:0.487868;stroke-dasharray:none"
id="rect234"
width="146.21118"
height="103.37679"
x="21.283342"
y="33.173706" />
<rect
style="fill:none;stroke:#000000;stroke-width:0.54387;stroke-dasharray:none"
id="rect234-3"
width="79.543648"
height="37.520485"
x="55.724121"
y="65.367287" />
<text
xml:space="preserve"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:10.5834px;font-family:Cantarell;-inkscape-font-specification:'Cantarell, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:0.264583;stroke-dasharray:none"
x="76.878265"
y="100.819"
id="text3935"><tspan
sodipodi:role="line"
id="tspan3933"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:10.5834px;font-family:Cantarell;-inkscape-font-specification:'Cantarell, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;fill:#000000;fill-opacity:1;stroke-width:0.264583"
x="76.878265"
y="100.819">content</tspan></text>
<text
xml:space="preserve"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:10.5834px;font-family:Cantarell;-inkscape-font-specification:'Cantarell, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:0.264583;stroke-dasharray:none"
x="77.072464"
y="111.58885"
id="text4767"><tspan
sodipodi:role="line"
id="tspan4765"
style="fill:#000000;fill-opacity:1;stroke-width:0.264583"
x="77.072464"
y="111.58885">padding</tspan><tspan
sodipodi:role="line"
style="fill:#000000;fill-opacity:1;stroke-width:0.264583"
x="77.072464"
y="124.8181"
id="tspan4769" /></text>
<text
xml:space="preserve"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:10.5834px;font-family:Cantarell;-inkscape-font-specification:'Cantarell, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:0.264583;stroke-dasharray:none"
x="77.337868"
y="133.01045"
id="text4767-1"><tspan
sodipodi:role="line"
id="tspan8053"
x="77.337868"
y="133.01045">margin</tspan><tspan
sodipodi:role="line"
id="tspan8055"
x="77.337868"
y="146.2397"></tspan></text>
<text
xml:space="preserve"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:10.5834px;font-family:Cantarell;-inkscape-font-specification:'Cantarell, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:0.264583;stroke-dasharray:none;stroke-opacity:1"
x="77.311295"
y="123.22021"
id="text7028"><tspan
sodipodi:role="line"
id="tspan7026"
style="fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:0.264583;stroke-dasharray:none;stroke-opacity:1"
x="77.311295"
y="123.22021">border</tspan></text>
<path
style="fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:0.264583;stroke-dasharray:none;stroke-opacity:1;marker-end:url(#Arrow2)"
d="M 58.115912,67.846321 71.79645,67.813301"
id="path9563" />
<path
style="fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:0.264583;stroke-dasharray:none;stroke-opacity:1;marker-end:url(#Arrow2-4)"
d="m 58.054931,67.806272 -0.03031,13.680545"
id="path9563-6"
inkscape:transform-center-x="0.99122989"
inkscape:transform-center-y="-10.282891" />
<text
xml:space="preserve"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:3.52785px;font-family:Cantarell;-inkscape-font-specification:'Cantarell, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:0.264583;stroke-dasharray:none;stroke-opacity:1"
x="74.660751"
y="69.01046"
id="text10129"><tspan
sodipodi:role="line"
id="tspan10127"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:3.52785px;font-family:Cantarell;-inkscape-font-specification:'Cantarell, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;stroke-width:0.264583"
x="74.660751"
y="69.01046">X</tspan></text>
<text
xml:space="preserve"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:3.52785px;font-family:Cantarell;-inkscape-font-specification:'Cantarell, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:0.264583;stroke-dasharray:none;stroke-opacity:1"
x="56.974892"
y="86.498825"
id="text10133"><tspan
sodipodi:role="line"
id="tspan10131"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:3.52785px;font-family:Cantarell;-inkscape-font-specification:'Cantarell, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;stroke-width:0.264583"
x="56.974892"
y="86.498825">Y</tspan></text>
<circle
style="fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:0.264583;stroke-dasharray:none;stroke-opacity:1"
id="path10187"
cx="58.076889"
cy="67.895195"
r="0.2" />
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 8.8 KiB