Sublime Text 2 and Emmet and wrapping lines - sublimetext2

I often get text from clients and want to quickly format the text with html tags and wrap each text line at a specified number of characters. I've just installed Sublime Text 2 and it's pretty nice, but one of the things I really want to do I can't quite figure out.
I want to take long paragraphs, wrap each paragraph in a paragraph p tag, and then wrap the lines so they don't run off the screen. So here's what I'm doing:
Copy and paste text from my client into editor (2 paragraphs for this example).
Select text.
Using Emmet, enter "p*" which puts p tags at the beginning of each paragraph and /p at the end of each paragraph.
Select text.
Click Alt Q to wrap text.
The text wraps but it's corrupted because the opening angle bracket "<" from the /p tag is appended to the beginning of each line and the opening angle bracket is missing from the /p tag.
<p>Our swimming lessons run on a perpetual monthly enrollment system,
<making year-round lessons affordable and convenient. Our online
<registration system allows you to sign up at your convenience and
<monitor your account details easily./p>
<p>Our highly trained swim instructors teach our unique, proven
<curriculum in stages, encouraging swimmers to master the fundamentals
<of every important swimming skill. We continuously encourage
<progression and advancement as each swimmer becomes more confident in
<the water. Our program blends important water safety skills, buoyancy
<principles and correct stroke technique./p>
Help! What am I doing wrong?

Here's what you can do:
Paste content from client.
Select, hit AltQ to wrap. You'll now have two cursors, one at the end of each paragraph.
Select Selection -> Expand Selection to Paragraph (I'll show you how to make a shortcut later). Both paragraphs are now selected, each as a selection region.
Bring up Emmet with CtrlShiftG and enter p (not p*)
Hit Enter and you should have two wrapped paragraphs surrounded by <p></p> tags:
<p>Our swimming lessons run on a perpetual monthly enrollment system, making
year-round lessons affordable and convenient. Our online registration system
allows you to sign up at your convenience and monitor your account details
easily.</p>
<p>Our highly trained swim instructors teach our unique, proven curriculum in
stages, encouraging swimmers to master the fundamentals of every important
swimming skill. We continuously encourage progression and advancement as each
swimmer becomes more confident in the water. Our program blends important
water safety skills, buoyancy principles and correct stroke technique.</p>
To create a keyboard shortcut for Expand Selection to Paragraph, go to Preferences -> Key Bindings - User and add the following:
{ "keys": ["ctrl+alt+shift+p"], "command": "expand_selection_to_paragraph" }
If the file is empty, wrap the line above in square brackets []:
[
{ "keys": ["ctrl+alt+shift+p"], "command": "expand_selection_to_paragraph" }
]
Save the file, and you should now be able to use CtrlAltShiftP for step 3 above. Feel free to change the key combination if you wish, but be aware that it may conflict with other built-in or plugin combos.
Note: I tested all this on Sublime Text 3, but it should work the same in ST2.

Related

Does text from a rich text editor not inherit styles when rendered in an HTML document?

Just to make things clear, I have used an RTE in the backend to store some description. Later, through an api, I am receiving the description along with other details as a response. Now the styles are intact till now. For example, bold headings. But when I render it in the HTML document using innerHTML property, all I see is unformatted text. The headings are not bold anymore.
Here's a part of response:
</p>\r\n\n\r\n<p><span style=\"font-weight: bold;\">Features</span> \n </p>\r\n\n\r\n<p>Gives even skin tone, smoother complexion and sculpted facial features.
Clearly, font-style="bold" can be seen here. But after this, the rendered version does not contain those styles.
Here's the full response:
"cart_count":2,
"images":[
],
"success":true,
"message":"Sucessfully",
"data":{
"product_id":1,
"name":"Dr G Butterfly Gua Sha",
"category_id":1,
"category":"Skin Tool",
"description":"<p>Dr G Butterfly Rose Quartz Gua Sha is a beauty and wellness tool designed to heal and enhance natural beauty. It lifts and sculpts your face, drains the lymph node, which reduces puffy eyes and face. By scraping with repeated strokes on the surface of the skin, this tool helps stimulate muscles and increases the blood flow. \n </p>\r\n\n\r\n<p><span style=\"font-weight: bold;\">Features</span> \n </p>\r\n\n\r\n<p>Gives even skin tone, smoother complexion and sculpted facial features. Reduces the signs of ageing and gives younger-looking skin. Increases lymphatic function. Stimulates blood circulation. Improves the appearance of dark circles and reduces under-eye puffiness. </p>\r\n\n\r\n<p><span style=\"font-weight: bold;\">How To Use \n</span></p>\r\n\n\r\n<p>Apply Dr G oil or Dr G gel as per your skin type covering the face and neck. </p>\r\n<p>Hold the butterfly gua sha tool firmly and sweep across gently up and out, starting with the neck, cheeks, jawline, chin, around the mouth, and slowly glide under the eyes, across your eyebrows and from your forehead up to your hairline. </p>\r\n<p>You can sweep it 3-5 times per area. </p>\r\n<p>Recommended at least a few times a week for best results. </p>\r\n\n\r\n<p><span style=\"font-weight: bold;\">About Dr G</span> \n </p>\r\n\n\r\n<p>Dr G offers luxury skincare products, backed by over a decade of dermatology expertise and on-ground practice. Made for Indian weather conditions, with variants for different skin types, including sensitive skin, and to address specific skin concerns - these innovative products are a perfect balance of nature and science. Drawing from ancient Ayurveda and combining natural extracts with skin-safe science, Dr G's range of products bridge modern skincare with holistic science.</p>",
"short_description":"Sculpts, Tones, Reduces Puffiness, Lifts",
"max_quantity":500,
"status":1,
"in_stock":1,
"measurement":[
{
"is_cart":true,
"ordered_quantity":2,
"is_wish":false,
"discounted_price":1400.0,
"weight":"200 Gram",
"price":1400.0,
"prod_id":1,
"percentage":100,
"max_quantity":500
}
]
}
}
The HTML from your response isn't valid. You can easily test it, if you copy the HTML string from your response to a text file with .html file ending and open it with your browser (index.html for example). Or use a validator like this one: https://www.freeformatter.com/html-validator.html
Let's pick one part from the HTML string which has wrong characters and gets displayed unformatted:
<span style=\"font-weight: bold;\">Features</span> \n
If you remove the backslashes \ here this peace gets rendered correctly:
<span style="font-weight: bold;">Features</span> \n
I would reccomend you to encode the HTML before sending it to the frondend. You could use Base64 which can be easily encoded in the backend and decoded on the frontend before displaying it.
If this "wrong" characters are already there when you recive this HTML (on your Backend) you have to parse it first to clean it.

