In this example we provide a user interface that allows you to choose the text-box-trim and text-box-edge values applied to a paragraph of text.
HTML
In our HTML, we include three main items:
- Three
<select> elements allowing you to set which edges of the paragraph should be trimmed (the text-box-trim value) and how much space to trim from the block-start and block-end edges of the paragraph (the text-box-edge value). - A
<p> element containing text, which the text-box-* values are applied to. This paragraph has contenteditable set on it so you can edit the text. - An
<output> element that displays the text-box-* declarations applied to the paragraph. This is updated when a selection is made.
We also import a font from the Google Fonts service to apply to our demo's text.
We have hidden the exact HTML code for brevity.
CSS
In our CSS, we apply the imported font to the <html> element and lay out the UI using flexbox. We have hidden most of the CSS code for brevity, but below we show the rules styling the paragraph the text-box-* effects are applied to and the <output> that shows the text-box-* rules being applied:
p {
margin: 0;
font-size: 6rem;
font-weight: bold;
border-top: 5px solid magenta;
border-bottom: 5px solid magenta;
}
output {
border: 2px solid gray;
border-radius: 10px;
padding: 10px;
margin: 0;
width: fit-content;
}
Again, note how we've included a top and bottom border on the .display paragraph, so that you can see how the space being trimmed changes when different text-box-* values are selected.
JavaScript
In the JavaScript, we start by grabbing references to the three <select> elements and two <p> elements:
const boxTrimSelect = document.getElementById("box-trim");
const trimOverSelect = document.getElementById("trim-over");
const trimUnderSelect = document.getElementById("trim-under");
const displayElem = document.querySelector("p");
const codeElem = document.querySelector("output");
Next, we define a function called setEdgeTrim(). This applies a text-box value to the paragraph based on the values of the <select> elements, and also prints the applied declarations to the output (both the longhand and shorthand equivalents):
function setEdgeTrim() {
const textBoxTrimValue = boxTrimSelect.value;
const textBoxEdgeValue = `${trimOverSelect.value} ${trimUnderSelect.value}`;
displayElem.style.textBox = `${textBoxTrimValue} ${textBoxEdgeValue}`;
codeElem.innerHTML = `
<span><code>text-box-trim: ${textBoxTrimValue}</code></span>
<br>
<span><code>text-box-edge: ${textBoxEdgeValue}</code></span>
<br><br>
<span>Shorthand equivalent:</span>
<br><br>
<span><code>text-box: ${textBoxTrimValue} ${textBoxEdgeValue}</code></span>
`;
}
In the last part of the JavaScript we run the setEdgeTrim() function once to set an initial state for the UI. We then apply change event listeners to all of the <select> elements (via addEventListener) so that setEdgeTrim() is run whenever one of the <select> values changes to update the UI accordingly:
setEdgeTrim();
boxTrimSelect.addEventListener("change", setEdgeTrim);
trimOverSelect.addEventListener("change", setEdgeTrim);
trimUnderSelect.addEventListener("change", setEdgeTrim);
Result
The output is as follows:
text-box-trim is initially set to trim-both, meaning that the over and under edges of the paragraph are trimmed. text-box-edge is initially set to cap alphabetic, meaning that the text is trimmed flush with the top of capital letters at the start edge, and flush with the baseline at the end edge.
Try changing the <select> values to see the effect they have on the display text.