I have a too long title and i want to brake it with a in a specific place.
(It is a Wordpress Woocommerse single item page product title in a child theme.)
Original:
<h1 itemprop="name" class="product_title entry-title">Something long text – 2023. 05. 27. 10:30</h1>
Expected:
<h1 itemprop="name" class="product_title entry-title">Something long text <br> 2023. 05. 27. 10:30</h1>
The question is how can i read the "Something long text – 2023. 05. 27. 10:30" and how can i write back.
I can make the character replaceing (i think). :)
Related
I am trying to transfer a text from a printed book into HTML5, but meanwhile I am trying to keep its thematic and page/paragraph/lines layout structure exactly as it is. For example, every page of the printed book is divided as a <div> section eg. <div class=page id=55> so that it emulates/represents exactly the page unit of the printed book, and also facilitate referencing. I don't care much how the text will be rendered on the browser, this is something that I can think about later. I just want the HTML and the browser to "know" the original pagination and layout of the printed book.
The problem is that in the printed book, some paragraphs or even boxes, tables etc span over to the next page. If I translate it to HTML, I do it like this:
<div class=page id=1>
<p>Once upon a time...</p>
...
<p>...and so the bold knight
</div>
<div class=page id=2>
slew the evil dragon.</p>
<p>Text...</p>
...
This is illegal in HTML, as we have a <p> tag being interrupted by a </div> tag, and then a new div element beginning with a plain text, which is closed by a </p> tag.
HTML would expect me to close the first part of the broken paragraph with a </p>, and continue with a new <p> tag after the div, but I am not doing this because it doesn't correspond to the pagnation of the original book, and would result in half-paragraphs being understood are 2 proper paragraphs.
So, how to use legal HTML while maintaining the theoretical page/paragraph/broken paragraph/page break structure and information, or at least making the brower "know" the original pagination? Is there a more appropriate tag or method to emulate the page break while keeping the page number id?
Perhaps something like
<p>...and so the brave knight<some tag(s) that show page 2 begins here>killed the dragon</p>
How about instead of encapsulating each page within a div you include a tag at the start of each page designating the page number. An aside tag seems appropriate for this.
<aside class="page-number" data-page="1">Page 1</aside>
<p>Once upon a time...</p>
<p>...and so the bold knight</p>
<aside class="page-number" data-page="2">Page 2</aside>
<p class="continued">slew the evil dragon.</p>
<p>Text...</p>
If you need to continue a paragraph then you'll have to break into multiple elements, but perhaps you can specify when a paragraph is a continuation of a previous one. For instance using the continued class as shown above.
If you really don't want to break the p tag then you could put a span within it that is only used for semantic reasons. Something like this;
<p>...and so the bold knight
<span class="page-marker" aria-hidden="true" data-page="1"></span>
slew the evil dragon.</p>
But this kind of makes less semantic sense than the previous solution.
Try adding display: inline; to either the CSS style of the class page or the style attribute of each page div.
I'm maintaining an online newspaper editor, and I've stumbled on a weird issue, where text doesn't want to be justified with text-align:justify. After a few hours of debugging, I noticed it might have something to do with the output HTML indenting (which sounds realy weird to me).
Obviously the raw HTML output of my editor page isn't indented, but a text field has a basic structure like this:
<div>
<p>
<span>
<span>
<span>
Hello
</span>
</span>
</span>
<span>
<span>
<span>
World.
</span>
</span>
</span>
</p>
</div>
Every word is wrapped in 3 spans(rendered by JS/jQuery, for styles, fonts & uniformity between browsers), and I put the text-align:justify; in the <p> element.
Here's some sample code:
https://jsfiddle.net/tdje0a9L/
As you can see, the text isn't justified.
But now, when i indent the exact same HTML code, it becomes justified: https://jsfiddle.net/3v7vk24d/
I can't realy do much about the multiple span wrapping, that's just how the editor works.
Now is my question:
is there any way to render the output HTML indented?
(to get my text justified)
or
is there an other way to get my text justified?
It is because you have (non-breaking space) entities in you source code - that means that you code really don't have spaces between words.
So for text-align: justify it seams to be one word.
Your example will print: Donec quam felis as one word
You can look in this question for some more information how you can remove your unwanted entities: How to remove from the end of spans with a given class?
For example I don't want that the word “Call” to be sliced in “Ca
ll”, but I want to apply 'white-space:wrap;'
//'float:left;' it place the text next to the image.
<div style="float:left;"><img src="img.jpg" /></div>
<div style="color:gray;word-wrap:normal;white-space: wrap;">Why my text is sli
ced. </div>
This may be the rule you're looking for but see how it works in conjuction with your other styles.
word-break: keep-all;
Other values are normal (only breaks on spaces and hyphens) and break-all (the line will break at any character)
<div style="color:gray;word-wrap:normal;white-space:wrap;word-break:keep-all;">
Why my text is sliced.
</div>
On another note - in your question you actually have a line break within the word - the browser has no way of knowing this isn't two words and will always break there if needed. Are you pasting text in from a document that is entering line breaks when it wraps your text to a new line perhaps?
Wordpress strips out <p> and <br> tags when switching between the visual and the text editors. Well, to be specific, it doesn't actually strip them out of the content, but it does not display them in the text editor view. Is there a way to stop it from hiding those tags?
I know about the tinymce advanced plugin, but is there a way to stop this behavior on a per-post/per-page basis without having to install the plugin?
If you add a meaningless data attribute to the <p> and <br> tags, they will continue to show.
Example
When switching from text to visual editor and back, the following text
<p>Some paragraph text <br> and a second line.</p>
becomes
Some paragraph text
and a second line.
However,
<p data-x>Some paragraph text <br data-x> and a second line.</p>
makes the tags remain visible:
<p data-x="">Some paragraph text <br data-x="" /> and a second line.</p>
This is useful on pages with more complex layouts that can shift around when the tags get stripped.
If the post is custom post type, you can add meta box with add_meta_box and there you can initialize your own editor with wp_editor which can be customized. For example you can pass settings to the tinymce like force_p_newslines which should force every new line to start with new paragraph
How to remove all inline styled style=properties+val from every tag from a long source code quickly.
For example.
<p style="border:2px red solid">some text</p>
<span style="background:red">some text</span>
to
<p>some text</p>
<span>some text</span>
Assuming your editor supports regular expression find and replace (and if it doesn't, get a new editor):
Find with this regular expression: \s?style="[^"]*"
Replace with: nothing!
Note that this will not catch instances where your code is malformed, as shown in your example (missing double quote at the end of the first style).