Welcome to our New Forums!

Our forums have been upgraded and expanded!

Welcome to Our New Forums

  • Our forums have been upgraded! You can read about this HERE

HTML Word Processor

Soaring Eagle 666

New member
Joined
Sep 24, 2017
Messages
1,038
I made an HTML editor/word processor that doesn't mangle the hand-written code of the JoS pages. HP Cobra thought it might be useful for speeding up translation work, so here it is:

Web Word 2.0

It's a Chrome extension that lets you edit a webpage like a Microsoft Word document. (It works on Brave too.) Although there are many similar programs out there, this one is specifically designed to work with hand-written HTML and preserve the layout correctly.

Unlike most editors, you have control at every level. You can edit the element structure, attributes, even the raw code, and see the changes in real time.

I've also fixed the mangled character problem that has afflicted the JoS sites. All non-ASCII characters are converted to HTML number codes, which are always read correctly regardless of the document encoding (which was the problem before). However, my editor converts these codes back to symbols even when you edit the raw code, so this trick is completely transparent.

To install it:

1. Extract that ZIP file. There's a directory inside called "WebWord".

2. Open the Extensions page in Chrome. Click the three dots at the top right to open the menu, then under "More tools" click "Extensions".

3. Enable developer mode at the top right of the Extensions page.

4. Click "Load unpacked" and select the directory "WebWord" from the extracted ZIP file. Make sure you select the inner-most "WebWord" directory.

Once installed, you'll see an editing toolbar appear at the top of every webpage. (Yes, the style is ancient Windows 95 graphics. This started as a personal project, and I like that style.)

For editing/translating a page, simply open the HTML file, click the pencil icon in the toolbar to enable editing, then when you're done click the "Save" icon on the toolbar to download the edited page. You can also specify the language under the File->Properties menu.

The main thing to remember is that your saved HTML files will need to be in the same directory as the original, otherwise images won't load. (But this limitation applies regardless of how you're editing the pages.)

Feel free to ask questions or suggest features that might be useful.
 
That's a great tool definitely although I am not sure how many SS are using Chrome. Maybe at least Brave.
I want to quote for you here the member @M1000 who offered to help in coding. Maybe you can sort of collaborate with him regarding websites and coding, if is possible.

M1000 said:
I would love to help advance html or c++ or python code and digital market for the joy of Satan . Org. If this post could get to the right person, thanks m100

Also Bravera as well
Bravera said:

Since is 3 of you being knowledgeable about IT I tried to bring you all together in case you will wish to collaborate in future projects, so you can know about each other.
 
The Alchemist7 said:
That's a great tool definitely although I am not sure how many SS are using Chrome. Maybe at least Brave.
I want to quote for you here the member @M1000 who offered to help in coding. Maybe you can sort of collaborate with him regarding websites and coding, if is possible.

M1000 said:
I would love to help advance html or c++ or python code and digital market for the joy of Satan . Org. If this post could get to the right person, thanks m100

Also Bravera as well
Bravera said:

Since is 3 of you being knowledgeable about IT I tried to bring you all together in case you will wish to collaborate in future projects, so you can know about each other.
Thank you.

It should theoretically work on all Chromium browsers. I've now tested Iridium, and it works there too. Both Brave and Iridium are open source and privacy-oriented and should be fine for SS to use. Chrome is probably safe if you don't have personal information on the computer, but I agree the alt browsers are safer. Firefox support is possible, but there are several compatibility obstacles.
 
For us who know web development it isn’t necessary, but sure, this is a helpful tool for someone who isn’t familiar with HTML but still wants to make something. I hope it doesn’t generate messy code.
 
Since you recommend it, I am going to try it sometimes. I noticed in the past with many similar processors that they make the code very cluttered, which is personally something I really dislike. I like ways to keep the code clean. tidy and smooth, without unnecessary repetitions.

I don't know as much about front-end development as you guys, so this is where my post ends.
 
