html validation error on rotate property

Hi @jcgarbez! Can you share a larger snippet of the actual code that is not getting validated, so that it’s easier to see where the problem might be?

Hi Kavya, thank you for your answer. Please find below a larger snippet of the html code. I have copy / paste the section of the code where the rotate property, which is pointed out by the html checker, is showing. Please, let me know if you need anything else to diagnose the problem

<style id='wp-block-paragraph-inline-css'> .is-small-text{font-size:.875em}.is-regular-text{font-size:1em}.is-large-text{font-size:2.25em}.is-larger-text{font-size:3em}.has-drop-cap:not(:focus):first-letter{float:left;font-size:8.4em;font-style:normal;font-weight:100;line-height:.68;margin:.05em .1em 0 0;text-transform:uppercase}body.rtl .has-drop-cap:not(:focus):first-letter{float:none;margin-left:.1em}p.has-drop-cap.has-background{overflow:hidden}p.has-background{padding:1.25em 2.375em}:where(p.has-text-color:not(.has-link-color)) a{color:inherit}p.has-text-align-left[style*="writing-mode:vertical-lr"],p.has-text-align-right[style*="writing-mode:vertical-rl"]{rotate:180deg} </style> <style id='wp-block-spacer-inline-css'> .wp-block-spacer{clear:both} </style> <link rel='stylesheet' id='wp-block-cover-css' href='https://www.seotesting.site/wp-includes/blocks/cover/style.min.css?ver=6.4.3' media='all' /> <style id='wp-block-cover-inline-css'> .wp-block-cover{border-top-width: 0px;border-top-style: none;border-right-width: 0px;border-right-style: none;border-bottom-width: 0px;border-bottom-style: none;border-left-width: 0px;border-left-style: none;color: var(--wp--preset--color--contrast);margin-top: 0px;margin-bottom: 0px;padding-top: 0px;padding-right: 0;padding-bottom: 0px;padding-left: 0;}.wp-block-cover-is-layout-flow > :first-child:first-child{margin-block-start: 0;}.wp-block-cover-is-layout-flow > :last-child:last-child{margin-block-end: 0;}.wp-block-cover-is-layout-flow > *{margin-block-start: 0px;margin-block-end: 0;}.wp-block-cover-is-layout-constrained > :first-child:first-child{margin-block-start: 0;}.wp-block-cover-is-layout-constrained > :last-child:last-child{margin-block-end: 0;}.wp-block-cover-is-layout-constrained > *{margin-block-start: 0px;margin-block-end: 0;}.wp-block-cover-is-layout-flex{gap: 0px;}.wp-block-cover-is-layout-grid{gap: 0px;} .wp-block-cover a:where(:not(.wp-element-button)){color: var(--wp--preset--color--contrast);} </style> <style id='wp-block-heading-inline-css'> h1.has-background,h2.has-background,h3.has-background,h4.has-background,h5.has-background,h6.has-background{padding:1.25em 2.375em}h1.has-text-align-left[style*=writing-mode]:where([style*=vertical-lr]),h1.has-text-align-right[style*=writing-mode]:where([style*=vertical-rl]),h2.has-text-align-left[style*=writing-mode]:where([style*=vertical-lr]),h2.has-text-align-right[style*=writing-mode]:where([style*=vertical-rl]),h3.has-text-align-left[style*=writing-mode]:where([style*=vertical-lr]),h3.has-text-align-right[style*=writing-mode]:where([style*=vertical-rl]),h4.has-text-align-left[style*=writing-mode]:where([style*=vertical-lr]),h4.has-text-align-right[style*=writing-mode]:where([style*=vertical-rl]),h5.has-text-align-left[style*=writing-mode]:where([style*=vertical-lr]),h5.has-text-align-right[style*=writing-mode]:where([style*=vertical-rl]),h6.has-text-align-left[style*=writing-mode]:where([style*=vertical-lr]),h6.has-text-align-right[style*=writing-mode]:where([style*=vertical-rl]){rotate:180deg} .is-style-asterisk:before { content: ''; width: 1.5rem; height: 3rem; background: var(--wp--preset--color--contrast-2, currentColor); clip-path: path('M11.93.684v8.039l5.633-5.633 1.216 1.23-5.66 5.66h8.04v1.737H13.2l5.701 5.701-1.23 1.23-5.742-5.742V21h-1.737v-8.094l-5.77 5.77-1.23-1.217 5.743-5.742H.842V9.98h8.162l-5.701-5.7 1.23-1.231 5.66 5.66V.684h1.737Z'); display: block; } /* Hide the asterisk if the heading has no content, to avoid using empty headings to display the asterisk only, which is an A11Y issue */ .is-style-asterisk:empty:before { content: none; } .is-style-asterisk:-moz-only-whitespace:before { content: none; } .is-style-asterisk.has-text-align-center:before { margin: 0 auto; } .is-style-asterisk.has-text-align-right:before { margin-left: auto; } .rtl .is-style-asterisk.has-text-align-left:before { margin-right: auto; } </style>

And one line at a time, lets start by the first one :

Line 47

<style id=’wp-block-paragraph-inline-css’>
.is-small-text{font-size:.875em}.is-regular-text{font-size:1em}.is-large-text{font-size:2.25em}.is-larger-text{font-size:3em}.has-drop-cap:not(:focus):first-letter{float:left;font-size:8.4em;font-style:normal;font-weight:100;line-height:.68;margin:.05em .1em 0 0;text-transform:uppercase}body.rtl .has-drop-cap:not(:focus):first-letter{float:none;margin-left:.1em}p.has-drop-cap.has-background{overflow:hidden}p.has-background{padding:1.25em 2.375em}:where(p.has-text-color:not(.has-link-color)) a{color:inherit}p.has-text-align-left[style*=”writing-mode:vertical-lr”],p.has-text-align-right[style*=”writing-mode:vertical-rl”]{rotate:180deg}
</style>

You can see the full code looking directly at the referred URL.

• This reply was modified 8 months ago by Jean Christophe Garbez.
• This reply was modified 8 months ago by Jean Christophe Garbez.

Some update to my questions. I have been running other pages through the same Nu html checker tool ( you can find it at https://validator.w3.org/nu/ ), and I got the same errors. For example, if you run the following URL https://2024.wordpress.net/index.php/entrepreneur-demo/ ( a demo of the TT4 theme ) through the checker, you get exactly the same errors report regarding the rotate property…..

Which make me believe the issue is on the Nu html checker tool, not on the html code itself. But again, I a really new to all this, so….

Hey @jcgarbez – the rotate property is definitely part of Core WordPress now (for rotating text) so it does sound like that checked is a little out of date.

I’d recommend taking those warnings with a grain of salt – it certainly won’t be doing any harm to your site that the rotate property is there.

Thank you for your help @jordesign.

Could you recommend any other checker?

I am just concerned that because the html code is not validated according to the W3C standards, it will affect negatively my site SEO. What would you recommend?

Hey @jcgarbez! Since the validation only fails for the css, you should not worry about how SEO will be affected by this. In general, checking tools provided by search engines (like Google search console) should be sufficient for this.

For this particular issue, there’s a bug already filed on W3C’s Github here.