您需要先安装一个扩展,例如 篡改猴、Greasemonkey 或 暴力猴,之后才能安装此脚本。
您需要先安装一个扩展,例如 篡改猴 或 暴力猴,之后才能安装此脚本。
您需要先安装一个扩展,例如 篡改猴 或 暴力猴,之后才能安装此脚本。
您需要先安装一个扩展,例如 篡改猴 或 Userscripts ,之后才能安装此脚本。
您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey,才能安装此脚本。
您需要先安装用户脚本管理器扩展后才能安装此脚本。
Adds a class to html if bible.com is in an iframe. Adjusts font size of parallel versions to fit the left column.
当前为
// ==UserScript== // @name 6BibleVersions-helper // @namespace Violentmonkey Scripts // @match https://www.bible.com/* // @grant none // @version 1.5 // @author Aiuanyu x Gemini // @description Adds a class to html if bible.com is in an iframe. Adjusts font size of parallel versions to fit the left column. // @description:zh-TW 當 bible.com 在 iframe 裡時,給 <html> 加個 class。調整並列版本个字體大小,讓佇左邊个欄位內看起來較好。 // ==/UserScript== (function() { 'use strict'; if (window.self !== window.top) { document.documentElement.classList.add('is-in-iframe'); console.log('Bible.com is in an iframe, added class "is-in-iframe" to <html>'); // 當 iframe 內容載入完成後,嘗試調整並列版本个字體大小 window.addEventListener('load', function () { // 等待所有字體載入完成 document.fonts.ready.then(function () { console.log('All fonts loaded, attempting to adjust font size.'); adjustParallelFontSize(); }).catch(function (error) { console.warn('Font loading error or timeout, proceeding with font adjustment anyway:', error); adjustParallelFontSize(); // 若字體載入失敗或超時,還是嘗試執行 }); }); } else { console.log('Bible.com is top level window.'); } function adjustParallelFontSize() { try { const params = new URLSearchParams(window.location.search); const parallelVersionId = params.get('parallel'); if (!parallelVersionId) { console.log('No parallel version ID found in URL, skipping font adjustment.'); return; } // 取得左欄主要版本个 ID const pathSegments = window.location.pathname.match(/\/bible\/(\d+)\//); if (!pathSegments || !pathSegments[1]) { console.log('Could not extract main version ID from path, skipping font adjustment.'); return; } const mainVersionId = pathSegments[1]; const leftDataVidSelector = `[data-vid="${mainVersionId}"]`; const rightDataVidSelector = `[data-vid="${parallelVersionId}"]`; console.log('Attempting to adjust font for right column selector:', rightDataVidSelector, 'against left column selector:', leftDataVidSelector); // 找出並列閱讀个主要容器 (根據先前个 HTML 結構) // 這選擇器可能愛根據 bible.com 實際个 HTML 結構微調 // 你个 CSS userstyle 用 div.grid.grid-cols-1.md\:grid-cols-2,所以𠊎等也用共樣个 const parallelContainer = document.querySelector('div.grid.md\\:grid-cols-2, div.grid.grid-cols-1.md\\:grid-cols-2'); if (!parallelContainer) { // 嘗試一個較通用个選擇器,假使上面該隻無效 // parallelContainer = document.querySelector('div[class*="md:grid-cols-2"]'); // 這較闊,可能愛小心 // if (!parallelContainer) { console.log('Parallel container (e.g., div.grid.md:grid-cols-2) not found.'); return; } const columns = Array.from(parallelContainer.children).filter(el => getComputedStyle(el).display !== 'none'); if (columns.length < 2) { console.log('Less than two visible columns found in parallel container.'); return; } const leftColumnEl = columns[0]; const rightColumnEl = columns[1]; // 在左欄裡肚尋找主要版本个內容元素 (使用 data-vid) const leftVersionDiv = leftColumnEl.querySelector(leftDataVidSelector); if (!leftVersionDiv) { console.log(`Content div for left version (${leftDataVidSelector}) not found in the left column.`); return; } // 在右欄裡肚尋找並列版本个內容元素 (使用 data-vid) // 這也是等一下要調整字體大小的目標元素 const rightVersionDiv = rightColumnEl.querySelector(rightDataVidSelector); if (!rightVersionDiv) { console.log(`Content div for right version (${rightDataVidSelector}) not found in the right column.`); return; } console.log('Found leftVersionDiv:', leftVersionDiv, 'Found rightVersionDiv:', rightVersionDiv); // 使用 requestAnimationFrame 來確保 DOM 操作和測量是在瀏覽器準備好繪製下一幀之前進行 requestAnimationFrame(() => { // 開始調整字體 rightVersionDiv.style.fontSize = '90%'; // 初始字體大小 // 強制瀏覽器重繪以取得正確个初始高度 leftVersionDiv.offsetHeight; rightVersionDiv.offsetHeight; let leftHeight = leftVersionDiv.offsetHeight; let rightHeight = rightVersionDiv.offsetHeight; if (rightHeight <= leftHeight) { console.log(rightDataVidSelector + ' content in right column is fine at 90% (or already shorter/equal). Right content: ' + rightHeight + 'px, Left content: ' + leftHeight + 'px'); return; } let lastKnownTallerFontSize = 90; for (let testSize = 89; testSize >= 50; testSize--) { // 最細到 50% rightVersionDiv.style.fontSize = testSize + '%'; // 每次改變字體大小後,重新獲取高度 // 這裡的 rightVersionDiv.offsetHeight 會強制 reflow rightHeight = rightVersionDiv.offsetHeight; // leftHeight 在這個循環中假定不變,因為我們只調整右邊的字體 if (rightHeight > leftHeight) { lastKnownTallerFontSize = testSize; } else { // 右邊內容開始比左邊短,或者一樣高了,就用上一個較大的字體大小 rightVersionDiv.style.fontSize = lastKnownTallerFontSize + '%'; console.log('Adjusted ' + rightDataVidSelector + ' font size to ' + lastKnownTallerFontSize + '%. Right content: ' + rightVersionDiv.offsetHeight + 'px, Left content: ' + leftHeight + 'px'); return; } } // 如果循環結束(字體縮到最小還是右邊較長),就用最後記錄的大小 rightVersionDiv.style.fontSize = lastKnownTallerFontSize + '%'; console.log('Adjusted ' + rightDataVidSelector + ' font size to ' + lastKnownTallerFontSize + '% (min reached or still taller). Right content: ' + rightVersionDiv.offsetHeight + 'px, Left content: ' + leftHeight + 'px'); }); } catch (error) { console.error('Error during font adjustment:', error); } } })();