feat(ui): text-fit, line-height, and ems against the font size an element ends with
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
parent
d163bad406
commit
355201f094
16 changed files with 149 additions and 21 deletions
10
examples/library/ui_text_parts/Fit.lss
Normal file
10
examples/library/ui_text_parts/Fit.lss
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
@import "base.lss";
|
||||
.page { width: 400px }
|
||||
.chip { width: 100px; font-size: 16px; text-fit: shrink 10px }
|
||||
.mid { width: 80px }
|
||||
.lines { width: 60px; font-size: 16px; line-height: 2 }
|
||||
.tall { line-height: 30px }
|
||||
.em { padding: 1em; font-size: 20px }
|
||||
.em2 { padding: 1em }
|
||||
.page .em2 { font-size: 24px }
|
||||
.tie { color: #00ff00 }
|
||||
4
examples/library/ui_text_parts/Fit.ludic
Normal file
4
examples/library/ui_text_parts/Fit.ludic
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
# Fit.ludic - chips too narrow for their words, lines spaced by line-height, ems read against the
|
||||
# font size an element ends with, and a sheet's own rule over an imported one of the same weight
|
||||
component Fit {
|
||||
}
|
||||
10
examples/library/ui_text_parts/Fit.xml
Normal file
10
examples/library/ui_text_parts/Fit.xml
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
<div class="page">
|
||||
<p class="chip long">Photograph the Bells from the signs</p>
|
||||
<p class="chip">Short</p>
|
||||
<p class="chip mid">Medium words</p>
|
||||
<p class="lines">one two three four five six</p>
|
||||
<p class="tall">a</p>
|
||||
<div class="em">x</div>
|
||||
<div class="em2">y</div>
|
||||
<p class="tie">t</p>
|
||||
</div>
|
||||
1
examples/library/ui_text_parts/base.lss
Normal file
1
examples/library/ui_text_parts/base.lss
Normal file
|
|
@ -0,0 +1 @@
|
|||
.tie { color: #0000ff }
|
||||
Loading…
Add table
Add a link
Reference in a new issue