/* * kkbc-hero-type-2.css - typing cursor and Korean line break of the home hero (finding S7, task H6, 2026-10-13; * cursor glued to the last character, 2026-10-17, was kkbc-hero-type-1.css). * Loaded after css/kkbc-layout-1.css and css/kkbc-banner-1.css. * A later change of this file gets a new file name (kkbc-hero-type-3.css): the CDN keeps a file under its old name. * Markup (template/Home.php:183-186):

. * The script (Home.php:480-490) writes the text as ONE text node into .typingText; footer.php:396 adds the class * Cursor to .typingText one second later; the cursor is the :after of .typingText.Cursor. There is no wrapper around * the last word; the rule below glues the cursor to the last character with a word joiner (see (a)). * No !important is used in this file. */ /* ---- (a) place, (b) height, and (c) never on a line of its own --------------------------------- 2026-10-17 (this file). The cursor was an absolute inline-block placed at its static position (history below). Two faults came from that (measured on the live pages with pictures, cursor colour #51EDB1): - Chinese and Japanese: the static position was the START of a line - on its own line under "お届けします。" (kkbc.co.jp, 1440 px; that line ends at 838 px in a 1370 px box, so it is not a lack of room) and under the zh_HK / zh_TW headings, or over the first character of the last line. - Dutch: "Wij zorgen voor groei." plus the 0.14em room for the cursor (css/kkbc-home-fit-2.css 1b, the end padding of .typingText) did not fit the line, and the browser broke the line before the cursor box, so the cursor stood alone under the heading (kkbc.nl at 390 and 1440 px). Chrome breaks before an atomic box (absolute, inline-block) even after a word joiner. Now the cursor is NOT an atomic box: it is a plain inline whose content is a WORD JOINER (U+2060, no width, no line break on either side), and the bar is its inline-start border. Nothing may break between the last character and the cursor, so when the line has no room for both, the last word moves to the next line WITH the cursor (kkbc.nl: "groei." goes to the next line), and the cursor always stands right after the last character, inside the box. Sizes. An inline border is as high as the content area of the inline's first font. Inter is the first font of the hero on every site (Latin, Hebrew, Japanese, Chinese, Korean): ascent 0.96875em + descent 0.2417em = 1.2104em. So the font size of the cursor sets the height of the bar: 0.6196em x 1.2104 = 0.75em of the heading (Latin; a capital is 0.71em). In the cursor's own em: the bar 0.06em of the heading = 0.0968em, the gap 0.08em = 0.1291em; the end margin -0.14em = -0.2259em gives the room back, so the cursor adds nothing to the line and the 0.14em end padding of .typingText is the room it is drawn in. vertical-align 0.2417em (the descent) puts the foot of the bar on the baseline. line-height 0: the cursor does not change the height of the line. position:relative keeps the right-to-left offset of css/kkbc-rtl-2.css:184 (Hebrew does not move). Checked with this rule on the live pages: English and German cursors stand on the same pixels as before (within 1 px), Hebrew on the same pixels. History of the rule (2026-10-13, kkbc-hero-type-1.css): css/kkbc-layout-1.css:49-58 made the cursor an inline-block, so at 1920 px "We deliver growth." filled the line and the cursor moved to a line of its own; it was then made absolute (no line breaking, static position after the last letter), with the old style.css:861 offsets (right:-20px, bottom:60px) set back to auto. */ .TypingArea .TypingBox .TypingHead h1 .typingText.Cursor:after { content: "\2060"; position: relative; display: inline; font-size: 0.6196em; line-height: 0; border-inline-start: 0.0968em solid #51EDB1; margin-inline-start: 0.1291em; margin-inline-end: -0.2259em; vertical-align: 0.2417em; left: auto; right: auto; top: auto; bottom: auto; } /* ---- (b) height for Japanese, Chinese and Korean ---------------------------------------------- The letters of these scripts are 0.93 to 1.05em high and stand 0.12em under the baseline, so the bar is 1em high and its foot is 0.12em under the baseline (as in kkbc-layout-1.css:59-64). Font size 0.8262em x 1.2104 = 1em of the heading; in the cursor's own em: bar 0.0726em, gap 0.0968em, end margin -0.1695em; vertical-align 0.2417em - 0.12/0.8262em = 0.0964em. */ :lang(ja) .TypingArea .TypingBox .TypingHead h1 .typingText.Cursor:after, :lang(zh) .TypingArea .TypingBox .TypingHead h1 .typingText.Cursor:after, :lang(ko) .TypingArea .TypingBox .TypingHead h1 .typingText.Cursor:after { font-size: 0.8262em; border-inline-start-width: 0.0726em; margin-inline-start: 0.0968em; margin-inline-end: -0.1695em; vertical-align: 0.0964em; } /* ---- Japanese: the full stop leaves half an em of empty space ------------------------------------ The Japanese full stop is a full-width glyph; its dot is in the left part and the right part is empty, so the picture showed 0.77em (147 px at 192 px) between the dot and the cursor (measured on kkbc.co.jp; on the other sites 0.20em). The font feature halt (alternate half-width forms) makes the glyph half as wide; it changes only punctuation of this kind. The half-width box still has about 0.1em of empty space right of the dot, so the gap is 0.02em of the heading (0.0242em of the cursor) instead of 0.08em; the end margin gives back 0.02em + 0.06em (-0.0968em of the cursor). */ :lang(ja) .TypingArea .TypingBox .TypingHead h1 .typingText { font-feature-settings: "halt"; } :lang(ja) .TypingArea .TypingBox .TypingHead h1 .typingText.Cursor:after { margin-inline-start: 0.0242em; margin-inline-end: -0.0968em; } /* ---- Korean: break between words, not inside a word --------------------------------------------- Old behaviour: the browser may break between any two syllable blocks, so at 1920 px the heading broke as "...이끕니 / 다." (measured kkbc.co.kr). Korean is written with spaces between words and a break inside a word is wrong, so a break may happen only at a space. The font size is not changed. */ :lang(ko) .TypingArea .TypingBox .TypingHead h1 .typingText { word-break: keep-all; }