Looking for a way to add lines under all text lines, without using text decoration underline.

[Inc0n]

I am currently using a rotated font + koreader_patch_vertical_read + "css text decoration" to achieve the effect below:

Which I am think it's alright, but the lines are touching the text ATM, so here I believe I hit the limitation with css (unless there are solutions out there I am currently unaware of). Using the koreader lua API, is there a way to underline all the text on the current page? Would love to have someone help me get started on where I should start off from.

[Euphoriyy]

Not able to test right now but can't you use the text-underline-offset CSS property?

[poire-z]

^ not supported.

[poire-z]

My first idea was to use something like p > * { border-bottom: 1px solid gray }, but it won't match text direct child of <p>.

An other idea would be to hack your vertical patch so koreader frontend would get all text boxes from the current page, and draw these lines like it does with underlined highlight.

But may be a no-code idea (keeping your own idea with text-decoration) would be to hack your font (as you are already using a hacked rotated font) so to tweak the font underline metrics. Our code do use underline_position and underline_thickness exposed by our font library: https://freetype.org/freetype2/docs/tutorial/step2.html. I have no idea how these are expressed in the font ie. in Fontforge.

[Inc0n]

Thank you!

So i have just tried the "p > *, border bottom" css approach, I must say the lines are at exactly the place I want, but it wont "under line" all the text within the p element.

As to the second suggestion, going into koreader patching:

get all text boxes from the current page, and draw these lines like it does with underlined highlight.

honestly I would not mind getting my hand dirty. the patch for vertical reading right now I am using https://github.com/plateaukao/koreader_patch_vertical_read/blob/main/2-cre-rotate-japanese-book.lua unfortunately I have almost no experience in koreader lua api and that is stopping me from diving deeper with this approach. Perhaps if you don't mind point out to me on which APIs I should spent some time playing around with that will be very helpful :)

And there is a third pointer of tweaking font properties, sounds like a plausible idea too, so thank you! I will play around with this.

Thanks again. Greatly Appreciated.

[poire-z]

Some other ugly CSS solution (that may work or not and with side effects):

p::before {content: '\200B'; display: block; line-height: 0;}
p { text-indent: 0 !important}
p > autoBoxing { display: inline }
p > autoBoxing { -cr-late; -cr-only-if: inline; border-bottom: 1px solid red; }

1st line adds an invisible ::before block element, forcing the wrapping of everything else in the <P> by an internal element <autoBoxing>.
2nd line seems needed, dunno why next lines get indented
3rd line force these autoBoxing (block by default) to become inline
4th line adds a border to the inline autoBoxing
(all this for some reason creates another autoBoxing wrapping the autoBoxing we created)

[Inc0n]

Sure I will try this css magic out.
You know what, this doesn't look bad at all:

Personally I would remove the line removing the indentation (2nd line) for reading Chinese text (the screenshot does include the 2nd line hence removed first line indentation of every paragraph)

The only small annoyance is that lines that have text will have some extra lines underneath it making the rest of the line without text a bit out of place. But certainly improvements visually over the solution I originally came up with.

[poire-z]

Another ugly idea, that needs fine tuning of the size (to fit the real line height, on long paragraphs it would drift):

p {
background-image: url(data:image/gif;base64,R0lGODlhCgAKAIEAAAAAAP8AAAAAAAAAACH5BAEAAAAALAAAAAAKAAoAAAgWAAEIHEiwoMGDCBMqXMiQYYCHECMGBAA7);
background-size: 1.4em;
background-position: bottom left;
}

(Small 10x10px image, with a 1px red line at the bottom, encoded as base64.)

[Inc0n]

Oh no this one doesn't look that great. I tried to play with the background size, which kinda helps but it doesn't not eliminate the mismatch between text and the "red lines".

[poire-z]

As for experimenting with frontend, I guess you would need to:

Do a bit like in:

koreader/frontend/apps/reader/modules/readerview.lua

Lines 1436 to 1442 in 0115692

	function ReaderView:getCurrentPageLineWordCounts()
	local lines_nb, words_nb = 0, 0
	if self.ui.rolling then
	local res = self.document:getTextFromPositions({x = 0, y = 0},
	{x = Screen:getWidth(), y = Screen:getHeight()}, true) -- do not highlight
	if res then
	lines_nb = #self.document:getScreenBoxesFromPositions(res.pos0, res.pos1, true)

self.document:getScreenBoxesFromPositions() would give you an array of segments.
(beware your patch tweak these functions, maybe it's for the best, if not you'll have to untweak them for your job).
And for each segment, so like your patch do in ReaderView.drawHighlightRect for drawer=="underscore".

[Inc0n]

I believe this is as far as I can get on my own, I put the below snippet of code into document.drawCurrentView... nothing has yet to change so far. If you have the time I will appreciate some more pointers

        local res = document:getTextFromPositions({x = 0, y = 0},
            {x = Screen:getWidth(), y = Screen:getHeight()}, true)
        local lines = document:getScreenBoxesFromPositions(res.pos0, res.pos1, true)
        io.write('testing')
        for _, box in ipairs(lines) do
            io.write(table.concat(box, ', '))
            self.view:drawHighlightRect(target, 0, 0, box, "underscore", Blitbuffer.COLOR_BLACK, false)
        end

self.view is nil for reasons unbeknownst to me perhaps view hasn't been put into self yet at the stage of drawCurrentView?

[poire-z]

I don't know what self is in the context where you put that bit of code.
You could try self.ui.view (but it looks most Reader* module have both self.ui and self.view).
If it is in document.drawCurrentView = function(self, target, x, y, rect, pos), , no luck, this is a method of "document", which doesn't have any reference to ui/view reader sub-objects.
Or, as the patch hack this document.drawCurrentView inside a ReaderRolling.onPreRenderDocument = function(self), where self is actually the ReaderRolling object, you could at the top of this function add:
local myview = self.view, and use myview:drawHighlightRect(...).

[poire-z]

Also pinging @plateaukao, if he wants to add this as a feature to his vertical patch.

[Inc0n]

If I made add, so far, considering only css, the best option to me is this one #14730 (comment), plus the removal the second line that forces text indent to 0.