Output embedded images


Images inserted in a Word document can be outputted and linked to an HTML file with <img> tags.

 

func02-01

The <img> tag is outputted with a class attribute assigned according to the type of layout option (type of wrapping and alignment) specified in Word, so by setting the style using that "class", you can approximate the display of the image on Word.

For more information, please refer to the "Figure and figure arrangements" section of the online manual.

 

Alternatively, the image can be converted to a string (data URI scheme) and embedded directly in the HTML with an option when executed from the command line. In this case, the image file is not generated as a separate file, but only a single HTML file.

 

Option to specify smartphone compatibility, CSS, and JavaScript


func02-02-top

By specifying options when executing from the command line, you can make the website responsive for optimal display on smartphones and other devices, or add interactive displays and user interfaces by specifying JavaScript.

 

Other HTML elements and tags to be converted/output

viewport

Outputs meta tags of the following format in HTML <head>:

<meta name=”viewport” content=” Content specified in ‘content’”>

By setting "viewport," you can set the display status on mobile devices such as smartphones.

 

Command example

"C:\Program Files\Antenna House\xhw12\Word2HTML.exe" c:\document\manual.docx c:\out\index.html -viewport width=device-width,user-scalable=yes

 

 

Specify CSS and JavaScript

 

CSS

CSS files can be specified and loaded from HTML. Media queries can be used to apply styles to each device (screen width) for optimal display on smartphones and other devices.

Note: CSS files are available as samples are included with this product.

CSS files can be specified when converting from the Word add-in or from the command line.

 

Conversion from Word add-ins

When the "Use specified CSS" option in the Word add-in is checked, a dialog box for specifying the CSS file is displayed.

 

func02-02-01

 

When "Convert to HTML" is executed, the specified CSS file is copied to the HTML output destination and linked (relative link) from the HTML. When the output HTML is displayed in a Web browser, it will reflect the loaded CSS style.

 

func02-02-02

 

Conversion from command line

To execute from the command line, give the following option:

-css cssfile [media]

In the "cssfile", specify the path on Windows where the CSS file is located.
In the "[media]", specify the type of media (screen, print, etc.) to which the CSS will be applied. If not specified, it is not necessary.

Command example

"C:\Program Files\Antenna House\xhw12\Word2HTML.exe" c:\document\manual.docx c:\out\index.html -css c:\document\sample.css screen

When the command is executed, the specified CSS file is copied to the HTML output destination and linked (relative link) from the HTML. When the output HTML is displayed in a Web browser, it will reflect the loaded CSS style.

You can link multiple CSS files by writing multiple pairs of -css and CSS files.

func02-02-03

 

JavaScript

You can specify a JavaScript file that describes the necessary code and load it into an HTML document. By linking JavaScript, you can create interactive displays on both PCs and smartphones, and improve the user interface to make operation more comfortable. Additionally, JavaScript can be used for access analysis.

Note:

  • Please prepare js files as required.
  • The js file option is only available when converting from the command line.
  • The js file will not be copied. Only the path to the file will be written in the <head> of the HTML. Please save the js file in the same location as the specified path.

Command example

"C:\Program Files\Antenna House\xhw12\Word2HTML.exe" c:\document\manual.docx c:\out\index.html -js sample.js

Multiple js files can be specified by writing multiple pairs of -js and js file paths.

 

Sample CSS included


Sample CSS files are included with this product so that you can use the styled web page immediately. Please feel free to use these samples.

You can also customize your web page based on these samples, so you can publish your web page with less work.

Note: Sample CSS files are stored in the "CSS" folder of the "HTML on Word" installation.

For folders in their default state: C:\Program Files\Antenna House\xhw12\CSS\

 

Sample CSS files

CSS file name

Example

Smartphone

Description

sample.css

function-sample-01

 

function-sample-sp-01

 

Simple design, with a maximum width of 900 pixels when displayed on a PC.

sample-basic.css

function-sample-02

 

function-sample-sp-02

 

Simple design, with the maximum width set to the full screen width when displayed on a PC.

sample-news.css

function-sample-03

 

function-sample-sp-03

 

Simple design, with the maximum width set to the full screen width when displayed on a PC.

sample-simple.css

function-sample-04

 

function-sample-sp-04

 

Simple design, with a maximum width of 900 pixels when displayed on a PC.

sample-theme-green.css

function-sample-05

 

function-sample-sp-05

 

The design uses a light gray background and lime green accent colors for headings, etc. The maximum width is 900 pixels when displayed on a PC.

sample-theme-warm.css

function-sample-06

 

function-sample-sp-06

 

The design uses a light yellow background and burgundy accent colors for headings, etc. The maximum width is 900 pixels when displayed on a PC.

 

 

About the included sample CSS files

  • The sample CSS files included in "HTML on Word" can be freely used by the users (including uploading to a web server and linking).

  • Users are also free to edit and use the samples.