/** * jp-produktionsplanung-card-titles.css * Page: /de/warenwirtschaftssystem-software/produktionsplanung-software/ (161641) * /en/erp-software/production-planning-software/ (263615) * section.product-price-plan-section -> "Preise und Verfügbarkeit / * Bereit, die Produktion hochzufahren" * * WHY (companion to scripts/db/produktionsplanung-card-title-hyphens.php) * ---------------------------------------------------------------------- * The rule below is unchanged, but the reason recorded here originally was * wrong on both of its claims. Corrected: * * ORIGINAL CLAIM 1 — "the DB script leaves a ZERO-WIDTH SPACE (U+200B) at the * compound seam, an invisible break opportunity that paints no hyphen." * False in this codepath. The titles live in a WPBakery shortcode ATTRIBUTE, * and WordPress core's shortcode_parse_atts() (wp-includes/shortcodes.php:616) * runs `preg_replace("/[\x{00a0}\x{200b}]+/u", ' ', $text)` — every ZWSP becomes * a PLAIN SPACE before the widget ever sees the attribute. The titles therefore * rendered as two words, "Dispositions produktion", on every environment. A * ZWSP cannot survive here at all. A SOFT HYPHEN (U+00AD) does survive core, but * it only PAINTS when the line happens to break at it — on a wide card the word * fits on one line and no hyphen is drawn. The DB script therefore writes a * literal HYPHEN-MINUS, which is visible at every viewport width and is still a * break opportunity. * * ORIGINAL CLAIM 2 — "no hyphen glyph can appear at any viewport width" was the * goal. * Reversed by the client: the hyphen at the compound seam is WANTED * ("Dispositions-produktion"). What they objected to was a hyphen in the wrong * place ("Auftragspro-duktion"), which is what the browser's own automatic * hyphenation produces. * * So `hyphens: manual` is still exactly the right value, for a better reason: it * forbids the browser from inventing its own break point, so the only hyphen ever * drawn is the authored one. Without it you can get "Disposi-tions-produktion". * The widget base rule * .dark-card-widget .dark-card-items .dark-card-item__card-title { hyphens: auto } * (wpb-oop-widget-with-global/assets/style.css) * would otherwise let a Chrome/Firefox carrying a German hyphenation dictionary * break "Dispositions" mid-syllable. The page is , so that is * live. `overflow-wrap` is a safety net for a future title with no seam marker. * * WHY NOT just delete the marker and let it wrap: the title box is shrink-to-fit * inside the grid column. With no break opportunity "Dispositionsproduktion" * renders a ~448px box — it overflows the card and distorts the 4-column grid. * The seam marker is load-bearing, not decoration. * * The font size for the 992–1399px band is handled by the companion sheet * error-batch3-d5-produktionsplanung-cards.css; without it the titles still run * to 3–4 lines there even with a correct seam marker. * * SCOPE: `body.page-id-161641` covers BOTH languages — the theme puts the DE * original's id on the EN translation too, so /en/erp-software/production-planning-software * carries `page-id-263615 page-id-161641`. One rule, both pages, no leak onto the * other ~20 pages that use the same dark-card widget. */ body.page-id-161641 section.product-price-plan-section .dark-card-widget .dark-card-items .dark-card-item .dark-card-item__card-title { -webkit-hyphens: manual !important; hyphens: manual !important; overflow-wrap: break-word; }