Consider aligning sections by offsetTop directly, rather than trying to equalize cumulative height
Closed, ResolvedPublic
Actions

Assigned To

Authored By

	dchan
	Feb 17 2017, 5:37 PM

Description

It seems something like the following strategy might work more reliably:

function keepAlignment( sourceNode, targetNode ) {
    var offsetTop = Math.max( sourceNode.offsetTop, targetNode.offsetTop );
    sourceNode.style.paddingTop = ( offsetTop - sourceNode.offsetTop ) + 'px';
    targetNode.style.paddingTop = ( offsetTop - targetNode.offsetTop ) + 'px';
}

It doesn't require all previous sections to be in alignment, and it doesn't change the height of the content (and therefore hopefully shouldn't change the word wrapping nor cause much browser rerendering effort).

Related Objects
Search...

Status	Assigned	Task
Open	None	T76456 Language Engineering tracker of trackers (tracking)
Open	None	T112880 ContentTranslation alignment issues (tracking)
Resolved	santhosh	T158435 Consider aligning sections by offsetTop directly, rather than trying to equalize cumulative height

Event Timeline

dchan created this task.Feb 17 2017, 5:37 PM

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptFeb 17 2017, 5:37 PM

dchan added a parent task: T112880: ContentTranslation alignment issues (tracking).Feb 17 2017, 5:38 PM

Amire80 moved this task from Needs Triage to Jan.-Mar. 2017 on the ContentTranslation board.Mar 6 2017, 8:59 PM

Amire80 moved this task from Jan.-Mar. 2017 to Apr.–June 2017 on the ContentTranslation board.May 8 2017, 1:01 PM

Even though tt doesn't require all previous sections to be in alignment, a section content change handler need to update the offset top of all existing sections one after another.

Arrbee moved this task from Apr.–June 2017 to Bugs on the ContentTranslation board.Nov 8 2017, 11:10 AM

• Petar.petkovic subscribed.Mar 4 2018, 12:50 AM

• Petar.petkovic mentioned this in T190907: CX2: Styling adjustments for paragraph highlighting.Apr 6 2018, 11:42 AM

The current version of CX uses this approach. See https://github.com/wikimedia/mediawiki-extensions-ContentTranslation/blob/master/modules/ui/mw.cx.ui.TranslationView.js#L85
A small difference is, instead of paddingTop, marginTop is used.

mw.cx.ui.TranslationView.static.alignSectionPair = function ( sourceOffsetTop, targetOffsetTop, sectionNumber ) {
	var offsetTop, viewNode,
		sourceNode = document.getElementById( 'cxSourceSection' + sectionNumber ),
		targetNode = document.getElementById( 'cxTargetSection' + sectionNumber );

	function isSubclass( x, y ) {
		return x && ( x.constructor === y || x.constructor instanceof y );
	}
	if ( !sourceNode || !targetNode ) {
		return;
	}
	viewNode = $.data( targetNode, 'view' );
	sourceNode.style.marginTop = '';
	targetNode.style.marginTop = '';
	targetNode.style.height = '';
	offsetTop = Math.max(
		sourceOffsetTop + sourceNode.offsetTop,
		targetOffsetTop + targetNode.offsetTop
	);
	sourceNode.style.marginTop = ( offsetTop - sourceOffsetTop - sourceNode.offsetTop ) + 'px';
	targetNode.style.marginTop = ( offsetTop - targetOffsetTop - targetNode.offsetTop ) + 'px';
	if ( isSubclass( viewNode, ve.ce.CXPlaceholderNode ) || isSubclass( viewNode, ve.ce.CXSectionNode ) ) {
		if ( sourceNode.offsetHeight > targetNode.offsetHeight ) {
			targetNode.style.height = sourceNode.offsetHeight + 'px';
		}
	}
};

It's not a small between offsetTop and paddingTop/marginTop and I am puzzled why you marked this as resolved instead of declined. Do you have ideas how to fix T190917 while also taking care of T190907#4111696?

It is not declined. @dchan reported it and later he implemented this alignment without using the height, but using offset top.

I see, we are *reading* from offsetTop and *writing* to marginTop. For some reason I was thinking of writing to offset.

Consider aligning sections by offsetTop directly, rather than trying to equalize cumulative heightClosed, ResolvedPublicActions

Description

Related ObjectsSearch...

Event Timeline

Consider aligning sections by offsetTop directly, rather than trying to equalize cumulative height
Closed, ResolvedPublic
Actions

Related Objects
Search...