Css Grid Label Angular Component

deliverable: css grid label angular component see screenshot to understand the input properties. All inputs should be the actual physical units the user intends to use in the physical world. unit being one of the absolute lengths here: [login to view URL] the biggest hurdle here is scaling and PRINTING in accurate physical units [login to view URL] [login to view URL] so my recommendation is having an additional input [displayPpi]="" [printDpi]="" to help scale to actual physical units. Another tip is to use "rem" this way you let rem scale based on these 2 settings. when they print you apply a new rem value in the print css version. @media print { … } [login to view URL] [login to view URL] <page-label-maker [topMargin]="" [sideMargin]="" [verticalPitch]="" [horizontalPitch]="" [labelHeight]="" [labelWidth]="" [numberAcross]="" [numberDown]="" [pageWidth]="" [pageHeight]="" unit="" [displayPpi]="" [printDpi]=""> </page-label-maker> the page-label-maker component must make use of page-break-after: always [login to view URL] <continous-label-maker [topMargin]="" [sideMargin]="" [verticalPitch]="" [horizontalPitch]="" [labelHeight]="" [labelWidth]="" unit="" [displayPpi]="" [printDpi]=""> </continous-label-maker> the continuous label maker will work with [login to view URL] type printers there is no page concept here. Goal ========== Type some text inside the component I want printed at 1inch and it physically print on 1 inch on paper. [login to view URL] reference concept: [login to view URL] Printer i use is 203dpi [login to view URL] Budget: $50