Accessibility and asterisks end notes

I have a lengthy document that I need to convert to WCAG AA compliant HTML and the author used asterisks as end notes like *, **, and ***. Here is an example:
Solano County Atlas Fire (Solano County) 10/17*
Ponderosa Fire (Butte County) 08/17*
Helena Fire (Trinity County) 08/17*
...
* For taxable years beginning on or after January 1, 2014...
NOTE: multiple * asterisks in the above list all point to a single end note reference making it difficult to use traditional footnote practices.
Below is my attempt to solve this using aria-describedby, however JAWS does not read the description asterisks or the description at all.
Solano County Atlas Fire (Solano County) 10/17<span aria-describedby="dd1">*</span>
...
<p id="dd1">* For taxable years beginning on or after January 1, 2014...</p>
After some research it appears that JAWS and some other screen readers do not announce some punctuation at all. So I am not sure how exactly to go about fixing this. I am not really at liberty to change the characters unless there is no other possible solution.
What would you suggest I do to fix this?
I'd suggest to do a simple thing, as it is done in quite a number of books in HTML I read.
Make your asterisk a link with an Id, i.e., <a id="linkToNote1" href="#note1">*</a>.
Add a heading called "Notes" to the end of the document.
Add notes either as list items or as paragraphs with corresponding Ids (in this case, note1).
The most important: End each note with a link leading back to the appropriate place in the text, i.e.: Go back.
If however you want to use ARIA, do not mark the only asterisk with aria-describedby since you're right in that many users set their punctuation level quite low so they are not distracted by those signs in a lengthy text.

How to get content of an HTML element using XPath without element id?

