Implement baselineShift and verticalAlign (preferred).

Transverse Box Alignment, specifies how an inline-level box is aligned within the line, and by how much the box is shifted up from its alignment point.
 https://drafts.csswg.org/css-inline/#propdef-vertical-align
 https://www.w3.org/TR/css-inline-3/#propdef-baseline-shift
 https://www.w3.org/TR/css-inline-3/#transverse-alignment
This commit is contained in:
Mikael Sand
2017-08-04 16:29:06 +03:00
parent 2939584d1b
commit fe7e8b2b65
5 changed files with 155 additions and 0 deletions

View File

@@ -197,6 +197,29 @@ const lengthAdjust = PropTypes.oneOf(['spacing', 'spacingAndGlyphs']);
*/
const textLength = PropTypes.string;
/*
2.2. Transverse Box Alignment: the vertical-align property
Name: vertical-align
Value: <baseline-shift> || <alignment-baseline>
Initial: baseline
Applies to: inline-level boxes
Inherited: no
Percentages: N/A
Media: visual
Computed value: as specified
Canonical order: per grammar
Animation type: discrete
This shorthand property specifies how an inline-level box is aligned within the line.
Values are the same as for its longhand properties, see below.
Authors should use this property (vertical-align) instead of its longhands.
https://www.w3.org/TR/css-inline-3/#transverse-alignment
https://drafts.csswg.org/css-inline/#propdef-vertical-align
*/
const verticalAlign = PropTypes.string;
/*
Name: alignment-baseline
@@ -217,10 +240,32 @@ const textLength = PropTypes.string;
*/
const alignmentBaseline = PropTypes.oneOf(['baseline', 'text-bottom', 'alphabetic', 'ideographic', 'middle', 'central', 'mathematical', 'text-top', 'bottom', 'center', 'top', 'text-before-edge', 'text-after-edge', 'before-edge', 'after-edge', 'hanging']);
/*
2.2.2. Alignment Shift: baseline-shift longhand
Name: baseline-shift
Value: <length> | <percentage> | sub | super
Initial: 0
Applies to: inline-level boxes
Inherited: no
Percentages: refer to the used value of line-height
Media: visual
Computed value: absolute length, percentage, or keyword specified
Animation type: discrete
This property specifies by how much the box is shifted up from its alignment point.
It does not apply when alignment-baseline is top or bottom.
https://www.w3.org/TR/css-inline-3/#propdef-baseline-shift
*/
const baselineShift = PropTypes.oneOfType([PropTypes.oneOf(['sub', 'super', 'baseline']), PropTypes.arrayOf(numberProp), PropTypes.string]);
const textSpecificProps = {
...pathProps,
...fontProps,
alignmentBaseline,
baselineShift,
verticalAlign,
lengthAdjust,
textLength,
};