I noticed when trying to do a copy-paste on html file, the text has another font size and the backround is white. With two exceptions, but I can't do it everytime I want it. Can you explain how to do it properly?

I think it would be really fast to translate on deepl, adapt the text there and copy-paste directly on html file
 
Dark Blue Eye said:
I noticed when trying to do a copy-paste on html file, the text has another font size and the backround is white. With two exceptions, but I can't do it everytime I want it. Can you explain how to do it properly?

I think it would be really fast to translate on deepl, adapt the text there and copy-paste directly on html file
Ah, yes. What you want is to paste as plain text. I had updated the cloud-based version of Web Word to give an option for that, but not the browser extension yet. I'll post an update soon (within a few days).

Meanwhile, you can avoid the issue by opening a text editor like Notepad and pasting the text there, then copying it again and pasting into Web Word. Notepad removes the formatting.
 
Soaring Eagle 666 [JG said:
" post_id=334779 time=1647415583 user_id=346]
Dark Blue Eye said:
I noticed when trying to do a copy-paste on html file, the text has another font size and the backround is white. With two exceptions, but I can't do it everytime I want it. Can you explain how to do it properly?

I think it would be really fast to translate on deepl, adapt the text there and copy-paste directly on html file
Ah, yes. What you want is to paste as plain text. I had updated the cloud-based version of Web Word to give an option for that, but not the browser extension yet. I'll post an update soon (within a few days).

Meanwhile, you can avoid the issue by opening a text editor like Notepad and pasting the text there, then copying it again and pasting into Web Word. Notepad removes the formatting.

Actually there is a copy as plain text command from an extension. It's funny how useful this things are, before seeing your extension I didn't even knew about their existence and never heard about plain text :lol:
 
Stormblood said:
Since you recommend it, I am going to try it sometimes. I noticed in the past with many similar processors that they make the code very cluttered, which is personally something I really dislike. I like ways to keep the code clean. tidy and smooth, without unnecessary repetitions.

I don't know as much about front-end development as you guys, so this is where my post ends.
I also dislike messy code. I put a lot of consideration into that while writing Web Word. It will never be as clean as hand-written code, but I tried to avoid the worst problems I've seen with other editors. For example, Web Word will:
- Use <b> for bold instead of <span style="font-weight:bold;">
- Never add <style> elements in the body.
- Never auto-generate gibberish class names. All per-element styling is done with the style attribute. Although it can lead to a bit of code repetition, it's more user-friendly than requesting a class name every time you style multiple elements at once.
- Never change the page unless required by an editing action. If you open and immediately save a page, it should be the same (except for fixing syntax errors).

I also keep refining it when things bother me. My current version-in-progress will remove empty <p> elements and try to condense tons of spaces to only 1.

Larissa666 said:
For us who know web development it isn’t necessary, but sure, this is a helpful tool for someone who isn’t familiar with HTML but still wants to make something. I hope it doesn’t generate messy code.
It can still be useful for expert developers. These are the features I use use all the time:

You can right click on an element or a [tag] and edit the code. Changes are shown instantly in the page as you type. You can edit the page's CSS code or the <head> HTML code from the File->Page Setup dialog.

You can edit an element's HTML attributes in a nice list by right-clicking it, then clicking Properties, then Edit HTML Attributes. You can also change an element's tag name there. As with the code editor, changes are shown instantly.

You can run JavaScript code using the Tools->Run JavaScript. Unlike the browser's JS console, you can open as many of these windows as you like, and each one can hold a little snippet of code to run at a moment's notice. Note: The page being edited is inside an <iframe>, so you must use the variables ddocument or dwindow to access it. There is also a Web Word API, which has three useful functions at the moment: MergeWithParent(elem); MergeWithPrevious(elem); MergeWithNext(elem);
The names should be self-explanatory. They are very useful for batch editing using JavaScript.
 

Al Jilwah: Chapter IV

"It is my desire that all my followers unite in a bond of unity, lest those who are without prevail against them." - Satan

Back
Top