I am trying to find an element using xpath and get the elements text value. Kindly bear with me and help me in resolving the issue.
Visit Click here
Visit Click here
1
In <div class=“medium-8 columns”> - I need to extract paragraphs text only up to “Further History” (ie. stop at “Further History”, not including “Further History”).
2.
In <div class=“medium-8 columns”> - Here I need to extract paragraphs text after “Further History” (not including “Further History”).
I am using below XPath expression which is returning anything.
(//STRONG[not(contains(text(), 'Further History'))]/following-sibling::text() | //STRONG[not(contains(text(), 'Further History'))]/../following-sibling::p/text()) | //div[contains(#class, 'articlecontent')]
HTML might not be case-sensitive, but XML (and, consequently, XPath) is: "STRONG" is not the same as "strong", and in the HTML you linked to, there is only "strong".
A useful XPath expression to retrieve the text you are interested in might be
//div[#class="medium-8 columns"]/p[following-sibling::p/strong]/text()
which means
//div select all `div` elements, anywhere in the document
[#class="medium-8 columns"] but only if they have a `class` attribute whose value is
equal to "medium-8 columns"
/p of those `div` elements select all `p` child elements
[following-sibling::p/strong] but only if they have a following sibling `p` which has a
`strong` element as a child
/text() of the remaining `p` elements, select the text content
and which would return (individual results separated by ------):
Tim Bajarin is recognized as one of the leading industry
consultants, analysts and futurists, covering the field of
personal computers and consumer technology. Mr. Bajarin has
been with Creative Strategies since 1981 and has served as a
consultant to most of the leading hardware and software
vendors in the industry including IBM, Apple, Xerox, Hewlett
Packard/Compaq, Dell, AT&T, Microsoft, Polaroid, Lotus,
Epson, Toshiba and numerous others.
-----------------------
His articles and/or analysis have appeared in USA Today, Wall
Street Journal, The New York Times, Time and Newsweek
magazines, BusinessWeek and most of the leading business and
trade publications. He has appeared as a business analyst
commenting on the computer industry on all of the major
television networks and was a frequent guest on PBS’ The
Computer Chronicles.
-----------------------
Mr. Bajarin has been a columnist for US computer industry
publications such as PC Week and Computer Reseller News and
wrote for ABCNEWS.COM for two years and Mobile Computing for
10 years. His columns currently appear in Asia Computer
Weekly, Personal Computer World (UK), and Microscope (UK) as
well as Mobile Enterprise Magazine. His various columns and
analyses are syndicated in over 30 countries.
For your second case:
Here I need to extract paragraphs text after “Further History” (not including “Further History”)
just replace following-sibling with preceding-sibling in the path expression.

What kind of GWT Panel that make Html widgets in it flow like a sentence in a paragraph?

I want to make each sentence in a paragraph stored inside a html widget. For instance, "I go to school. School is in city. My mom cooks for me. She is one I love"
There are 4 sentences in this paragraph and I want to store each of these sentence inside a html.
HTMLPanel testHTMLPanel=new HTMLPanel("<p></p>");
HTML html1=new HTML("<b>I go to school.</b>");
HTML html2=new HTML("<i>School is in city</i>");
HTML html3=new HTML("<b>My mom cooks for me.</b>");
HTML html4=new HTML("<i>She is one I love</i>");
testHTMLPanel.add(html1);
testHTMLPanel.add(html2);
testHTMLPanel.add(html3);
testHTMLPanel.add(html4);
But it showed one new line for each sentence. The sentences didn't go one after another like in a normal paragraph.
PRINT OUT:
I go to school.
School is in city
My mom cooks for me.
She is one I love
But I want it like this:
I go to school. School is in city. My mom cooks for me. She is one I love.
Note: if the sentence is very long, then some part of the sentence will be showed in the next line. For example, If we show this long sentence "This is very very long sentence ...... ......some part of it will be on the next line". "some part of it will be on the next line" will be flowed to next line naturally like a sentence in a paragraph. Thus, we can't use label because the whole label will take the whole sentence.
I used HTMLPanel("<p></p>"), but it didn't work. How to modify this HTMLPanel or any other kind of panel that can solve the problem?
FlowPanel and HTMLPanel will both work, but it depends on the widget you feed into them. HTML is a block level widget (root element is a <div>); use an InlineHTML instead (root element is a <span>).
But for assembling pieces of HTML, better use a SafeHtmlBuilder as Dvd Prd suggests; unless the pieces have to be dynamically updated later, but you can mix and match (use HTMLPanel.createUniqueId() to create placeholders for the widgets).
Try the following :
SafeHtmlBuilder builder = new SafeHtmlBuilder();
builder.appendHtmlConstant("<b>I go to school.</b>");
builder.appendHtmlConstant("<i>School is in city</i>");
builder.appendHtmlConstant("<b>My mom cooks for me.</b>");
builder.appendHtmlConstant("<i>She is one I love</i>");
HTMLPanel panel = new HTMLPanel(builder.toSafeHtml());
RootPanel.get().add(panel);
Have a look at gwt flow panel
A panel that formats its child widgets using the default HTML layout behavior.
It just creates a html div which you need.
And when ever adding any html content use safehtml interface to covert your content.
http://google-web-toolkit.googlecode.com/svn/javadoc/latest/com/google/gwt/user/client/ui/FlowPanel.html

Regex: Find groups of lowercase letters between HTML tag

I'm attempting to develop a regular expression that can be run in Sigil, the ePub 2 editor.
Small-caps are a well-known problem within the current ePub reader ecosystem. Many readers, such as Adobe Digital Editions, do not support "font-variant: small-caps". After trying several different workarounds, I've settled on creating fake small caps by transforming the text to uppercase and setting the previously lowercase letters to "font-size: 0.75em".
This process is extremely tedious, especially when working with books that have lots of endnotes with citations of other books.
Say that I have a bunch of phrases in an HTML page tagged with an "SC" class. I've created a test phrase:
<span class="SC">Hello World! Testing: one tWo thrEE & W.T.F.</span>
<span class="foo">Don't touch me!</span>
The goal is to write a regex that matches any lowercase letters within the "SC" span tag only, and replace them with:
<span class="FSC">LETTERS</span>
I can manage to match and replace the letters in the first word "Hello", but everything breaks down after that.
Here's what I've got so far:
Find:
(<span class="SC">.*?)([a-z]+)(.*</span>)
Replace:
\1<span class="FSC">\U\2\E</span>\3
The tricky part is then continuing to find the rest of the lowercase letters within that tag, now that a new "FSC" (Fake Small Caps) span tag has been introduced. Trying the same regex again results in "span" and then "class" getting the FSC treatment. Ideally, I'd like to be able to just keep hitting the "Replace All" button until no more matches are found.
The above example would look like this when finished:
<span class="SC">H<span class="FSC">ELLO</span> W<span class="FSC">ORLD</span>! T<span class="FSC">ESTING</span>: <span class="FSC">ONE</span> <span class="FSC">T</span>W<span class="FSC">O</span> <span class="FSC">THR</span>EE & W.T.F.</span>
<span class="foo">Don't touch me!</span>
It's not pretty, but it works on every ePub reader that I've tested it on.
If you google "epub small caps regex", you'll come across a MobileRead wiki article that I edited to include this regex, which I've decided is not satisfactory:
(<span class="[a-zA-Z0-9\- ]*?(?<!F)SC[a-zA-Z0-9\-]*?">(?:.+?<span class="FSC">.+?</span>)*[\.|,|:|;|-|–|—|!|\?]? ?(?:&)? ?[A-Z]+)([a-z'’\. ]+)(.*?</span>)
This ends up miniaturizing a bunch of punctuation and sometimes stops in the middle of a phrase. I started over, thinking there was probably a better solution that doesn't attempt to plan for every single possibility up front.
If someone comes up with a better solution to this, you'll be the hero of the entire ePub publishing industry.
Update
I've added the accepted (and only) answer to the Mobile Read wiki. Please note that this regex has been altered specifically for use in Sigil; YMMV in other environments.
Perfect usecase for: Collapse and Capture a Repeating Pattern in a Single Regex Expression
Modified it for your case:
(<span class="SC">(?:(?!<\/span>)(?:[^a-z&]|&[^;]+;))*|(?!^)\G(?:(?!<\/span>)(?:[^a-z&]|&[^;]+;))*)([a-z]+)
Replace with: \1<span class="FSC">\U\2\E</span>
And here's the RegEx explained: http://regex101.com/r/jU6bA5
This is a solution for "Replace All" as it works via RegEx global modifier /g !