Fixing text positioning

IE & Edge don't support dominant-baseline
This commit is contained in:
Jeff Avallone 2019-01-31 17:08:30 -05:00
parent 91ab1dbd05
commit 3920c716e4
4 changed files with 27 additions and 9 deletions

View File

@ -12,6 +12,7 @@ const Box = ({
width,
height,
rectTransform,
labelTransform,
contentTransform,
children
}) => {
@ -23,11 +24,15 @@ const Box = ({
ry: radius,
transform: rectTransform
};
const labelProps = {
transform: labelTransform,
style: style.infoText
};
return <>
<rect { ...rectProps }></rect>
{ label && <text style={ style.infoText }>{ label }</text> }
<g transform={ contentTransform}>
{ label && <text { ...labelProps }>{ label }</text> }
<g transform={ contentTransform }>
{ children }
</g>
</>;
@ -47,6 +52,7 @@ Box.propTypes = {
width: PropTypes.number,
height: PropTypes.number,
rectTransform: PropTypes.string,
labelTransform: PropTypes.string,
contentTransform: PropTypes.string,
children: PropTypes.node
};
@ -86,6 +92,7 @@ const layout = data => {
width,
height,
rectTransform: `translate(0 ${ labelBox.height })`,
labelTransform: `translate(0 ${ -labelBox.y })`,
contentTransform: `translate(${ content.x } ${ content.y })`
};
return data;

View File

@ -33,6 +33,5 @@ export const anchor = {
};
export const infoText = {
fontSize: fontSizeSmall,
fontFamily: fontFamily,
dominantBaseline: 'text-before-edge'
fontFamily
};

View File

@ -5,8 +5,16 @@ import { getBBox } from 'layout';
import * as style from './style';
const Text = ({ quoted, theme, children }) => {
return <text style={{ ...style.text, ...style[theme] }}>
const Text = ({ quoted, theme, transform, children }) => {
const textProps = {
transform,
style: {
...style.text,
...style[theme]
}
};
return <text { ...textProps }>
{ quoted ? <>
<tspan style={ style.quote }>&ldquo;</tspan>
<tspan>{ children }</tspan>
@ -18,6 +26,7 @@ const Text = ({ quoted, theme, children }) => {
Text.propTypes = {
quoted: PropTypes.bool,
theme: PropTypes.string,
transform: PropTypes.string,
children: PropTypes.oneOfType([
PropTypes.arrayOf(PropTypes.node),
PropTypes.node
@ -25,10 +34,14 @@ Text.propTypes = {
};
const layout = data => {
const { width, height } = getBBox(
const { width, height, y } = getBBox(
<Text { ...data.props }>{ data.children }</Text>);
data.box = { width, height };
data.props = {
...data.props,
transform: `translate(0 ${ -y })`
};
return data;
};

View File

@ -1,8 +1,7 @@
import { fontSize, fontFamily, white, grey } from 'rendering/style';
export const text = {
fontSize, fontFamily,
dominantBaseline: 'text-before-edge'
fontSize, fontFamily
};
export const anchor = {
fill: white