Color lines to assist eye transistion similar to BeeLine Reader. Uses Lining.js for (responsive) DOM wrapping of paragraph text.
// ==UserScript==
// @name Readability Line Gradient
// @namespace https://neekleer.tacden.net/
// @version 0.3.3
// @description Color lines to assist eye transistion similar to BeeLine Reader. Uses Lining.js for (responsive) DOM wrapping of paragraph text.
// @author neekleer
// @match http*://*.storiesonline.net/s/*
// @match http*://*.novelfull.com/*/*.html
// @match http*://*.novelplanet.com/Novel/*/*
// @match http*://*.literotica.com/s/*
// @grant GM_addStyle
// @require https://cdn.jsdelivr.net/lining.js/0.3.2/lining.min.js
// ==/UserScript==
;(function () {
'use strict'
if (typeof window.lining !== 'function') return
function getContrastYIQ(color) {
let parsed = color.match(
/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+(?:\.\d+)?))?\)$/,
)
let r, g, b
r = g = b = 255
if (parsed) {
if (parsed.length >= 4) {
r = parsed[1]
g = parsed[2]
b = parsed[3]
}
} else {
parsed = color
.replace('#', '')
.padEnd(6, '0')
.match(/^([0-9A-Fa-f]{2})([0-9A-Fa-f]{2})([0-9A-Fa-f]{2})$/)
if (parsed.length >= 4) {
r = parseInt(parsed[1], 16)
g = parseInt(parsed[2], 16)
b = parseInt(parsed[3], 16)
}
}
return (r * 299 + g * 587 + b * 114) / 1000 < 128
}
function run() {
setTimeout(() => {
let mainContainer = document.body
if (window.location.hostname.endsWith('novelfull.com')) {
const container = document.getElementById('container')
if (container) {
mainContainer = container
}
} else if (window.location.hostname.endsWith('novelplanet.com')) {
const container = document.getElementById('main')
if (container) {
mainContainer = container
}
}
const darkMode = getContrastYIQ(
window
.getComputedStyle(mainContainer)
.getPropertyValue('background-color'),
)
const colorA = darkMode ? '#C1C1C1' : '#000'
const colorB = darkMode ? '#FB6558' : '#0F52BA'
const colorC = darkMode ? '#377BE6' : '#E34234'
const elements = document.querySelectorAll('p:not(:empty)')
window.lining.util.getAllOutSideBr = (root) => {
var brs = root.getElementsByTagName('br')
var br
var outSideBrs = []
for (var i = 0, l = brs.length; i < l; i++) {
br = brs[i]
if (
br.previousElementSibling &&
br.previousElementSibling.nodeName === 'TEXT-LINE'
) {
outSideBrs.push(br)
}
}
return outSideBrs
}
for (let i = elements.length - 1; i >= 0; i--) {
const parent = elements[i].parentElement
if (parent && parent.getAttribute('data-lining') === null) {
window.lining(parent, { autoResize: true })
}
}
const lineSpec = [
['3n - 2', colorA, colorA, colorB],
['3n - 1', colorB, colorA, colorC],
['3n', colorC, colorA, colorA],
]
for (let i = 0, l = lineSpec.length; i < l; i++) {
const multExpr = lineSpec[i].shift()
const colorList = lineSpec[i]
lineSpec[
i
] = `p .line:nth-of-type(${multExpr}){background:linear-gradient(90deg,${colorList.join()});color:transparent;background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}`
if (colorList.pop() !== colorA) {
colorList.push(colorA)
lineSpec[
i
] += `\np .line[last]:nth-of-type(${multExpr}){background:linear-gradient(90deg,${colorList.join()});color:transparent;background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}`
}
}
GM_addStyle(lineSpec.join('\n'))
}, 1000)
}
run()
})()