1b.app
Link copied -

Substituting text in a table vertically

There is a document template https://ultracash.crm-onebox.com/admin/shop/document/templates/14/control/
It specifies a parameter for text writing-mode: vertical-rl;
In the document itself, the text is vertical, but when you upload it to PDF, it is still horizontal.
Document example https://ultracash.crm-onebox.com/admin/document/65/control/
What could be the reason?
Original question is available on version: ru https://qube-soft.com/ crm erp onebox qubesoft внедрение аналитика 1с интегратор

Answers:

The writing-mode property is not approved in the css specification - it is experimental, therefore it will not work everywhere
21.01.2022, 09:34
Original comment available on version: ru


Derkach Dmytriy
OneBox production wrote:
The writing-mode property is not approved in the css specification - it is experimental, therefore it will not work everywhere


and what property can be set so that the text in the table is located vertically?
21.01.2022, 10:34
https://qube-soft.com/ crm erp onebox qubesoft внедрение аналитика 1с интегратор Original comment available on version: ru

Try this http://jsfiddle.net/qjzwG/319/ - but I think the pdf converter will ignore it too
21.01.2022, 10:38
Original comment available on version: ru


Derkach Dmytriy
OneBox production wrote:
Try this http://jsfiddle.net/qjzwG/319/ - but I think the pdf converter will ignore it too

and how to insert it into the style? Can you suggest?
<td class="xl75" style="padding-top: 1px; padding-right: 1px; padding-left: 1px; font-size: 11pt; font-family: 'Arial Narrow', sans-serif; vertical-align : middle; border-top: 0.5pt solid windowtext; border-right: 0.5pt solid windowtext; border-bottom: 0.5pt solid windowtext; border-left: none; border-image: initial; width: 229.375px; writing-mode : vertical-rl; text-align: center; height: 227px;" rowspan="6" align="right">Loan issue date/payment date</td>
21.01.2022, 10:42
https://qube-soft.com/ crm erp onebox qubesoft внедрение аналитика 1с интегратор Original comment available on version: ru

Try to add the verticalTableHeader class to the cell itself and remove the writing mode
<td class="xl75 verticalTableHeader" style="padding-top: 1px; padding-right: 1px; padding-left: 1px; font-size: 11pt; font-family: 'Arial Narrow', sans-serif; vertical- align: middle; border-top: 0.5pt solid windowtext; border-right: 0.5pt solid windowtext; border-bottom: 0.5pt solid windowtext; border-left: none; border-image: initial; width: 229.375px; height: 227px;" rowspan="6" align="right">Loan issue date/payment date</td>
then paste in head
<style>
.verticalTableHeader {
text-align:center;
white-space:nowrap;
transform-origin:50% 50%;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
.verticalTableHeader:before {
content:'';
padding-top:110%;/* takes width as reference, + 10% for faking some extra padding */
display:inline-block;
vertical-align:middle;
}
</style>
21.01.2022, 10:46
Original comment available on version: ru


Derkach Dmytriy
OneBox production wrote:
nowrap

Substituted, but the cell turns out to be large not in the text..
Here is an example document https://ultracash.crm-onebox.com/admin/document/79/control/
How can I make it fit the text in the cell?
21.01.2022, 11:27
https://qube-soft.com/ crm erp onebox qubesoft внедрение аналитика 1с интегратор Original comment available on version: ru

The thing is that the rotation of the text property transform: rotate (90deg); - rotates it ONLY visually, here is the width of the column and becomes equal to the width of the text as it is written horizontally, nothing can be done about it
21.01.2022, 11:37
Original comment available on version: ru


Derkach Dmytriy
OneBox production wrote:
The thing is that the rotation of the text property transform: rotate (90deg); - rotates it ONLY visually, here is the width of the column and becomes equal to the width of the text as it is written horizontally, nothing can be done about it

And is there no other option? Do I get it right
21.01.2022, 11:42
https://qube-soft.com/ crm erp onebox qubesoft внедрение аналитика 1с интегратор Original comment available on version: ru

Either use the experimental functionality (but in pdf it will not be the same as in the browser), or the one that I suggested above
+ 1 more can
put a hyphen (<br>) on the cell as normal, after each letter, each letter will be under each other, but not horizontally rotated,
see screenshot
21.01.2022, 11:49
Original comment available on version: ru

Please join the conversation. If you have something to say - please write a comment. You will need a mobile phone and an SMS code for identification to enter. Log in and comment