/* ===================================================================== Fonts for rendered documents and slides. NOTHING NEEDS DOWNLOADING. Two Nastaliq faces are loaded from Google Fonts, both under the SIL Open Font License, which permits web use: - Noto Nastaliq Urdu (calligraphic, closest to traditional Nastaliq) - Gulzar (more typographic, roomier at small sizes) They are requested in includes/header.php alongside the site fonts. Your own fonts are listed FIRST below, so a visitor who already has Alvi Nastaleeq, Aslam or Noorehira installed sees your exact face; everyone else falls through to the Google font automatically. To serve your own fonts to every visitor, see SELF-HOSTING at the bottom of this file — but read the licence note there first. ===================================================================== */ :root { /* ORDER MATTERS. A generic family (sans-serif / serif) always resolves, and the system's own Arabic fallback is a Naskh face — so if a generic sits before the Nastaliq fonts, Urdu text stops there and never reaches them. Every generic therefore goes LAST, after the Urdu faces. */ --doc-latin: 'Source Sans 3'; --doc-urdu: 'Alvi Nastaleeq', /* used if the visitor has it installed */ 'Aslam', 'Noorehira', 'Jameel Noori Nastaleeq', 'Noto Nastaliq Urdu', /* web font — always available */ 'Gulzar'; /* Latin first, Urdu next, generics last. CSS falls back per character, so English keeps the Latin face while Urdu characters — absent from it — drop through to the Nastaliq face. */ --doc-stack: var(--doc-latin), var(--doc-urdu), system-ui, sans-serif; /* Arabic quotations want Naskh, not Nastaliq. Amiri is a Naskh revival with proper vowel-mark positioning. */ --doc-arabic: 'Amiri', 'Noto Naskh Arabic', 'Traditional Arabic', serif; } /* Applied by viewer.js to runs identified as Arabic rather than Urdu. */ .viewer-doc .is-arabic, .viewer-stage .is-arabic { font-family: var(--doc-arabic) !important; line-height: 1.9 !important; } /* Word documents carry their own font names, so they resolve through the stack above without any override here. */ /* PowerPoint is different: the renderer drops font names entirely, so every slide would fall back to Times New Roman. Forcing the stack is the only way to get Urdu text shaped correctly. */ .viewer-doc.is-slides .pptx-preview-wrapper, .viewer-doc.is-slides .pptx-preview-wrapper * { font-family: var(--doc-stack) !important; } /* Two background bugs in the renderer, both fixed here. 1. It sets background-image with no background-size, so images drew at their own pixel size and left the rest of the slide blank. 2. For slide backgrounds it turns PowerPoint's fillRect insets into a background-POSITION offset. A deck using the usual (stretch 9% past the top and bottom, then crop) came out shifted up with a 9% white band along the bottom of every slide. Slide backgrounds therefore get `cover` + centred: that scales to fill and crops the overflow, which is what those negative insets are asking for, and keeps the image's aspect ratio. Picture fills inside a shape are stretched to the shape box instead, which is what PowerPoint does with them. */ .viewer-doc.is-slides .slide-background, .viewer-doc.is-slides .slide-master-wrapper, .viewer-doc.is-slides .slide-layout-wrapper { background-size: cover !important; background-position: center center !important; background-repeat: no-repeat !important; } .viewer-doc.is-slides .shape-wrapper[style*="background-image"], .viewer-doc.is-slides .slide-wrapper [style*="background-image"] { background-size: 100% 100% !important; background-position: center center !important; background-repeat: no-repeat !important; } /* Nastaliq glyphs draw far outside their em box — the tail of a large word reaches well above and below the line. PowerPoint decks routinely overlap text boxes, which is fine there because the ink stays inside its line box. Too tight a line-height here lets that ink spill into the box above, and lines appear to merge. 1.8 keeps the ink contained; viewer.js then shrinks any box whose taller lines no longer fit. Measured on a real Urdu deck: collisions disappear at 1.8 and do not improve further at 2.0 or 2.2. */ .viewer-doc.is-rtl .pptx-preview-wrapper * { line-height: 1.8 !important; } .viewer-doc.is-rtl .shape-wrapper, .viewer-doc.is-rtl .slide-wrapper { direction: rtl; } /* Plain text files carry no font data at all. */ .viewer-stage pre { font-family: var(--mono), var(--doc-urdu), monospace; } .viewer-stage pre.is-rtl { direction: rtl; text-align: right; font-family: var(--doc-stack); line-height: 2; } /* ===================================================================== SELF-HOSTING YOUR OWN FONTS (optional) LICENCE FIRST: putting a font file here sends it to every visitor, which is redistribution — a different thing from having it installed on your own PC. Alvi Nastaleeq's own licence text restricts it to educational/research use and forbids distribution without written permission from Alvi Technologies. Check Aslam and Noorehira too (right-click the font file > Properties on Windows). The two Google fonts above have no such restriction, which is why they are the default. If you are cleared to host them: 1. Copy the .ttf from C:\Windows\Fonts (or ~/Library/Fonts on a Mac). 2. Convert it at https://transfonter.org to .woff2 — Nastaliq fonts carry ~17,000 glyphs and can exceed 9 MB raw; woff2 roughly halves it. 3. Drop the file in assets/fonts/ and uncomment the block below. 4. The font-family name must match what PowerPoint shows in its font menu, character for character, spaces included. @font-face { font-family: 'Alvi Nastaleeq'; src: url('../fonts/AlviNastaleeq.woff2') format('woff2'), url('../fonts/AlviNastaleeq.ttf') format('truetype'); font-display: swap; } @font-face { font-family: 'Aslam'; src: url('../fonts/Aslam.woff2') format('woff2'), url('../fonts/Aslam.ttf') format('truetype'); font-display: swap; } @font-face { font-family: 'Noorehira'; src: url('../fonts/Noorehira.woff2') format('woff2'), url('../fonts/Noorehira.ttf') format('truetype'); font-display: swap; } ===================================================================== */