User:Zuhui/SI26/Storybook: Difference between revisions
< User:Zuhui | SI26
(16 intermediate revisions by the same user not shown) | |||
Line 6: | Line 6: | ||
: Using <code style="font-size: 13px;>display: flex</code><br> | : Using <code style="font-size: 13px;>display: flex</code><br> | ||
#Shrinking the browser window randomly removes words from the sentence, one by one, in correspondence with the reduced pixel count. | #Shrinking the browser window randomly removes words from the sentence, one by one, in correspondence with the reduced pixel count. | ||
#Expanding the window brings words back, also | #Expanding the window brings words back, also randomly, reconstructing the sentence into a new structure each time. | ||
<br> | <br> | ||
<div style="display: flex; flex-wrap: wrap; justify-content: center;"> | <div style="display: flex; flex-wrap: wrap; justify-content: center;"> | ||
Line 20: | Line 20: | ||
</div> | </div> | ||
<br><br><br> | <br><br><br> | ||
<center><h4 style="font-size: 16px;"> | <center><h4 style="font-size: 16px;">Do tigers melt like butter in the forest?</h4></center> | ||
<br> | <br> | ||
<br> | <br> | ||
<center> | <center>'''[[User:Zuhui//Drafts/Do Tigers Melt Like Butter in the Forest? |[context here]]]'''</center> | ||
<br> | <br> | ||
</div> | </div> | ||
Line 46: | Line 32: | ||
<div style="text-align: left; border: 1px solid black; padding: 30px;" > | <div style="text-align: left; border: 1px solid black; padding: 30px;" > | ||
* I'm envisioning a kind of storybook that users can save the screens they like in the browser. once they're done, they can export them as a multi-paged pdf file containing all the screens they've saved in the browser. even print them out in the end.<br> | * I'm envisioning a kind of storybook that users can save the screens they like in the browser. once they're done, they can export them as a multi-paged pdf file containing all the screens they've saved in the browser. even print them out in the end.<br> | ||
* Inspired by [[User:Zuhui//Personal Reader/House of dust |The House of Dust by Alison Knowles]], I imagined adding random words as the browser window extends, rather than simply re-aligning previous words in the sentence as I did on my initial sketch. | * Inspired by [[User:Zuhui//Personal Reader/House of dust |The House of Dust by Alison Knowles]], <s>I imagined adding random words as the browser window extends, rather than simply re-aligning previous words in the sentence as I did on my initial sketch.</s> | ||
<br> | <br> | ||
<div style="display: flex; flex-wrap: wrap; width: 100%; height: auto;"> | <div style="display: flex; flex-wrap: wrap; width: 100%; height: auto;"> | ||
Line 59: | Line 44: | ||
<center><h4 style="font-size: 16px;">Storybook in pdf</h4></center> | <center><h4 style="font-size: 16px;">Storybook in pdf</h4></center> | ||
<br> | <br> | ||
# A button that allows users to save the current state of the browser window --not to the local computer, but within the browser itself. | # A button(or a key) that allows users to save the current state of the browser window --not to the local computer, but within the browser itself. | ||
# Another button would then enable users to export these saved states as a PDF file, allowing them to print out each saved version of the browser window in chronological order. | # Another button/key would then enable users to export these saved states as a PDF file, allowing them to print out each saved version of the browser window in chronological order. | ||
</div> | </div> | ||
</div> | </div> | ||
</div> | </div> | ||
==To do== | ==To do== | ||
I | |||
<br><br> | ===[[/Code to work |Code to work 1]]=== | ||
▲workflow<br> | |||
I made the first sketch by using an ai chatbot but I want to write the code without it from the beginning. | |||
<br> | |||
<br> | |||
===[[/Code to work 2 |Code to work 2]]=== | |||
▲with help from Doriane and Joseph<br> | |||
try with the simplest approach to structure html/java script, and richer iterations in CSS | |||
<br> | |||
<br> | |||
<br> | |||
<br> | |||
'''For CSS drawing, following analysis is needed:''' | |||
* identify the basic structure and elements of the sentence | * identify the basic structure and elements of the sentence | ||
* define the possible | * define the possible permutational variables | ||
: ↳ structure these permutational variables in a way that CSS can correspond | |||
: ↳ <s>plus, I’d like to try incorporating the theatre metaphor from [[User:Zuhui/SI26/Weekly log/Why is CSS So Weird | ‘Why CSS is so weird’]] into the work: | |||
: regarding the browser window as a stage and apply the sentence analysis and structure accordingly. | :: regarding the browser window as a stage and apply the sentence analysis and structure accordingly.</s> | ||
<br> | <br> | ||
{| class="wikitable" | {| class="wikitable" | ||
|+ identification | |+ identification | ||
|- | |- | ||
! words !! grammarly feature !! semantic | ! words !! grammarly feature !! semantic | ||
|- | |- | ||
| do || style="background-color: #ffffff;" | auxiliary verb || style="background-color: #ffe5fe;" | check for action | | do || style="background-color: #ffffff;" | auxiliary verb || style="background-color: #ffe5fe;" | check for action | ||
|- | |- | ||
| tigers || style="background-color: #ffffff;" | noun || style="background-color: #d4ffd4 ;" | agenct | | tigers || style="background-color: #ffffff;" | noun || style="background-color: #d4ffd4 ;" | agenct | ||
|- | |- | ||
| melt || style="background-color: #ffffff;" | verb || style="background-color: #d4ffd4 ;" | action | | melt || style="background-color: #ffffff;" | verb || style="background-color: #d4ffd4 ;" | action | ||
|- | |- | ||
| like || style="background-color: #ffffff;" | preposition || style="background-color: #f3ffc8;" | comparison standard | | like || style="background-color: #ffffff;" | preposition || style="background-color: #f3ffc8;" | comparison standard | ||
|- | |- | ||
| butter || style="background-color: #ffffff;" | noun || style="background-color: #f3ffc8;" | comparison target(object) | | butter || style="background-color: #ffffff;" | noun || style="background-color: #f3ffc8;" | comparison target(object) | ||
|- | |- | ||
| in || style="background-color: #ffffff;" | preposition || style="background-color: #ffeade;" | spatial relationship | | in || style="background-color: #ffffff;" | preposition || style="background-color: #ffeade;" | spatial relationship | ||
|- | |- | ||
| the || style="background-color: #ffffff;" | determiner || style="background-color: #ffeade;" | | the || style="background-color: #ffffff;" | determiner || style="background-color: #ffeade;" | - | ||
|- | |- | ||
| forest || style="background-color: #ffffff;" | noun || style="background-color: #ffeade;" | context | | forest || style="background-color: #ffffff;" | noun || style="background-color: #ffeade;" | context | ||
|- | |- | ||
| ? || style="background-color: #ffffff;" | punctuation || style="background-color: #ffe5fe;" | sentence type | | ? || style="background-color: #ffffff;" | punctuation || style="background-color: #ffe5fe;" | sentence type | ||
|} | |} | ||
* [https://dictionary.cambridge.org/grammar/british-grammar/# cambridge dictionary #grammar] | * [https://dictionary.cambridge.org/grammar/british-grammar/# cambridge dictionary #grammar] | ||
<br> | <br> | ||
<br> | <br> | ||
===[[/ | |||
===[[/Permutational variables|Permutational variables]]=== | |||
▲ a long list of css selectors just using next sibling combinators, assigning them with lexical significance so that css can interpret and reflect these meaning somehow.<br> | |||
<br> | <br> | ||
===[[/ | ===[[/CSS 1|CSS 1]]=== | ||
<br> | <br> | ||
<br> | <br> | ||
Line 130: | Line 126: | ||
* [https://www.yvon-lambert.com/products/enzo-mari-autoprogettazione?srsltid=AfmBOoohphcrCHGLBSDrn5bsJboX2pSp--Y0_kV7_If3j6tT64TKqt_D Autoprogettazione? by Enzo Mari] | * [https://www.yvon-lambert.com/products/enzo-mari-autoprogettazione?srsltid=AfmBOoohphcrCHGLBSDrn5bsJboX2pSp--Y0_kV7_If3j6tT64TKqt_D Autoprogettazione? by Enzo Mari] | ||
<br> | <br> | ||
<div style="float:right; font-size:25px;">[[:#top|▲]]</div> | <div style="float:right; font-size:25px;">[[:#top|▲]]</div> |
Latest revision as of 10:11, 15 March 2025
Progress
first sketch
Simple structure
- Using
display: flex
- Shrinking the browser window randomly removes words from the sentence, one by one, in correspondence with the reduced pixel count.
- Expanding the window brings words back, also randomly, reconstructing the sentence into a new structure each time.
Do tigers melt like butter in the forest?
How I want to develop it
- I'm envisioning a kind of storybook that users can save the screens they like in the browser. once they're done, they can export them as a multi-paged pdf file containing all the screens they've saved in the browser. even print them out in the end.
- Inspired by The House of Dust by Alison Knowles,
I imagined adding random words as the browser window extends, rather than simply re-aligning previous words in the sentence as I did on my initial sketch.
Word-corresponding background illustration
Storybook in pdf
- A button(or a key) that allows users to save the current state of the browser window --not to the local computer, but within the browser itself.
- Another button/key would then enable users to export these saved states as a PDF file, allowing them to print out each saved version of the browser window in chronological order.
To do
Code to work 1
▲workflow
I made the first sketch by using an ai chatbot but I want to write the code without it from the beginning.
Code to work 2
▲with help from Doriane and Joseph
try with the simplest approach to structure html/java script, and richer iterations in CSS
For CSS drawing, following analysis is needed:
- identify the basic structure and elements of the sentence
- define the possible permutational variables
- ↳ structure these permutational variables in a way that CSS can correspond
- ↳
plus, I’d like to try incorporating the theatre metaphor from ‘Why CSS is so weird’ into the work:regarding the browser window as a stage and apply the sentence analysis and structure accordingly.
words | grammarly feature | semantic |
---|---|---|
do | auxiliary verb | check for action |
tigers | noun | agenct |
melt | verb | action |
like | preposition | comparison standard |
butter | noun | comparison target(object) |
in | preposition | spatial relationship |
the | determiner | - |
forest | noun | context |
? | punctuation | sentence type |
Permutational variables
▲ a long list of css selectors just using next sibling combinators, assigning them with lexical significance so that css can interpret and reflect these meaning somehow.
CSS 1
Resource
Word combination algorithm
- look for Permutation function
Storybook in pdf
recommended by Joseph
- try html2canvas for taking screenshot of the browser
- look for javascript: Window: localStorage property for storage. (this one stores locally, but try it anyway)
Reference
recommended by Joseph
- Little Blue and Little Yellow by Leo Lionni
- The Fable Game by Enzo Mari
- Autoprogettazione? by Enzo Mari