diff --git a/packages/ove/package.json b/packages/ove/package.json index 9531745b..00b63d57 100644 --- a/packages/ove/package.json +++ b/packages/ove/package.json @@ -1,6 +1,6 @@ { "name": "@teselagen/ove", - "version": "0.5.27", + "version": "0.5.28", "main": "./src/index.js", "type": "module", "exports": { diff --git a/packages/ove/src/RowItem/Sequence.js b/packages/ove/src/RowItem/Sequence.js index 886626c2..27083622 100644 --- a/packages/ove/src/RowItem/Sequence.js +++ b/packages/ove/src/RowItem/Sequence.js @@ -90,7 +90,6 @@ class Sequence extends React.Component { let inner; const shared = { - ...(isSafari ? { letterSpacing: "3px" } : {}), y: height - height / 4, className: "ve-monospace-font " + (isReverse ? " ve-sequence-reverse" : "") @@ -108,12 +107,13 @@ class Sequence extends React.Component { const textLength = charWidth * seqChunk.length; const x = i * chunkWidth; if (x > visibleEnd || x + textLength < visibleStart) return null; + const tlToUse = Math.max(0, textLength - fudge - fudge2); return ( - {getBoldRegion({ sequence, overlapToBold, rowStart, sequenceLength })} + {getBoldRegion({ + sequence, + overlapToBold, + rowStart, + sequenceLength + })} ); } @@ -257,6 +263,10 @@ class ColoredSequence extends React.Component { } function getBoldRegion({ sequence, overlapToBold, rowStart, sequenceLength }) { + if (isSafari) { + // safari doesn't support text length with tspans so we can't bold the sequence - https://github.com/TeselaGen/tg-oss/issues/80 + return sequence; + } const toRet = []; const [a, b] = overlapToBold || []; for (let index = rowStart; index < sequence.length + rowStart; index++) {