css = `
.box {
padding-left:20px;
counter: paragraph;
}
.testo-neutro {
background-color: #edefef;
background-image: url(${await FileAttachment("texture_texture-testo-neutro.svg").url() });
}
.testo-soggetto {
background-color: #edefef;
background-image: url(${await FileAttachment("texture_texture-testo-soggetto.svg").url() });
}
.cosa {
background-color: rgba(255, 217, 59, .4);
}
.come {
background-color: rgba(16, 190, 210, .4);
}
.senso {
background-color: rgba(255, 51, 102, .4);
}
.negazione {
background-image: url(${await FileAttachment("texture_texture-negazione.svg").url() });
}
.esitazione {
background-image: url(${await FileAttachment("texture_texture-esitazione.svg").url() });
}
.riformulazione {
background-image: url(${await FileAttachment("texture_texture-riformulazione.svg").url() });
}
.word {
margin-bottom:2px;
margin-right:3.34px;
// mix-blend-mode: multiply;
color: rgba(0,0,0,0.0);
background-size: auto 100%;
position:relative;
border-radius:1px;
}
.word .doubt-index {
position: absolute;
color: #5151fc;
left: -6.5px;
top: -7px;
background-color: white;
display: block;
width: 14px;
height: 14px;
border: 0.5px solid #5151fc;
border-radius: 50%;
text-align: center;
font-size: 9px;
font-weight: 800;
line-height: 14px;
}
.show-text .word {
color: rgba(0,0,0,0.3);
}
.word.break {
height:5px;
flex-basis:100%;
counter-increment: paragraph;
}
.word.break::before {
content: counter(paragraph);
color: #5151fc;
top: 6px;
left: -30px;
position: relative;
font-size: 10px;
font-weight: 800;
text-align: right;
width: 20px;
display: block;
}
.box {
display: flex;
flex-direction: row;
flex-wrap: wrap;
max-width: ${my_width}px;
}
.chunk {
display: flex;
flex-direction: row;
flex-wrap: wrap;
max-width: ${my_width}px;
}
`
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
