mirror of
https://github.com/zoriya/react-native-svg.git
synced 2025-12-21 06:15:15 +00:00
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:
45
lib/props.js
45
lib/props.js
@@ -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,
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user