DropCap
A paragraph whose first letter is set large and dropped into the first two, three or four lines.
Demo
Once upon a time, in a server far away, a page rendered at once and its components woke only when someone reached for them. Nobody waited for a script to arrive, nobody saw a blank page, and the form kept what had been typed in it. The people who wrote it went home early, which is the point of this story.
Once upon a time, in a server far away, a page rendered at once and its components woke only when someone reached for them. Nobody waited for a script to arrive, nobody saw a blank page, and the form kept what had been typed in it. The people who wrote it went home early, which is the point of this story.
Once upon a time, in a server far away, a page rendered at once and its components woke only when someone reached for them. Nobody waited for a script to arrive, nobody saw a blank page, and the form kept what had been typed in it. The people who wrote it went home early, which is the point of this story.
Get it
It needs theme.qwe, as every component does; or take the whole kit, quillo-ui.qwe. Each component brings its own styles to the pages that show it.
$ curl -O https://quillolang.org/components/ui/theme.qwe$ curl -O https://quillolang.org/components/ui/drop_cap.qweimport ui/theme.qwe use theme_cssuse ui/drop_cap.qweroute GET / = <html><head><style>{theme_css}</style></head><body class="ui-root">...</body></html>Example
The code of the preview above.
let drop_cap_demo_text = "Once upon a time, in a server far away, a page rendered at once and its components woke only when someone reached for them. Nobody waited for a script to arrive, nobody saw a blank page, and the form kept what had been typed in it. The people who wrote it went home early, which is the point of this story."view DropCapDemo() = <div.demo-stack.demo-narrow> <DropCap id="drop-cap-demo-three" text={drop_cap_demo_text}/> <DropCap id="drop-cap-demo-two" lines={2} tone="accent" serif={true}>{drop_cap_demo_text}</DropCap> <DropCap id="drop-cap-demo-four" lines={4} text={drop_cap_demo_text}/> </div>Source
// DropCap: a paragraph whose first letter is set large, dropped into the first few// lines, as at the start of a chapter.//// <DropCap>Once upon a time, in a server far away, a page rendered at once.</DropCap>// <DropCap lines={2} tone="accent" serif={true} text={chapter.opening}/>//// children: the text; or text, the text as a string. lines: how many lines the// letter drops into, 2, 3 (default) or 4. tone: "fg" (default) or "accent".// serif: the letter in a serif face. id: the paragraph's id.import ui/theme.qwe use ui_clslet drop_cap_css = css`.ui-drop-cap { margin: 0; font: 16px/1.6 var(--ui-font); color: var(--ui-fg); overflow-wrap: anywhere; }.ui-drop-cap::first-letter { float: left; margin: .08em .12em 0 0; font-size: 3.1em; line-height: .78; font-weight: 700; color: var(--ui-dc, var(--ui-fg)); }.ui-drop-cap-2::first-letter { font-size: 2.1em; line-height: .8; margin-top: .1em; }.ui-drop-cap-4::first-letter { font-size: 4.1em; line-height: .78; margin-top: .06em; }.ui-drop-cap-accent { --ui-dc: var(--ui-accent); }.ui-drop-cap-serif::first-letter { font-family: Georgia, "Times New Roman", serif; font-weight: 600; }`view DropCap(lines: int = 3, tone: str = "fg", serif: bool = false, text: str? = null, id: str? = null, class: str? = null, children) { style global drop_cap_css <p class={ui_cls(["ui-drop-cap", lines != 3 && `ui-drop-cap-${lines}`, tone != "fg" && `ui-drop-cap-${tone}`, serif && "ui-drop-cap-serif", class])} id={id}>{text ?? children}</p>}Related
Thread 0 posts
On DropCap: questions, tips, corrections, and code that uses it.
No posts yet. The first one opens the thread.