search

Slevinski / apitxt

The ApiTxt Project is a custom build environment for the development of SignPuddle 3 and other RESTful APIs.
https://SignPuddle.com
2 stars 2 forks source link

Shapes in signmaker not centered #6

Closed bidaian closed 5 years ago

bidaian commented 5 years ago

The individual shapes are left-top aligned. As the window gets larger, they stay there, leaving a lot of white space in each cell, right and below.

bildo

Slevinski commented 5 years ago

Interesting. OS and browser please.

I've tested Windows, Linux Mint, Mac, and iOS. I've tested Safari, Chrome, Firefox, and Edge. For all of these combinations, the palette is centering correctly. Screen Shot 2019-07-02 at 4 47 18 PM

There must be something in the CSS that's not applying for either the "div.row", "div", or "svg".

bidaian commented 5 years ago

It's Firefox Nightly 69.0a1 (2019-07-01) (64-bita). That's the bleeding edge, so the bug could be theirs.

But I also tried the Firefox Quantum 67.0.4 (64-bita). That's the stable version, with the same result.

System is Debian stable 9.9.

In case it helps, these are the calculated styles for "row":

bildo for the div: bildo and for the svg: bildo

Slevinski commented 5 years ago

The problem is on the SVG element. The CSS rule of "margin: auto"; is not working for your setup. https://github.com/Slevinski/apitxt/blob/master/client/include/common.css#L1100

If this rule is being overridden, you could try adding "!important" to the "margin: auto;" line.

Here is the computed styles when it is working.
Screen Shot 2019-07-03 at 9 33 16 AM

Unfortunately, I can not reproduce this issue so I can not fix it. I tested with Firefox Quantum, 66.0.3 (32-bit) on Linux Mint.

bidaian commented 5 years ago

When it is shown correctly, this is the tag:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="15" height="30" viewBox="500 500 15 30"><text style="font-size:0%;">񀀁𝤆𝤆</text><g transform="translate(500,500)"><text class="sym-fill" style="pointer-events:none;font-family:'SuttonSignWritingFill';font-size:30px;fill:white;">􀀁</text><text class="sym-line" style="pointer-events:none;font-family:'SuttonSignWritingLine';font-size:30px;fill:black;">󰀁</text></g></svg>

And when it is wrong (not centered):

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="76" height="76" viewBox="500 500 76 76"><text style="font-size:0%;">񀀁𝤆𝤆</text><g transform="translate(500,500)"><text class="sym-fill" style="pointer-events:none;font-family:'SuttonSignWritingFill';font-size:30px;fill:white;">􀀁</text><text class="sym-line" style="pointer-events:none;font-family:'SuttonSignWritingLine';font-size:30px;fill:black;">󰀁</text></g></svg>

So, something makes the function miscalculate the width and height. It looks like something on my side, but if you have an idea of what it could be triggering that (a property?), it would help.

Slevinski commented 5 years ago

Interesting. Do you have the fonts installed? It should work either way. https://slevinski.github.io/SuttonSignWriting/guide.html#ttf

Sizing was complicated to get working for all of the various browsers. 76 by 76 is the max possible size. The sizing routine draws the font character onto the JS canvas and then measures the size. https://github.com/Slevinski/SuttonSignWriting/blob/master/assets/SuttonSignWriting.js#L896

There are two possibilities. Either the character is drawn as an empty box because it is unknown or another font is conflicting that uses characters on plane 15.

bidaian commented 5 years ago

That's it! Canvas access was blocked. As soon as I allow Signpuddle to use it, then the shapes are centered.

The thing is, canvas is (ab)used for fingerprinting. I had it blocked but other people (with privacy or anti-fingerprinting measures) might eventually run into this. Anyway, Signpuddle degrades pretty gracefully.