lindell / lindell/JsBarcode

Getting a "short" barcode using only CSS `height`; disabling the inline `transform: translate(0,0)`

Open
#385 0 comments 1 reaction 0 assignees View on GitHub
Dominant language
JavaScript
Stars
5.9k
Forks
1.1k
PR merge metrics
No merged PRs in 30d

Description

Hi everyone,

Thank you for a great lib!

I want to have a "short" barcode as shown here: https://github.com/lindell/JsBarcode/wiki/Options#height

The above example accomplishes this using the `height` option, but I need to style it using CSS only. When I set the height CSS property for my barcode `svg` element, the barcode shrinks its width proportionally, and as a result I'm getting an overall smaller barcode, while I need a barcode that's still wide.

Please see my final `svg` element below. It somehow gets the width and height hardcoded into it in `px`.
```

```

My full CSS code for that `svg` is:
```
.label svg {
height: 30mm;
transform: rotate(270deg) !important; /*have to override the inline transform*/
transform-origin: 100% 0;
margin-left: -150mm;
width: 150mm;
}
```

(As a side note, curious if there is a way to turn off the inline `transform: translate(0,0)` so that I can stop using `!important` in my CSS file.)

Contributor guide

Open the contributing guide

Research direction

Start by tracing how the library generates the SVG element shown in the issue, focusing on the hardcoded width, height, viewBox, and inline transform. Check whether the existing barcode options or SVG-generation entry point can support CSS-only sizing and disabling that transform; done means the barcode remains wide at the requested CSS height and can be rotated without !important.

Written by the indexing model from the issue text.

Assessment

Tech stack
css, javascript
Domain
frontend
Issue type
Feature
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.